/* Hallmark · tokens · Otto's BBQ
 * theme: Midnight (atmospheric cluster)
 * axes — paper: dark (L 13%) · display: display-heavy (Bricolage Grotesque, roman) · accent: warm (ember, hue 45)
 * anchor hue: 40–60 (ember/char). Every neutral carries the anchor's chroma so the greys read warm.
 * Nothing in styles.css may declare a colour or a font-family outside this file.
 */

:root {
  /* ---- Paper & ink -------------------------------------------------
     Dark-mode recipe: paper L 13%, ink L 95%. Elevation goes UP in
     lightness, never down, and never via glow-shadow. */
  --color-paper:      oklch(13% 0.012 40);   /* base canvas — char */
  --color-paper-2:    oklch(17% 0.014 40);   /* raised: cards, bands */
  --color-paper-3:    oklch(22% 0.016 42);   /* hover / highest */
  --color-scrim:      oklch(10% 0.014 38);   /* photo scrims */

  --color-rule:       oklch(30% 0.012 42);   /* decorative hairlines */
  --color-rule-2:     oklch(40% 0.014 45);   /* stronger decorative hairline */
  --color-edge:       oklch(52% 0.016 45);   /* interactive boundaries — 3.6:1 on paper,
                                                3.45:1 on paper-2. Buttons and inputs
                                                use this, never --color-rule*. */

  --color-neutral:    oklch(60% 0.010 45);   /* de-emphasised UI */
  --color-muted:      oklch(76% 0.011 50);   /* secondary prose */
  --color-ink:        oklch(95% 0.008 60);   /* primary text */

  /* ---- Accent ------------------------------------------------------
     One warm hue. Budgeted to ≤3% of any viewport: CTA fill, focus
     ring, link underline, the two canvas blooms. Never a section fill. */
  --color-ember:      oklch(66% 0.175 45);
  --color-ember-2:    oklch(74% 0.150 58);   /* hover / lighter step */
  --color-ember-dim:  oklch(46% 0.120 42);   /* rules, dividers */
  --color-focus:      oklch(80% 0.150 68);

  /* ---- Semantic states --------------------------------------------- */
  --color-error:      oklch(68% 0.170 28);
  --color-success:    oklch(72% 0.110 145);

  /* ---- Type --------------------------------------------------------
     2 + 1. Display + body + one outlier carrying a single role:
     numeric/tabular data (prices, hours, quantities). Nothing else. */
  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, SFMono-Regular, monospace;

  /* Scale — major third (1.25) from a 16px body. */
  --text-xs:   0.64rem;
  --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-4xl:  3.8147rem;
  --text-display:   clamp(2.75rem, 5vw + 1rem, 5.25rem);
  --text-display-s: clamp(2rem, 3.4vw + 1rem, 3.4rem);

  /* ---- Space — 4pt base, named by role ----------------------------- */
  --space-3xs: 0.125rem;
  --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;
  --space-4xl: 9rem;

  --page-gutter: clamp(1.25rem, 5vw, 4.5rem);
  --control-h: 46px;              /* one height for buttons AND inputs (gate 39) */
  --measure: 62ch;

  /* ---- Rules & radii ----------------------------------------------- */
  --rule-hair:  1px;
  --rule-thick: 3px;
  --radius-sm:  2px;
  --radius-md:  4px;
  --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-micro: 120ms;
  --dur-short: 220ms;
  --dur-long:  420ms;

  /* ---- Z scale — six named levels, no freestyling ------------------- */
  --z-base:     1;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-modal:    400;
  --z-toast:    500;
  --z-tooltip:  600;
}