/* AUTO-GENERATED by packages/brand/build.js — do not edit by hand.
   Primitive values come from packages/brand/tokens/*.json; the semantic theme
   + helper classes below come from packages/brand/src/theme.css. Edit those,
   then run `pnpm --filter @couri/brand build`. */

:root {
  --c-ink: #0B0B0C;
  --c-paper: #F6F3EC;
  --c-paper-raised: #FCFAF5;
  --c-flame: #2440D8;
  --c-flame-deep: #1A2FB0;
  --c-muted: #6B6864;
  --c-line: #E6E1D6;
  --c-ink-warm: #16140E;
  --c-surface-dk: #211E16;
  --c-text-dk: #F1EDE2;
  --c-muted-dk: #A7A092;
  --c-line-dk: #2E2A20;
  --c-flame-dk: #5570FF;
  --c-flame-dk-deep: #3E56E8;
  --radius: 2px;
  --radius-lg: 6px;
  --radius-pill: 999px;
  --maxw: 1200px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 150ms;
  --dur: 220ms;
  --dur-slow: 420ms;
  --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-sans: "Instrument Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-accent: "Bebas Neue", "Instrument Sans", Impact, sans-serif;
  --step-0: 1rem;
  --step-1: 1.25rem;
  --step-2: 1.6rem;
  --step-3: 2.2rem;
  --step-4: 3rem;
  --step-5: clamp(3rem, 7vw, 6rem);
  --step-6: clamp(3.4rem, 9vw, 7.4rem);
  --step--1: 0.833rem;
}

/* Couri — semantic theme layer + helper classes (hand-written).
 *
 * Appended by build.js AFTER the generated primitive custom properties (the --c-*
 * palette, --font-*, --step-*, --radius*, motion). These semantic tokens map the
 * primitives to roles and flip with [data-theme]; they reference var(--c-*), which
 * is why they live here and not in tokens/*.json (Style Dictionary owns values, not
 * reference/theme logic). Edit roles here; edit raw values in tokens/. */

/* ---- Semantic theme tokens (LIGHT defaults) ---- */
:root {
  --bg:          var(--c-paper);
  --surface:     var(--c-paper-raised);
  --text:        var(--c-ink);
  --text-muted:  var(--c-muted);
  --line:        var(--c-line);
  --accent:      var(--c-flame);
  --accent-deep: var(--c-flame-deep);
  --on-accent:   #FFFFFF;          /* text on a flame fill */
  --on-flame:    var(--c-paper);   /* light text on the (now dark) accent band */
  --ink-bg:      var(--c-ink);     /* deliberate near-black band background */
  --on-ink:      var(--c-paper);   /* text on an ink band */
}

/* ---- DARK theme ---- */
:root[data-theme="dark"] {
  --bg:          var(--c-ink-warm);
  --surface:     var(--c-surface-dk);
  --text:        var(--c-text-dk);
  --text-muted:  var(--c-muted-dk);
  --line:        var(--c-line-dk);
  --accent:      var(--c-flame-dk);
  --accent-deep: var(--c-flame-dk-deep);
  --on-ink:      var(--c-text-dk);
}

/* Helper classes so a CDN/Tailwind page can lean on the tokens directly. */
.font-display { font-family: var(--font-display); font-weight: 400; }
.font-mono    { font-family: var(--font-mono); }
.font-accent  { font-family: var(--font-accent); }
.kicker {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}