/* Hallmark · design tokens · theme: studied-DNA (source: https://ventriloc.ca/en/)
 * paper oklch(96.7% 0.004 91) · accent (brass) oklch(52.7% 0.086 86) · mark (orange) oklch(70% 0.197 40)
 * display: General Sans 500 · body: Geist 400 · labels: DM Mono · Korean: Pretendard
 * Every colour / font / space / motion value in css/home.css references a token from this file.
 */
:root {
  /* ---- colour: neutrals (warm-tinted grays, one hue family) ---- */
  --color-paper:    oklch(96.7% 0.004 91);   /* #f5f4f1 page */
  --color-paper-2:  oklch(94.0% 0.005 95);   /* #ecebe7 panels */
  --color-card:     oklch(98.5% 0.003 85);   /* #fbfaf8 raised cards */
  --color-ivory:    oklch(92.6% 0.013 82);   /* #ebe6dd image + illustration grounds */
  --color-ink:      oklch(24.4% 0 0);        /* #202020 text, primary buttons */
  --color-ink-2:    oklch(36.0% 0 0);        /* #3d3d3d secondary text */
  --color-mute:     oklch(50.4% 0.005 78);   /* #666461 body-small (5.4:1 on paper) */
  --color-faint:    oklch(68.3% 0.006 85);   /* #9b9995 decorative only */
  --color-rule:     oklch(24.4% 0 0 / 0.12);
  --color-rule-2:   oklch(24.4% 0 0 / 0.22);
  --color-dark:     oklch(22.7% 0.002 68);   /* #1d1c1b footer + proof panel */
  --color-on-dark:  oklch(96.7% 0.004 91);
  --color-on-dark-mute: oklch(96.7% 0.004 91 / 0.62);
  --color-rule-dark: oklch(100% 0 0 / 0.12);
  --color-paper-glass: oklch(96.7% 0.004 91 / 0.86);
  --color-paper-clear: oklch(96.7% 0.004 91 / 0);
  --color-scrim:      oklch(24.4% 0 0 / 0.4);
  --color-media-fade: oklch(0% 0 0 / 0.55);
  --color-media-clear: oklch(0% 0 0 / 0);
  --color-on-media-dim: oklch(100% 0 0 / 0.4);
  --color-shadow-soft: oklch(0% 0 0 / 0.2);
  --color-orange-halo: oklch(70% 0.197 40 / 0.16);
  --color-dark-raise: oklch(100% 0 0 / 0.04);
  --color-brass-ring: oklch(52.7% 0.086 86 / 0.18);
  --color-field:     oklch(60.5% 0.005 80);   /* #858380 form borders, 3.5:1 on card (WCAG 1.4.11) */
  --color-error:     oklch(35.9% 0.110 26);   /* #6b1e1c bordeaux from the reference palette */
  --color-error-bg:  oklch(95.2% 0.012 35);   /* #f8ece8 */

  /* ---- colour: accents ---- */
  --color-brass:    oklch(52.7% 0.086 86);   /* #816729 emphasis words, labels, CTA (4.9:1 on paper) */
  --color-brass-lt: oklch(74.1% 0.100 86);   /* #c7a75e brass on dark grounds */
  --color-orange:   oklch(70.0% 0.197 40);   /* #ff682c marks only — bullets, dots, glyph. Never text. */
  --color-nude:     oklch(87.9% 0.035 40);   /* #edd0c6 chart fills, soft washes */
  --color-sea-2:    oklch(64.0% 0.130 45);   /* COSMAX family pin (#d97757 family) */
  --color-focus:    oklch(52.7% 0.086 86);

  /* ---- type ---- */
  --font-display: "General Sans", "Pretendard", system-ui, sans-serif;
  --font-body:    "Geist", "Pretendard", system-ui, sans-serif;
  --font-mono:    "DM Mono", ui-monospace, "SFMono-Regular", monospace;
  --font-kr:      "Pretendard", "Geist", system-ui, sans-serif;

  --text-2xs: 0.6875rem;  /* 11 */
  --text-xs:  0.75rem;    /* 12 */
  --text-sm:  0.875rem;   /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-md:  1.0625rem;  /* 17 */
  --text-lg:  1.25rem;    /* 20 */
  --text-xl:  1.5rem;     /* 24 */
  --text-2xl: clamp(1.5rem, 1.1rem + 1.1vw, 2rem);          /* card heads */
  --text-3xl: clamp(1.625rem, 1.15rem + 1.5vw, 2.375rem);   /* panel / sub-section heads */
  --text-h2:  clamp(1.875rem, 1.2rem + 1.8vw, 2.75rem);     /* section heads (ref 32–48px) */
  --text-display: clamp(2.375rem, 1.5rem + 3vw, 4.125rem);  /* hero (ref 66px; 57-char headline → display-s rung) */

  /* ---- space (4-pt) ---- */
  --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem;
  --space-sm: 1rem;     --space-md: 1.5rem;  --space-lg: 2rem;
  --space-xl: 3rem;     --space-2xl: 4.5rem; --space-3xl: 7rem;
  --section-y: clamp(4.5rem, 3rem + 6vw, 8.5rem);
  --pad: clamp(1.25rem, 0.6rem + 3vw, 3.5rem);
  --max: 82.5rem;  /* 1320 */

  /* ---- shape ---- */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-pill: 999px;
  --shadow-float: 0 1px 2px oklch(24.4% 0 0 / 0.06), 0 12px 32px -12px oklch(24.4% 0 0 / 0.18);

  /* ---- motion (reference easings: expo-out, circ-out, sine-in-out) ---- */
  --ease-out:    cubic-bezier(0.19, 1, 0.22, 1);
  --ease-circ:   cubic-bezier(0.075, 0.82, 0.165, 1);
  --ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
  --ease-in:     cubic-bezier(0.55, 0.055, 0.675, 0.19);
  /* soft spring (peaks ~10% over) — hover scale on pills only, never on state changes */
  --ease-spring: linear(0, 0.22, 0.43, 0.62, 0.78, 0.9, 0.99, 1.05, 1.08, 1.1, 1.095, 1.08, 1.06, 1.04, 1.025, 1.012, 1.004, 1);
  --dur-fast: 180ms;
  --dur-base: 420ms;
  --dur-slow: 900ms;
  --dur-reveal: 1100ms;

  --nav-h: 76px;
}