@layer reset, base, components, modules, utilities;

/* RH by Rizka Haristi — minimal commerce ala Impulse (Shopify).
   Kanvas putih murni, abu netral, satu aksen musiman. */
:root {
  /* OKLCH triplets */
  --lch-ink:        21% 0 0;          /* charcoal netral */
  --lch-ink-soft:   42% 0 0;
  --lch-ink-mute:   51% 0 0;
  --lch-line:       91% 0 0;
  --lch-canvas:     100% 0 0;         /* putih murni */
  --lch-canvas-raise: 97.5% 0 0;
  --lch-accent:     52% 0.085 55;     /* terracotta lembut — aksen musiman, ganti per season */

  --color-ink:        oklch(var(--lch-ink));
  --color-ink-soft:   oklch(var(--lch-ink-soft));
  --color-ink-mute:   oklch(var(--lch-ink-mute));
  --color-line:       oklch(var(--lch-line));
  --color-canvas:     oklch(var(--lch-canvas));
  --color-canvas-raise: oklch(var(--lch-canvas-raise));
  --color-accent:     oklch(var(--lch-accent));

  /* Type — sans bersih untuk semua, Fraunces italic hanya aksen brand */
  --font-display: "Fraunces", "Times New Roman", serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  --text-xs:   0.72rem;
  --text-sm:   0.85rem;
  --text-base: 1rem;
  --text-md:   1.2rem;
  --text-lg:   clamp(1.5rem, 2.6vw, 2rem);
  --text-xl:   clamp(2rem, 4.5vw, 3.4rem);
  --text-hero: clamp(2.4rem, 6vw, 4.5rem);

  --tracking-label: 0.18em;

  /* Spacing */
  --inline-space: 1ch;
  --block-space: 1rem;
  --section-space: clamp(4rem, 10vw, 8rem);
  --gutter: clamp(1.25rem, 4vw, 3rem);

  --measure: 62ch;

  --border: 1px solid var(--color-line);
  --focus-ring-color: var(--color-ink);
  --focus-ring-size: 2px;
  --focus-ring-offset: 2px;

  --z-nav: 30;
  --z-overlay: 50;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}