/* Hallmark · tokens · theme: custom (vibe: "walnut, warm stone, brass, workshop light")
 * axes: dark-light alternating / geometric-sans / warm
 */
@font-face { font-family: "Cabinet Grotesk"; src: url("/fonts/cabinet-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Cabinet Grotesk"; src: url("/fonts/cabinet-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("/fonts/switzer-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("/fonts/switzer-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
/* metric-matched fallbacks to limit CLS while webfonts load */
@font-face { font-family: "Cabinet Fallback"; src: local("Arial"); size-adjust: 96%; ascent-override: 98%; descent-override: 26%; line-gap-override: 0%; }
@font-face { font-family: "Switzer Fallback"; src: local("Arial"); size-adjust: 97%; ascent-override: 96%; descent-override: 24%; line-gap-override: 0%; }

:root {
  /* light surfaces — warm stone */
  --color-stone:       oklch(95% 0.012 75);
  --color-stone-2:     oklch(90.5% 0.018 70);
  --color-line:        oklch(84% 0.016 68);
  --color-ink:         oklch(21% 0.022 45);
  --color-ink-soft:    oklch(42% 0.022 50);
  /* dark surfaces — walnut */
  --color-walnut:      oklch(21% 0.024 45);
  --color-walnut-2:    oklch(26.5% 0.028 45);
  --color-line-dark:   oklch(36% 0.026 48);
  --color-cream:       oklch(95% 0.014 80);
  --color-cream-soft:  oklch(80% 0.022 75);
  /* accent — brass (on dark), deep brass (on light) */
  --color-brass:       oklch(76% 0.115 75);
  --color-brass-deep:  oklch(49% 0.100 58);
  --color-focus:       oklch(76% 0.115 75);
  --color-focus-light: oklch(49% 0.100 58);
  /* utility */
  --color-todo:        oklch(90% 0.090 95);
  --color-todo-rule:   oklch(62% 0.120 85);
  --color-scrim:       oklch(15% 0.02 45 / 0.88);
  --color-scrim-0:     oklch(15% 0.02 45 / 0);

  /* type */
  --font-display: "Cabinet Grotesk", "Cabinet Fallback", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Switzer", "Switzer Fallback", ui-sans-serif, system-ui, sans-serif;

  --text-xs:   0.8rem;
  --text-sm:   0.9rem;
  --text-base: 1.0625rem;
  --text-md:   1.25rem;
  --text-lg:   1.5rem;
  --text-xl:   clamp(1.6rem, 1.2vw + 1.2rem, 2.1rem);
  --text-2xl:  clamp(2rem, 2.6vw + 1rem, 3.25rem);
  --text-display:   clamp(2.6rem, 5vw + 1rem, 5.25rem);
  --text-display-s: clamp(2.3rem, 3.6vw + 1rem, 4.25rem);

  /* space — 4pt scale */
  --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;
  --space-4xl: 9rem;
  --page-gutter: clamp(1.25rem, 4vw, 3.5rem);
  --page-max: 82rem;
  --measure: 64ch;

  /* shape */
  --rule-hair: 1px;
  --rule-thick: 2px;
  --radius-img: 4px;
  --radius-card: 6px;
  --radius-pill: 999px;

  /* motion */
  --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);
  --dur-short: 180ms;
  --dur-med:   320ms;
  --dur-long:  900ms;

  /* z scale */
  --z-base: 0;
  --z-nav: 20;
  --z-overlay: 40;
}