/* ============================================================
   AUDIO PRISM — COLOR TOKENS
   The palette is a beam of white light hitting a prism:
   a deep void background, and the full refracted spectrum
   used as luminous accent. Color is always LIGHT, never paint.
   ============================================================ */
:root {
  /* ---- Void / portal backgrounds (the dark we look through) ---- */
  --void-900: #07070b;   /* deepest — page base */
  --void-800: #0b0b12;   /* primary surface */
  --void-700: #11111b;   /* raised surface */
  --void-600: #181826;   /* card / panel */
  --void-500: #222234;   /* hairline-lit panel */

  /* ---- Refracted spectrum (the light the prism throws) ---- */
  --spectrum-cyan:    #19E6FF;
  --spectrum-blue:    #2D6BFF;
  --spectrum-violet:  #8B5CFF;
  --spectrum-magenta: #FF2EC4;
  --spectrum-pink:    #FF4D8D;
  --spectrum-green:   #38FF9A;
  --spectrum-lime:    #B6FF3C;
  --spectrum-orange:  #FF8A2B;

  /* ---- Neutrals / text (cool white off the void) ---- */
  --fg-1: #F2F4FF;   /* primary text */
  --fg-2: #AEB2C9;   /* secondary text */
  --fg-3: #6E7390;   /* muted / captions */
  --fg-4: #44485E;   /* disabled / faint */

  /* ---- Lines & glass ---- */
  --line-1: rgba(255, 255, 255, 0.08);   /* hairline divider */
  --line-2: rgba(255, 255, 255, 0.14);   /* stronger border */
  --glass-fill:   rgba(18, 19, 32, 0.55); /* frosted card base */
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-hi:     rgba(255, 255, 255, 0.06); /* top inner highlight */

  /* ---- Spectral gradients (the signature refraction) ---- */
  --beam-spectrum: linear-gradient(
    100deg,
    var(--spectrum-cyan)    0%,
    var(--spectrum-blue)    22%,
    var(--spectrum-violet)  42%,
    var(--spectrum-magenta) 62%,
    var(--spectrum-orange)  82%,
    var(--spectrum-lime)   100%
  );
  --beam-cool: linear-gradient(120deg, var(--spectrum-cyan), var(--spectrum-violet));
  --beam-hot:  linear-gradient(120deg, var(--spectrum-magenta), var(--spectrum-orange));
  --beam-bio:  linear-gradient(120deg, var(--spectrum-green), var(--spectrum-cyan));

  /* ---- Semantic feedback ---- */
  --signal-good: var(--spectrum-green);
  --signal-warn: var(--spectrum-orange);
  --signal-bad:  #FF4D5E;
  --signal-info: var(--spectrum-cyan);

  /* ============ Semantic aliases (use these in components) ============ */
  --bg-page:        var(--void-900);
  --bg-surface:     var(--void-800);
  --bg-raised:      var(--void-700);
  --surface-card:   var(--void-600);
  --surface-glass:  var(--glass-fill);

  --text-primary:   var(--fg-1);
  --text-secondary: var(--fg-2);
  --text-muted:     var(--fg-3);
  --text-disabled:  var(--fg-4);
  --text-on-accent: var(--void-900);

  --border-subtle:  var(--line-1);
  --border-strong:  var(--line-2);
  --border-glass:   var(--glass-border);

  --accent-primary:   var(--spectrum-cyan);
  --accent-secondary: var(--spectrum-magenta);
  --focus-ring:       var(--spectrum-cyan);
}