/* Design tokens — colors, spacing, radius, type, motion */

:root {
  /* Color — Eclipse dark + warm ember palette */
  --bg: #070605;
  --bg2: #110e0c;
  --bg3: #1b1613;
  --surface: #1a1412;
  --ink: #f2e9dd;
  --text: var(--ink);
  /* ≥4.5:1 on --bg #070605 for muted body text (a11y) */
  --mute: #c4b8a8;
  --line: #2b241e;
  --hot: #ff6a13;
  --gold: #ffb347;
  --on: #1a0a02;
  --glass: rgba(7, 6, 5, 0.86);
  --warn: #ffb020;
  --danger: #ff4d3a;
  /* Warm success (not lime / not purple) — readable gold-amber */
  --ok: #d4b06a;
  --ok-strong: #e8c070;
  --grad: linear-gradient(110deg, var(--hot), var(--gold));

  /*
   * Feature accents — same family, distinct enough to cue Song vs Sync vs Film.
   * Calm, premium: used for active tabs, eyebrows, and primary actions — not rainbow chrome.
   */
  --feat-projects: #e8a54a; /* amber — library */
  --feat-song: #ff6a13;     /* brand hot — prepare / Song */
  --feat-sync: #ff7a3d;     /* brighter ember — Tap / sync action */
  --feat-film: #e23d2e;     /* deep ember — Film / cinema */
  --feat-export: #ffb347;   /* gold — Export (More) */
  --grad-sync: linear-gradient(110deg, #ff5a18, var(--gold));
  --grad-film: linear-gradient(110deg, #e23d2e, #ff8a4a);

  /* Active feature (set via body[data-screen] or defaults to brand) */
  --feat: var(--hot);

  /* Type */
  --sans: "Outfit", "Noto Sans", system-ui, sans-serif;
  --lyric: "Noto Sans", "Noto Sans Tifinagh", "Outfit", system-ui, sans-serif;
  /* laousmail.com pairing: serif for the voice (titles), mono for labels + timecodes */
  --serif: "Cormorant Garamond", Georgia, "Noto Serif", serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.35rem;
  --fs-2xl: 1.75rem;
  --lh-tight: 1.2;
  --lh-body: 1.45;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --gutter: var(--space-4);
  --gap-safe: 0.85rem;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius: 16px;
  --radius-lg: 20px;
  --radius-pill: 99px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 120ms;
  --dur: 180ms;
  --dur-slow: 280ms;

  /* Layout chrome */
  --topbar-h: 3.5rem;
  --tabbar-h: 4.25rem;
  --dock-h: 5.35rem;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --kb-inset: 0px; /* visualViewport keyboard inset — set by js/keyboard.js */
  --touch: 2.85rem; /* ≥ 44px */
  --touch-lg: 3.25rem;

  color-scheme: dark;
}

body[data-screen="projects"] { --feat: var(--feat-projects); }
body[data-screen="prepare"] { --feat: var(--feat-song); }
body[data-screen="sync"] { --feat: var(--feat-sync); }
body[data-screen="video"] { --feat: var(--feat-film); }
body[data-screen="export"] { --feat: var(--feat-export); }
body[data-screen="help"] { --feat: var(--gold); }

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