/* ══════════════════════════════════════════════════════════════
   WEIRDMAKER v2 DESIGN TOKENS — Modular Hardware Aesthetic
   Single source of truth. Import in EVERY page via base-v2.html.
   All tokens prefixed --hw-* to coexist with v1 during migration.
══════════════════════════════════════════════════════════════ */

:root {

  /* ── Backgrounds ── */
  --hw-bg:              #0d0d0f;       /* near-black, slightly warm        */
  --hw-bg-raised:       #161618;       /* panel surface                    */
  --hw-bg-inset:        #0a0a0c;       /* recessed areas, rack rails       */
  --hw-bg-panel:        #1c1c20;       /* module panel base                */
  --hw-bg-overlay:      rgba(10,10,12,0.85); /* modal/drawer backdrops    */

  /* ── Metals ── */
  --hw-metal-dark:      #2a2a2e;       /* anodized aluminum                */
  --hw-metal:           #3d3d42;       /* brushed aluminum                 */
  --hw-metal-light:     #5a5a60;       /* highlighted edge                 */
  --hw-metal-bright:    #8a8a90;       /* specular highlight               */

  /* ── Text (silk-screen) ── */
  --hw-text:            #c8c8cc;       /* primary, off-white               */
  --hw-text-dim:        #707075;       /* secondary labels                 */
  --hw-text-faint:      #45454a;       /* background markings              */
  --hw-text-engrave:    #1a1a1e;       /* debossed (darker than surface)   */

  /* ── LED Indicators (only saturated colors on the platform) ── */
  --led-active:         #44ff88;       /* green  — OK, connected, playing  */
  --led-warn:           #ffaa33;       /* amber  — loading, processing     */
  --led-alert:          #ff4444;       /* red    — error, blocked          */
  --led-signal:         #4488ff;       /* blue   — AI thinking, data flow  */
  --led-glow:           8px;           /* bloom radius for LED effects     */

  /* ── LED Dim Variants (backgrounds, subtle indicators) ── */
  --led-active-dim:     rgba(68,255,136,0.10);
  --led-warn-dim:       rgba(255,170,51,0.10);
  --led-alert-dim:      rgba(255,68,68,0.10);
  --led-signal-dim:     rgba(68,136,255,0.10);

  /* ── Interactive Accent (links, focus rings, interactive elements) ── */
  --hw-accent:          #b48aff;       /* kept for brand continuity        */
  --hw-accent-dim:      rgba(180,138,255,0.08);

  /* ── Typography ── */
  --hw-font-brand:      'Barlow Condensed', 'Arial Narrow', sans-serif;
  --hw-font-body:       'Barlow', 'Inter', system-ui, sans-serif;
  --hw-font-mono:       'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
  --hw-font-label:      'Oswald', 'Bebas Neue', sans-serif;
  --hw-font-terminal:   'VT323', monospace;  /* legacy — terminal contexts only */

  /* ── Letter Spacing (silk-screen tracking) ── */
  --hw-tracking-tight:  0.02em;        /* body text                        */
  --hw-tracking-normal: 0.06em;        /* UI labels                        */
  --hw-tracking-wide:   0.12em;        /* silk-screen panel text            */
  --hw-tracking-ultra:  0.25em;        /* large panel labels, HP numbers   */

  /* ── Eurorack Reference ── */
  --hw-hp-px:           5.08;          /* 1 HP = 5.08mm (Eurorack standard)*/
  --hw-panel-h:         128.5;         /* standard panel height in mm      */

  /* ── Layout ── */
  --hw-nav-height:      56px;          /* slightly more compact than v1    */
  --hw-content-max:     1200px;
  --hw-content-narrow:  800px;

  /* ── Borders ── */
  --hw-border:          1px solid #2a2a2e;
  --hw-border-groove:   1px solid #1a1a1e;  /* inset groove, panel mount   */
  --hw-border-focus:    1px solid var(--hw-accent);

  /* ── Radii (hardware = sharp) ── */
  --hw-radius-none:     0;             /* panels, rack rails               */
  --hw-radius-sm:       2px;           /* small UI elements                */
  --hw-radius-md:       4px;           /* buttons, inputs                  */
  --hw-radius-round:    50%;           /* jacks, LEDs, knobs               */

  /* ── Shadows ── */
  --hw-shadow-raised:   0 1px 3px rgba(0,0,0,0.5),
                        0 0 1px rgba(255,255,255,0.03);
  --hw-shadow-inset:    inset 0 1px 3px rgba(0,0,0,0.4);
  --hw-shadow-panel:    0 2px 8px rgba(0,0,0,0.4),
                        0 0 1px rgba(255,255,255,0.02);
  --hw-shadow-deep:     0 4px 16px rgba(0,0,0,0.6),
                        0 0 1px rgba(255,255,255,0.02);

  /* ── Transitions ── */
  --hw-ease:            cubic-bezier(0.4, 0, 0.2, 1);
  --hw-duration:        0.2s;
  --hw-duration-slow:   0.4s;
  --hw-duration-reveal: 0.8s;         /* manifestation sequences           */

  /* ── Z-Index Scale ── */
  --hw-z-base:          1;
  --hw-z-shelf:         100;
  --hw-z-nav:           200;
  --hw-z-drawer:        300;
  --hw-z-modal:         400;
  --hw-z-toast:         500;
}