/* Fullfill Store — design tokens (Hallmark custom theme: gold-leaf / rose / warm cream / boutique luxury) */
:root {
  /* ── Paper (warm ivory cream) ── */
  --color-paper:    oklch(97.5% 0.010 85);
  --color-paper-2:  oklch(94.5% 0.014 84);
  --color-paper-3:  oklch(90%   0.018 82);
  --color-ink-invert: oklch(96% 0.010 85);

  /* ── Ink (warm espresso) ── */
  --color-ink:      oklch(26% 0.020 62);
  --color-ink-2:    oklch(44% 0.018 62);
  --color-muted:    oklch(54% 0.016 62);

  /* ── Gold accent ── */
  --color-accent:      oklch(72% 0.130 84);   /* bright gold — fills, rules, large display */
  --color-accent-deep: oklch(56% 0.110 72);   /* antique/bronze gold — smaller accents, better contrast */
  --color-accent-soft: oklch(90% 0.045 85);   /* gold wash for panels */
  --color-accent-ink:  oklch(24% 0.020 62);   /* dark text on gold fill */
  --color-focus:       oklch(60% 0.160 82);

  /* ── Rules / dividers ── */
  --color-rule:    oklch(84% 0.020 82);
  --color-rule-2:  oklch(90% 0.014 82);

  /* ── Dark band (footer / recruit) ── */
  --color-espresso:   oklch(24% 0.022 60);
  --color-espresso-2: oklch(30% 0.020 60);

  /* ── Typography ── */
  --font-display: "Trirong", "Cormorant Garamond", Georgia, serif;         /* Thai + Latin serif */
  --font-latin:   "Cormorant Garamond", "Trirong", Georgia, serif;         /* English wordmark / numerals */
  --font-body:    "IBM Plex Sans Thai", "Trirong", system-ui, sans-serif;  /* Thai workhorse */

  /* type scale */
  --text-xs:   0.78rem;
  --text-sm:   0.9rem;
  --text-base: 1.05rem;
  --text-lg:   1.25rem;
  --text-xl:   1.6rem;
  --text-2xl:  2.1rem;
  --text-3xl:  2.9rem;
  --text-4xl:  clamp(2.6rem, 6vw, 4.2rem);
  --text-display-s: clamp(3rem, 8vw, 5.5rem);
  --text-display:   clamp(3.4rem, 12vw, 9rem);

  /* ── 4pt spacing scale ── */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6.5rem;

  /* ── Motion ── */
  --dur-short: 140ms;
  --dur-mid:   260ms;
  --dur-long:  520ms;
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ── Radius / z ── */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --z-nav: 100;
  --z-top: 200;
}