/* ==========================================================================
   DESIGN TOKENS
   The whole visual identity lives here. Change the accent and the entire
   site retunes. Nothing below this file should hardcode a color.
   ========================================================================== */

:root {
  /* ---- Surface ---------------------------------------------------------- */
  --bg:            #030712;
  --bg-deep:       #01040B;
  --surface:       #0B1120;
  --surface-2:     #0F172A;
  --surface-hi:    #16213B;

  /* ---- Line ------------------------------------------------------------- */
  --border:        rgba(56, 189, 248, 0.14);
  --border-strong: rgba(56, 189, 248, 0.34);
  --border-soft:   rgba(148, 163, 184, 0.10);

  /* ---- Accent ----------------------------------------------------------- */
  --accent:        #2563FF;   /* primary electric blue */
  --accent-hot:    #38BDF8;   /* cyan edge / glow */
  --accent-deep:   #1D4ED8;
  --accent-dim:    rgba(37, 99, 255, 0.12);
  --accent-glow:   rgba(56, 189, 248, 0.40);

  /* ---- Text ------------------------------------------------------------- */
  --text:          #FFFFFF;
  --text-2:        #CBD5E1;
  --muted:         #94A3B8;   /* 7.9:1 on --bg — AA for body text */
  --muted-dim:     #6E7E96;   /* 4.9:1 on --bg — still AA at 11px.
                                 Do not darken past this: #64748B is 4.2:1
                                 and fails, and this token is used for real
                                 text (footer, brand status, track numbers). */

  /* ---- Type ------------------------------------------------------------- */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --fs-display: clamp(2.75rem, 9vw, 6rem);
  --fs-h2:      clamp(1.9rem, 4.4vw, 3.25rem);
  --fs-h3:      clamp(1.15rem, 1.9vw, 1.5rem);
  --fs-body:    clamp(0.95rem, 1.1vw, 1.0625rem);
  --fs-micro:   0.6875rem;

  --ls-display: -0.025em;
  --ls-micro:   0.18em;

  /* ---- Space ------------------------------------------------------------ */
  --gap:        1.25rem;
  --pad-section: clamp(4.5rem, 11vw, 9rem);
  --maxw:       1200px;
  --gutter:     clamp(1.25rem, 4vw, 2.5rem);

  /* ---- Shape ------------------------------------------------------------ */
  --r:      14px;
  --r-sm:   8px;
  --r-pill: 999px;

  /* ---- Motion ----------------------------------------------------------- */
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur:       0.6s;
  --dur-fast:  0.22s;

  /* ---- Elevation -------------------------------------------------------- */
  --shadow:     0 18px 50px -20px rgba(0, 0, 0, 0.9);
  --shadow-acc: 0 0 0 1px var(--border-strong), 0 0 34px -8px var(--accent-glow);
}

/* Motion is decorative here — remove it entirely when asked. */
@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0.001s; --dur-fast: 0.001s; }
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
    scroll-behavior: auto !important;
  }
}