/* Shared design tokens. Owned by lead. */
:root {
  --bg: #0e0d13;
  --bg-deep: #08070b;
  --surface: #18161f;
  --surface-2: #221f2c;
  --line: #3a3647;
  --text: #f4f1ea;
  --text-muted: #c3bfcf;
  --accent: #ff7a4d;      /* hot vinyl orange, 7.1:1 on --bg */
  --accent-2: #45d9c8;    /* booth teal, 10.9:1 on --bg */
  --accent-3: #c9adff;    /* lilac, 9.6:1 on --bg */
  --on-accent: #0e0d13;
  --vinyl: #121116;
  --vinyl-groove: #2a2733;
  --focus-ring: #ffd23f;
  --placeholder-bg: #3d2f00;
  --placeholder-text: #ffe28a;

  --font-display: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-readable: "Atkinson Hyperlegible", Verdana, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;

  --text-scale: 1;
  --radius: 14px;
  --radius-sm: 8px;
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4.5rem; --space-9: 7rem;
  --measure: 68ch;
  --content-max: 72rem;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-fast: 160ms; --dur: 320ms; --dur-slow: 700ms;
  --shadow: 0 10px 30px rgb(0 0 0 / .45);
}

:root[data-contrast="high"] {
  --bg: #000; --bg-deep: #000; --surface: #000; --surface-2: #111;
  --line: #fff; --text: #fff; --text-muted: #fff;
  --accent: #ffd23f; --accent-2: #7df9ff; --accent-3: #ffffff;
  --on-accent: #000; --focus-ring: #7df9ff;
  --vinyl: #000; --vinyl-groove: #555;
}

:root[data-calm="on"] {
  --accent: #e0a48c; --accent-2: #9fd0c9; --accent-3: #cfc3e6;
}
:root[data-calm="on"][data-contrast="high"] { --accent: #ffd23f; --accent-2: #7df9ff; --accent-3: #fff; }

/* ---------- Epic layer: OKLCH, glass, springs ---------- */
:root {
  --track-hue: 40;            /* set per active section by motion.js from data-hue */
  --glass-fill: rgb(255 255 255 / .07);
  --glass-fill-strong: rgb(24 22 31 / .72);   /* use behind body text so contrast holds */
  --glass-border: rgb(255 255 255 / .14);
  --glass-blur: 18px;
  --glass-highlight: inset 0 1px 0 rgb(255 255 255 / .22), inset 0 -1px 0 rgb(0 0 0 / .35);
  --glass-shadow: 0 1px 1px rgb(0 0 0 / .3), 0 12px 40px rgb(0 0 0 / .45);
  /* Spring curves built with CSS linear(). Fallback is --ease-spring. */
  --spring: var(--ease-spring);
  --spring-soft: var(--ease-out);
}
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --spring: linear(0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077 22.4%, 1.121 25.4%, 1.149 28.9%, 1.159 33.1%, 1.143 38.5%, 1.04 52.2%, 1.012 58.7%, 0.993 66.6%, 1.001 85.6%, 1);
    --spring-soft: linear(0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%, 0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001 85%, 1);
  }
}
@supports (color: oklch(0 0 0)) {
  :root {
    /* Same perceptual values as the hex tokens above, expressed in OKLCH. */
    --bg: oklch(0.155 0.014 290);
    --bg-deep: oklch(0.11 0.01 290);
    --surface: oklch(0.205 0.018 290);
    --surface-2: oklch(0.245 0.022 290);
    --accent: oklch(0.73 0.17 42);
    --accent-2: oklch(0.81 0.12 183);
    --accent-3: oklch(0.80 0.11 296);
    /* Ambient tint that follows the active track. Decorative only, never behind text without a solid fill. */
    --tint: oklch(0.35 0.12 var(--track-hue) / .35);
    --tint-strong: oklch(0.6 0.18 var(--track-hue));
  }
  :root[data-contrast="high"] {
    --bg: #000; --bg-deep: #000; --surface: #000; --surface-2: #111;
    --accent: #ffd23f; --accent-2: #7df9ff; --accent-3: #fff;
    --tint: transparent; --tint-strong: #fff;
  }
  :root[data-calm="on"] { --tint: oklch(0.3 0.03 var(--track-hue) / .25); }
}
:root[data-contrast="high"] {
  --glass-fill: #000; --glass-fill-strong: #000; --glass-border: #fff; --glass-blur: 0px;
  --glass-highlight: none; --glass-shadow: none;
}