/* DOQI design tokens — dark is the default theme, light is opt-in via [data-theme="light"] */
:root {
  /* colour */
  --bg: #0b0b0a;
  --bg-elev: #121211;
  --surface: #161615;
  --surface-2: #1f1f1d;
  --line: #2e2d2a;
  --line-strong: #4a4843;
  --ink: #f3f0ea;
  --ink-2: #c4c0b8;
  --muted: #8f8b83;            /* 5.6:1 on --bg */
  --accent: #ff5a1f;           /* signal orange */
  --accent-ink: #0b0b0a;       /* text on accent, 6.9:1 */
  --accent-text: #ff7a47;      /* orange used as small text on --bg */
  --cobalt: #2b37ff;
  --cobalt-ink: #ffffff;
  --frame: #f3f0ea;            /* thick "device" borders on feature panels */
  --overlay: rgb(5 5 5 / 0.92);
  --shadow: 0 30px 60px -30px rgb(0 0 0 / 0.8);
  --metal: conic-gradient(from 0deg, #8d8d8d, #f4f4f4, #6f6f6f, #e6e6e6, #7d7d7d, #fafafa, #8d8d8d);

  /* type */
  --font-sans: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --fs-xs: 0.72rem;
  --fs-sm: 0.84rem;
  --fs-md: 1rem;
  --fs-lg: 1.25rem;
  --fs-xl: clamp(1.6rem, 1.1rem + 2vw, 2.4rem);
  --fs-2xl: clamp(2.2rem, 1.2rem + 4.4vw, 4.6rem);
  --fs-mega: clamp(5.5rem, 1rem + 27vw, 27rem);

  /* spacing scale (4px base) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  --r-1: 6px;
  --r-2: 14px;
  --r-3: 22px;
  --r-pill: 999px;
  --border: 2px;

  --gutter: clamp(16px, 2.2vw, 48px);
  --maxw: none; /* fluid: the layout uses the whole screen width */
  --header-h: 64px;
  --player-h: 0px;

  --ease: cubic-bezier(.2, .7, .1, 1);
  --t-fast: 140ms;
  --t-med: 280ms;

  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg: #efede8;
  --bg-elev: #f6f5f1;
  --surface: #ffffff;
  --surface-2: #e5e2db;
  --line: #d3cfc6;
  --line-strong: #1a1a19;
  --ink: #111110;
  --ink-2: #3b3935;
  --muted: #625e57;            /* 5.4:1 on --bg */
  --accent: #ff5a1f;
  --accent-ink: #111110;
  --accent-text: #b83800;      /* 5.3:1 on --bg */
  --frame: #111110;
  --overlay: rgb(239 237 232 / 0.96);
  --shadow: 0 30px 60px -34px rgb(40 30 20 / 0.45);
  color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-med: 0ms; }
}