/* MotionSteer design tokens — v2 (graded-film re-skin; superset of v1, non-breaking).
   All v1 var names are preserved (retuned); new semantic/motion/spacing tiers added.
   Signature shift: cool teal+magenta -> warm "film amber" + steel; neon glow -> soft ring. */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@300;400;500;600&family=Instrument+Serif:ital@0;1&display=swap');

:root,
[data-theme="dark"] {
  /* Surfaces — graded near-black, faint WARM cast (was cool blue) */
  --bg-0: #0a0a0c;
  --bg-1: #111013;
  --bg-2: #18161b;
  --bg-3: #221f26;
  --bg-4: #2c2830;

  /* Hairline lines — warm-tinted */
  --line: rgba(255, 250, 244, 0.06);
  --line-2: rgba(255, 250, 244, 0.11);
  --line-3: rgba(255, 250, 244, 0.20);

  /* Ink — warm paper-white, widened steps */
  --ink-0: #f6f3ee;
  --ink-1: #d3cdc4;
  --ink-2: #938c84;
  --ink-3: #5d574f;
  --ink-4: #3a352f;

  /* ONE ownable accent: film/tape amber (record light, waveform peak). AA-tuned. */
  --accent: #f2a259;
  --accent-hover: #ffb673;
  --accent-active: #d9852f;
  --accent-ink: #1a1206;           /* text/icon on an accent fill */
  --accent-soft: rgba(242, 162, 89, 0.13);
  --signal: var(--accent);
  /* de-glowed: soft ring instead of 24px neon (kept valid for existing box-shadow usage) */
  --accent-glow: 0 0 0 1px var(--accent-soft);
  /* desaturated cool counterpoint (grade shadow) — NOT neon cyan */
  --steel: #7fa7b8;
  --steel-soft: rgba(127, 167, 184, 0.12);

  /* Demoted accents — data/categorical + back-compat (never brand) */
  --magenta: #e25c8a;
  --magenta-soft: rgba(226, 92, 138, 0.14);
  --amber: #f2b65c;
  --amber-soft: rgba(242, 182, 92, 0.14);
  --violet: #b79bff;
  --violet-soft: rgba(183, 155, 255, 0.14);
  --data-1: var(--accent);
  --data-2: #7aa2ff;
  --data-3: #c77dff;
  --data-4: #48d6a8;
  --data-5: #ffd166;
  --data-6: #ff6b9a;

  /* Status */
  --ok: #6fcf8e;
  --warn: #f2b65c;
  --danger: #e06464;
  --ok-soft: rgba(111, 207, 142, 0.14);
  --warn-soft: rgba(242, 182, 92, 0.14);
  --danger-soft: rgba(224, 100, 100, 0.14);

  /* Type families (serif italic = the one human gesture) */
  --font-sans: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; /* swap-point for a directorial cut */
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --font-serif: "Instrument Serif", ui-serif, Georgia, serif;

  /* Modular type scale */
  --fs-display: clamp(44px, 7.5vw, 96px);
  --lh-display: 0.98;
  --tr-display: -0.035em;
  --wt-display: 640;
  --fs-h1: clamp(30px, 4.2vw, 48px);
  --lh-h1: 1.08;
  --tr-h1: -0.02em;
  --fs-h2: clamp(22px, 2.6vw, 32px);
  --lh-h2: 1.14;
  --tr-h2: -0.015em;
  --fs-h3: 18px;
  --lh-h3: 1.25;
  --fs-base: 13.5px;
  --lh-base: 1.55;
  --fs-sm: 12px;
  --fs-xs: 10.5px;
  --tr-mono: 0.11em;             /* softened from 0.16 */

  /* Density + named radii */
  --pad-y: 9px;
  --pad-x: 12px;
  --row-h: 36px;
  --gap: 14px;
  --radius: 8px;
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* Absolute 4px spacing (density-independent layout) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 40px;

  /* Semantic role tier — new components should consume THESE */
  --surface: var(--bg-0);
  --surface-raised: var(--bg-1);
  --surface-sunken: var(--bg-2);
  --surface-overlay: var(--bg-3);
  --text-primary: var(--ink-0);
  --text-secondary: var(--ink-1);
  --text-tertiary: var(--ink-2);
  --text-disabled: var(--ink-3);
  --border-subtle: var(--line);
  --border-default: var(--line-2);
  --border-strong: var(--line-3);

  /* Elevation = layered lightness + crisp low-spread shadow. NO neon glow. */
  --elev-0: 0 0 0 1px var(--border-subtle);
  --elev-1: inset 0 0 0 1px var(--border-subtle), 0 2px 6px -2px rgba(0, 0, 0, 0.5);
  --elev-2: inset 0 0 0 1px var(--border-subtle), 0 12px 28px -14px rgba(0, 0, 0, 0.65);
  --elev-3: inset 0 0 0 1px var(--border-default), 0 28px 60px -22px rgba(0, 0, 0, 0.75);
  --shadow-lift: var(--elev-1);
  --shadow-pop: var(--elev-3);
  --focus-ring: 0 0 0 1px var(--accent), 0 0 0 3px var(--accent-soft);

  /* Motion */
  --dur-instant: 90ms;
  --dur-fast: 140ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --dur-stage: 520ms;
  --stagger: 24ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-signature: cubic-bezier(0.34, 1.4, 0.5, 1);
  --ease-linear: linear;
  --steer-ease: var(--ease-out);

  /* Audio-reactive bus (transport region only; JS lerps --beat 0..1) */
  --beat: 0;
  --beat-gain: 1;
  --ambient: transparent;
}

[data-density="compact"] {
  --pad-y: 6px;
  --pad-x: 10px;
  --row-h: 30px;
  --gap: 10px;
  --fs-base: 12.5px;
  --fs-sm: 11px;
  --fs-xs: 10px;
}
[data-density="spacious"] {
  --pad-y: 13px;
  --pad-x: 16px;
  --row-h: 44px;
  --gap: 20px;
  --fs-base: 14.5px;
  --fs-sm: 13px;
  --fs-xs: 11.5px;
}

[data-theme="light"] {            /* warm paper; accent darkened to pass AA on paper */
  --bg-0: #f6f5f2;
  --bg-1: #ffffff;
  --bg-2: #f0eee9;
  --bg-3: #e7e4dd;
  --bg-4: #dcd8cf;
  --line: rgba(20, 18, 12, 0.08);
  --line-2: rgba(20, 18, 12, 0.14);
  --line-3: rgba(20, 18, 12, 0.22);
  --ink-0: #0c0d11;
  --ink-1: #2f3441;
  --ink-2: #5a6173;
  --ink-3: #8a90a0;
  --ink-4: #b6bbc6;
  --accent: #c2611f;
  --accent-hover: #a8520f;
  --accent-active: #8f450c;
  --accent-ink: #ffffff;
  --accent-soft: rgba(194, 97, 31, 0.12);
  --accent-glow: 0 0 0 1px rgba(194, 97, 31, 0.2);
  --steel: #4d7689;
  --magenta: #bc2f6e;
  --violet: #7a5cf0;
  --amber: #b8791f;
  --shadow-lift: inset 0 0 0 1px var(--border-subtle), 0 2px 6px -2px rgba(20, 18, 12, 0.12);
  --elev-1: inset 0 0 0 1px var(--border-subtle), 0 2px 6px -2px rgba(20, 18, 12, 0.12);
  --elev-2: inset 0 0 0 1px var(--border-subtle), 0 12px 28px -14px rgba(20, 18, 12, 0.16);
  --elev-3: inset 0 0 0 1px var(--border-default), 0 28px 60px -22px rgba(20, 18, 12, 0.2);
}

[data-theme="contrast"] {         /* AAA-leaning, true black, brighter accent */
  --bg-0: #000000;
  --bg-1: #060606;
  --bg-2: #0d0d0d;
  --bg-3: #161616;
  --bg-4: #1f1f1f;
  --line: rgba(255, 255, 255, 0.14);
  --line-2: rgba(255, 255, 255, 0.24);
  --line-3: rgba(255, 255, 255, 0.4);
  --ink-0: #ffffff;
  --ink-1: #e8e8e8;
  --ink-2: #b7bfd0;
  --ink-3: #8a93a6;
  --accent: #ffb04f;
  --accent-ink: #120a02;
  --accent-soft: rgba(255, 176, 79, 0.2);
  --accent-glow: 0 0 0 1px rgba(255, 176, 79, 0.3);
  --magenta: #ff5fa0;
  --violet: #c9b3ff;
  --amber: #ffc06a;
}

/* Reduced motion = token remap, not a teardown */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-base: 1ms;
    --dur-slow: 1ms;
    --dur-stage: 1ms;
    --stagger: 0ms;
    --beat-gain: 0;
    --ease-signature: var(--ease-standard);
  }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: var(--dur-instant) !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- global resets ---------- */
* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-0);
  color: var(--ink-0);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-feature-settings: "ss01", "ss02", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.45;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

::selection {
  background: var(--accent);
  color: var(--accent-ink);
}

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 8px; border: 2px solid var(--bg-0); }
::-webkit-scrollbar-thumb:hover { background: var(--bg-4); }