/* Hallmark · macrostructure: Bento Grid · H2 hero knobs: ratio=7/5, right=css-board-art, divider=negative-space · F1 bento knobs: tiles=7, spans=irregular, border=hairline-all
 * theme: custom · vibe: "warm wood table, crown gold, friendly bout" · paper: oklch(94.4% 0.016 86) · accent: oklch(84.3% 0.168 84)
 * display: Bricolage Grotesque · body: Geist · axes: light / geometric-sans / warm
 * genre: playful · nav: N7 · footer: Ft8 · enrichment: Tier-A CSS board art
 * studied: no · context: inferred · brand palette preserved from app/lib/theme/themes.dart
 * pre-emit critique: P4 H4 E4 S4 R4 V5 · contrast: pass (40–41) · slop: pass (42–45)
 * honest: pass (46) · chrome: pass (47) · tokens: pass (48) · responsive: pass (49) · icons: pass (30)
 * mobile: pass (34, 49, 50–57)
 */

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/bricolage-grotesque-latin-var.woff2") format("woff2");
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/geist-latin-var.woff2") format("woff2");
}

:root {
  /* Brand palette, OKLCH-converted from app/lib/theme/themes.dart */
  --color-paper: oklch(94.4% 0.016 86);      /* cream #F1ECE1 — page surface */
  --color-paper-2: oklch(97% 0.012 86);      /* raised card on cream */
  --color-board: oklch(80.6% 0.024 78);      /* tan #C8BEAF — brand band, the game table */
  --color-board-2: oklch(74.5% 0.024 78);    /* bezel #B5AB9C — hairlines on cream */
  --color-ink: oklch(34.5% 0.012 62);        /* umber #3E3833 — text, board fill */
  --color-ink-deep: oklch(30.5% 0.011 67);   /* grid #332E29 — display headings, slab borders */
  --color-muted: oklch(40.6% 0.016 71);      /* #4F4840 — secondary text (7.6:1 on paper) */
  --color-accent: oklch(84.3% 0.168 84);     /* crown gold #FFC01D — CTA fill, marks */
  --color-accent-deep: oklch(73.9% 0.157 70);/* gold shade #E8960F — hover, underlines */
  --color-accent-hi: oklch(91% 0.12 88);     /* gold top-light — wordmark block bevel only */
  --color-green: oklch(64.7% 0.154 145);     /* piece green #46A64F — marks only, never text */
  --color-green-hi: oklch(74% 0.14 143);     /* piece top-light — board art bevel only */
  --color-green-deep: oklch(52.4% 0.133 145);/* piece shadow #2E7D34 — marks only */
  --color-red: oklch(62.2% 0.187 24);        /* clock red #E14B4B — board art only */
  --color-focus: oklch(34.5% 0.012 62);      /* ink ring: 9.8:1 on paper, instant */

  --font-display: "Bricolage Grotesque", "Avenir Next", "Trebuchet MS", sans-serif;
  --font-body: "Geist", "Helvetica Neue", Arial, sans-serif;

  /* 1.25 scale from 16px */
  --text-sm: 0.8rem;
  --text-base: 1rem;
  --text-md: 1.25rem;
  --text-lg: 1.5625rem;
  --text-xl: 1.9531rem;
  --text-2xl: 2.4414rem;
  --text-3xl: 3.0518rem;
  --text-display: clamp(2.5rem, 4.5vw + 1rem, 4.75rem);

  --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: 6rem;

  --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-micro: 120ms;
  --dur-short: 220ms;
  --dur-long: 420ms;

  --radius-card: 10px;
  --radius-chip: 8px;
  --rule-slab: 3px;
  --page-gutter: clamp(1rem, 4vw, 2.5rem);
  --z-sticky: 200;
}