/* ===========================================================================
   theme-tokens.css — v2.1 "Studer A820" identity
   ---------------------------------------------------------------------------
   Modeled on the Studer A820 Master Recorder: brushed-aluminum panel faces,
   charcoal meter bridge, mahogany side rails, tan leather front edge,
   translucent white transport keys, red 7-segment LEDs, amber lamps.
   Light mode = studio lights ON. Dark mode = lights OFF: the aluminum goes
   gunmetal, the legends stay crisp, and every LED and meter glows.
   Loaded BEFORE each app's stylesheet; remaps the legacy --color-* variables
   so existing rules inherit the identity.
   =========================================================================== */

:root {
  /* -- A820 palette --------------------------------------------------------- */
  --mx-wall:        #b9b5ad;   /* studio wall                                 */
  --mx-face:        #d8dadb;   /* brushed aluminum panel                      */
  --mx-face-deep:   #c3c6c8;   /* recessed alu wells                          */
  --mx-bridge:      #3a3d41;   /* charcoal meter bridge / dark modules        */
  --mx-bridge-deep: #2a2d30;
  --mx-ink:         #26282a;   /* legends engraved on aluminum                */
  --mx-ink-soft:    #5d6165;
  --mx-ink-bridge:  #e8e6e1;   /* white legends on charcoal                   */
  --mx-line:        #8f9296;
  --mx-wood:        #8a4f2d;   /* mahogany rails                              */
  --mx-wood-deep:   #5f3319;
  --mx-leather:     #a86a41;   /* tan leather front edge                      */
  --mx-key:         #f1efe9;   /* translucent white transport key             */
  --mx-key-edge:    #b9b6ad;
  --mx-rec-red:     #c22f21;   /* REC legend / record lamp                    */
  --mx-led-red:     #ff2d1e;   /* 7-segment display                          */
  --mx-lamp-amber:  #e6a23a;
  --mx-lamp-green:  #4fae5c;
  --mx-cap-green:   #3f9b4f;   /* small colored button caps (READY/INP/SYNC) */
  --mx-cap-blue:    #3a7bd5;
  --mx-cap-yellow:  #e0c23a;

  /* Aliases kept for the v2.0 layer */
  --mx-red:         var(--mx-rec-red);
  --mx-green:       #4c7f60;
  --mx-brass:       #a2977f;   /* now reads as machined alu-bronze detail     */
  --mx-led-amber:   var(--mx-lamp-amber);
  --mx-vu-face:     #e9d9a6;   /* the amber Studer VU face                    */
  --mx-vu-needle:   #2b2620;

  --mx-knob-cap:    #303234;   /* black machined knob                         */
  --mx-knob-line:   #e8e6e1;
  --mx-knob-skirt:  #c9cccd;   /* alu skirt with engraved scale               */

  /* -- Instrument windows (canvases read these via getComputedStyle) --------
     The waveform is a smoked-glass window like the A820's counter: dark in
     BOTH themes by design — meters and displays are dark on the real machine. */
  --wave-bg:            #2e3134;
  --wave-fill:          rgba(163, 190, 173, 0.35);
  --wave-stroke:        #a3beac;
  --wave-trim-shade:    rgba(0, 0, 0, 0.4);
  --wave-playhead:      #ff4a38;
  --wave-marker:        #e6a23a;
  --wave-marker-fill:   rgba(230, 162, 58, 0.2);
  --wave-gain-line:     rgba(255, 74, 56, 0.75);
  --wave-text:          #e8e6e1;
  --wave-text-bg:       rgba(42, 45, 48, 0.88);
  --wave-grid:          rgba(143, 146, 150, 0.28);

  /* -- Legacy remap ---------------------------------------------------------- */
  --color-background:  var(--mx-wall);
  --color-panel:       var(--mx-face);
  --color-backdrop:    var(--mx-face-deep);
  --color-text:        var(--mx-ink);
  --color-border:      var(--mx-line);
  --color-interactive: var(--mx-green);
  --color-muted:       var(--mx-ink-soft);

  /* -- Shape & hardware ------------------------------------------------------ */
  --radius: 3px;
  --touch-height: 44px;
  --mx-bevel-hi: rgba(255,255,255,0.6);
  --mx-bevel-lo: rgba(38,40,42,0.3);
  --shadow-1: 0 1px 0 var(--mx-bevel-hi) inset, 0 2px 4px rgba(38,40,42,0.25);

  /* Brushed aluminum: fine vertical grain */
  --mx-brush: repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 1px,
      rgba(0,0,0,0.03) 2px,       rgba(0,0,0,0.0) 3px);
  /* Mahogany rail */
  --mx-woodgrain: linear-gradient(180deg,
      color-mix(in srgb, var(--mx-wood) 85%, #fff) 0%,
      var(--mx-wood) 30%,
      var(--mx-wood-deep) 100%);

  /* v2.4: the wood the whole machine mounts to — planks + grain streaks */
  --mx-wood-bg:
      repeating-linear-gradient(90deg,
        rgba(0,0,0,0.18) 0 2px, transparent 2px 240px),
      repeating-linear-gradient(90deg,
        rgba(255,255,255,0.035) 0 3px, rgba(0,0,0,0.045) 3px 7px,
        transparent 7px 11px),
      linear-gradient(180deg,
        color-mix(in srgb, var(--mx-wood) 88%, #fff),
        var(--mx-wood) 35%,
        var(--mx-wood-deep));
}

/* -- Studio lights OFF ------------------------------------------------------ */
body.dark-mode,
html.mixtape-dark,
html.mixtape-dark body {
  --mx-wall:        #141516;
  --mx-face:        #45484c;   /* gunmetal alu                                */
  --mx-face-deep:   #37393c;
  --mx-bridge:      #232528;
  --mx-bridge-deep: #191b1d;
  --mx-ink:         #e8e6e1;
  --mx-ink-soft:    #a7a9ab;
  --mx-ink-bridge:  #e8e6e1;
  --mx-line:        #63666a;
  --mx-wood:        #6e3d20;
  --mx-wood-deep:   #3f2311;
  --mx-leather:     #7f4e2e;
  --mx-key:         #d9d6cd;
  --mx-key-edge:    #8f8c83;
  --mx-rec-red:     #e0483a;
  --mx-led-red:     #ff372a;
  --mx-lamp-amber:  #ffb84f;
  --mx-lamp-green:  #5fc76e;

  --mx-green:       #5f9a76;
  --mx-brass:       #b3a88c;
  --mx-vu-face:     #d9c88f;

  --mx-knob-cap:    #1b1c1e;
  --mx-knob-line:   #e8e6e1;
  --mx-knob-skirt:  #55585c;

  --wave-bg:            #232528;
  --wave-fill:          rgba(163, 190, 173, 0.3);
  --wave-stroke:        #9ab8a4;
  --wave-trim-shade:    rgba(0, 0, 0, 0.5);
  --wave-playhead:      #ff5a48;
  --wave-marker:        #ffb84f;
  --wave-marker-fill:   rgba(255, 184, 79, 0.18);
  --wave-gain-line:     rgba(255, 90, 72, 0.8);
  --wave-text:          #e8e6e1;
  --wave-text-bg:       rgba(25, 27, 29, 0.88);
  --wave-grid:          rgba(99, 102, 106, 0.4);

  --mx-bevel-hi: rgba(255,255,255,0.08);
  --mx-bevel-lo: rgba(0,0,0,0.55);
  --shadow-1: 0 1px 0 var(--mx-bevel-hi) inset, 0 2px 5px rgba(0,0,0,0.55);
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}