/* =============================================================================
   Pixelboop — Color tokens
   Source of truth: pixelboop/web/style.css + web/app.js (NOTE_COLORS, TRACK_COLORS)
   ============================================================================= */

:root {
  /* ---- Surfaces (near-black, layered dark) ---------------------------------- */
  --pb-bg-0: #0a0a0a;   /* page background, deepest                              */
  --pb-bg-1: #111111;   /* sections, raised panels                              */
  --pb-bg-2: #1a1a1a;   /* cards, inputs, idle pixels                           */
  --pb-bg-3: #222222;   /* hover surface / subtle lift                          */

  /* ---- Ink / text ----------------------------------------------------------- */
  --pb-text:        #e0e0e0;  /* primary text on dark                           */
  --pb-text-dim:    #888888;  /* secondary / supporting copy                    */
  --pb-text-muted:  #666666;  /* hints, captions, disabled                      */

  /* ---- Hairlines & borders -------------------------------------------------- */
  --pb-line:        #1a1a1a;            /* default divider (= bg-2)             */
  --pb-line-soft:   rgba(255,255,255,0.05); /* card borders                    */
  --pb-line-strong: #666666;            /* input border (text-muted)           */

  /* ---- Brand accents -------------------------------------------------------- */
  --pb-green: #9acd32;  /* yellow-green — "go", success, primary signal         */
  --pb-teal:  #4ecdc4;  /* focus rings, links                                   */
  --pb-red:   #ff6b6b;  /* errors, alerts                                       */
  --pb-blue:  #45b7d1;  /* secondary accent                                     */
  --pb-yellow:#f7dc6f;  /* secondary accent                                     */
  --pb-amber: #ffc800;  /* gradient mid-stop, highlights                        */

  /* ---- Chromatic note scale (12 semitones, C → B) --------------------------- */
  /* The soul of Pixelboop: pitch maps to hue. Used for every melodic pixel.    */
  --pb-note-0:  #ff0000;  /* C   */
  --pb-note-1:  #ff4500;  /* C#  */
  --pb-note-2:  #ff8c00;  /* D   */
  --pb-note-3:  #ffc800;  /* D#  */
  --pb-note-4:  #ffff00;  /* E   */
  --pb-note-5:  #9acd32;  /* F   */
  --pb-note-6:  #00ff00;  /* F#  */
  --pb-note-7:  #00ffaa;  /* G   */
  --pb-note-8:  #00ffff;  /* G#  */
  --pb-note-9:  #00aaff;  /* A   */
  --pb-note-10: #0055ff;  /* A#  */
  --pb-note-11: #8a2be2;  /* B   */

  /* ---- Track identity colors (spectral gradients) --------------------------- */
  /* Real source: pixelboop/Views/PixelGridUIView.swift (trackGradientBottom/Top).
     Each track is a VERTICAL gradient — bottom = low pitch, top = high pitch.
     The `-lo` / `-hi` endpoints build the gradient; the bare token is the
     midpoint "representative" color (ghost notes, the step-overview strip).    */
  --pb-track-melody-lo: #0d40ff;  /* deep blue        */
  --pb-track-melody-hi: #8c1ae6;  /* purple           */
  --pb-track-melody:    #4d2ef2;  /* blue-purple (mid)*/
  --pb-track-chords-lo: #00f20d;  /* green            */
  --pb-track-chords-hi: #00d9ff;  /* aqua blue        */
  --pb-track-chords:    #00e68c;  /* cyan-green (mid) */
  --pb-track-bass-lo:   #ffd100;  /* golden yellow    */
  --pb-track-bass-hi:   #e6ff00;  /* yellow-green     */
  --pb-track-bass:      #f2e600;  /* yellow (mid)     */
  --pb-track-rhythm-lo: #ff0000;  /* red              */
  --pb-track-rhythm-hi: #ff6100;  /* reddish orange   */
  --pb-track-rhythm:    #ff3000;  /* red-orange (mid) */

  /* gradient fills (0deg = bottom→top, matching the on-screen frequency map) */
  --pb-track-melody-grad: linear-gradient(0deg, #0d40ff, #8c1ae6); /* @kind color */
  --pb-track-chords-grad: linear-gradient(0deg, #00f20d, #00d9ff); /* @kind color */
  --pb-track-bass-grad:   linear-gradient(0deg, #ffd100, #e6ff00); /* @kind color */
  --pb-track-rhythm-grad: linear-gradient(0deg, #ff0000, #ff6100); /* @kind color */

  /* ---- Signature rainbow gradient ------------------------------------------- */
  /* Animated left↔right on every primary CTA. red → amber → green → teal → red */
  --pb-rainbow: linear-gradient(90deg, #ff6b6b, #ffc800, #9acd32, #4ecdc4, #ff6b6b); /* @kind color */
  --pb-rainbow-text: linear-gradient(90deg, #ff6b6b, #ffc800, #9acd32, #4ecdc4); /* @kind color */

  /* ---- Semantic aliases ----------------------------------------------------- */
  --pb-surface-page:   var(--pb-bg-0);
  --pb-surface-section:var(--pb-bg-1);
  --pb-surface-card:   var(--pb-bg-2);
  --pb-on-accent:      var(--pb-bg-0);  /* dark ink sits on bright accents      */
  --pb-success: var(--pb-green);
  --pb-error:   var(--pb-red);
  --pb-focus:   var(--pb-teal);
  --pb-link:    var(--pb-teal);
}