/* Design tokens. Final Cue brand: warm charcoal + amber, from the logo.
   Light (cream/sand) is the :root default; dark (warm charcoal) via prefers-color-scheme or [data-theme=dark]. */
:root {
  --bg: #f7f1e6; --surface: #fffaf0; --surface-2: #efe6d6; --line: #ded3bf; --line-soft: #e9dfcc;
  --text: #2a2622; --text-2: #554d44; --text-3: #6b6154;
  --accent: #cb7a16; --on-accent: #25180a; --accent-text: #8a4a06; --accent-soft: #f6e3c6;
  --accent-hi: color-mix(in srgb, var(--accent) 45%, #fff);
  /* logo greys (arcs above the wordmark), dark to light */
  --g-1: #58585b; --g-2: #797a7d; --g-3: #98999d; --g-4: #bcbec0;
  /* arc colours used by the SVG mark */
  --arc-g1: #58585b; --arc-g2: #797a7d; --arc-g3: #98999d; --arc-g4: #bcbec0;
  --arc-a1: #cc7a16; --arc-a2: #d69040; --arc-a3: #dfa769; --arc-a4: #eac193; --arc-sq: #eed0ad;
  --focus: #1d4ed8; --danger: #b42318; --ok: #1b6e3c;
  /* signature motif: grey to amber */
  --motif: linear-gradient(90deg, var(--g-4), var(--g-2) 35%, var(--accent));
  --rule: linear-gradient(90deg, transparent, var(--g-4) 12%, var(--accent-hi) 55%, var(--accent) 88%, transparent);
  --shadow-1: 0 1px 2px rgba(60,40,15,.08), 0 2px 8px rgba(60,40,15,.06);
  --shadow: 0 1px 2px rgba(60,40,15,.08), 0 6px 14px rgba(60,40,15,.07), 0 18px 40px rgba(60,40,15,.08);
  --glow: none;
  --font-sans: "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", ui-sans-serif, system-ui, -apple-system, Roboto, Arial, sans-serif;
  --font-display: var(--font-sans);
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4.5rem;
  --r-s: 2px; --r-m: 4px; --r-l: 6px;
  --gutter: clamp(1rem, 4vw, 2.5rem); --max: 1320px;
  --player-h: 104px;
  --dur: .18s;
  --arc-op: .5;
  --logo-l: block; --logo-d: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --dark: 1;
    --bg: #1a1714; --surface: #231f1b; --surface-2: #2d2823; --line: #40392f; --line-soft: #332d26;
    --text: #f4efe6; --text-2: #cdc5b8; --text-3: #a59c8d;
    --accent: #e08f22; --on-accent: #1f1306; --accent-text: #eeaa4d; --accent-soft: #3a2a16;
    --g-1: #e9e4da; --g-2: #bdb7ac; --g-3: #948e84; --g-4: #6f6a62;
    --arc-g1: #e9e4da; --arc-g2: #bdb7ac; --arc-g3: #948e84; --arc-g4: #6f6a62;
    --arc-a1: #df8a1c; --arc-a2: #e29d43; --arc-a3: #e8b370; --arc-a4: #efc999; --arc-sq: #f1d6b2;
    --focus: #8ab4ff; --danger: #ff8f84; --ok: #6fd69a;
    --motif: linear-gradient(90deg, var(--g-4), var(--g-3) 35%, var(--accent));
    --shadow-1: 0 1px 2px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.25);
    --shadow: 0 1px 2px rgba(0,0,0,.35), 0 8px 18px rgba(0,0,0,.3), 0 20px 44px rgba(0,0,0,.35);
    --glow: none;
    --arc-op: .6; --logo-l: none; --logo-d: block;
  }
}
:root[data-theme="dark"] {
  --bg: #1a1714; --surface: #231f1b; --surface-2: #2d2823; --line: #40392f; --line-soft: #332d26;
  --text: #f4efe6; --text-2: #cdc5b8; --text-3: #a59c8d;
  --accent: #e08f22; --on-accent: #1f1306; --accent-text: #eeaa4d; --accent-soft: #3a2a16;
  --g-1: #e9e4da; --g-2: #bdb7ac; --g-3: #948e84; --g-4: #6f6a62;
  --arc-g1: #e9e4da; --arc-g2: #bdb7ac; --arc-g3: #948e84; --arc-g4: #6f6a62;
  --arc-a1: #df8a1c; --arc-a2: #e29d43; --arc-a3: #e8b370; --arc-a4: #efc999; --arc-sq: #f1d6b2;
  --focus: #8ab4ff; --danger: #ff8f84; --ok: #6fd69a;
  --motif: linear-gradient(90deg, var(--g-4), var(--g-3) 35%, var(--accent));
  --shadow-1: 0 1px 2px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.25);
  --shadow: 0 1px 2px rgba(0,0,0,.35), 0 8px 18px rgba(0,0,0,.3), 0 20px 44px rgba(0,0,0,.35);
  --glow: none;
  --arc-op: .6; --logo-l: none; --logo-d: block;
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } }