/* theme.css — MusicCat design tokens: THE SWAPPABLE THEME LAYER.
   Loaded before base.css + every component CSS file (see base.html).
   Drop in a different copy of this file, or edit these values, to re-skin
   the whole app — every component references these tokens; none hardcode
   hex/px/recipe. Current theme: Garuda Glass v2 (g-vrg icon gradient). */

  :root {
    --bg: #0d0d0f;
    --bg2: #141418;
    --bg3: #1c1c22;
    --bg4: #242430;
    --border: #2a2a38;
    --accent: #7c5cfc;
    --accent2: #fc5c7d;
    --accent3: #5cf8c8;
    --text: #e8e8f0;
    --text2: #8888a8;
    --text3: #555570;
    --card-hover: #1e1e2a;
    --radius: 10px;
    --shadow: 0 4px 24px rgba(0,0,0,0.4);
    --scrollbar-rest: #2e2842;       /* dark purple at rest — inherits from --border family */
    --scrollbar-hover: var(--accent);
    --scrollbar-thumb-dot: var(--text);
    --daw-ableton-bg: #0c2a28; --daw-ableton-fg: #77fcf3;
    --daw-cubase-bg: #1a3a6e; --daw-cubase-fg: #8ec8ff;
    --daw-bitwig-bg: #3a1a1a; --daw-bitwig-fg: #ff8c6a;
    --daw-mpc-bg: #8b1a1a; --daw-mpc-fg: #ffffff;
    --daw-dawproject-bg: #251540; --daw-dawproject-fg: #a78bfa;
    --daw-reaper-bg: #1a2a0e; --daw-reaper-fg: #a3e635;
    --daw-fl_studio-bg: #2a1a00; --daw-fl_studio-fg: #ff9944;
    --daw-garageband-bg: #1f1a00; --daw-garageband-fg: #f0c040;
    --daw-logic-bg: #0f1520; --daw-logic-fg: #c0d8ff;

    /* ── Phase 0: spacing scale ── */
    --sp-0: 0;
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-7: 28px;
    --sp-8: 32px;
    --sp-9: 40px;

    /* ── Phase 0: radius scale (--r-4 = --radius for legacy compat) ── */
    --r-1: 4px;
    --r-2: 6px;
    --r-3: 8px;
    --r-4: 10px;
    --r-5: 16px;
    --r-pill: 999px;

    /* ── Phase 0: elevation scale (--elev-2 = --shadow for legacy compat) ── */
    --elev-1: 0 1px 2px rgba(0,0,0,0.3);
    --elev-2: 0 4px 24px rgba(0,0,0,0.4);
    --elev-3: 0 8px 24px rgba(0,0,0,0.25);
    --elev-4: 0 24px 80px rgba(0,0,0,0.6);

    /* ── Phase 0: type scale ── */
    --t-hero: 48px;
    --t-hero-w: 800;
    --t-hero-lh: 1.1;
    --t-section: 28px;
    --t-section-w: 700;
    --t-section-lh: 1.2;
    --t-feature: 22px;
    --t-feature-w: 700;
    --t-modal: 20px;
    --t-modal-w: 800;
    --t-stat: 20px;
    --t-stat-w: 800;
    --t-card: 16px;
    --t-card-w: 700;
    --t-meta-v: 15px;
    --t-meta-v-w: 700;
    --t-body: 14px;
    --t-body-lh: 1.6;
    --t-sec: 13px;
    --t-sec-lh: 1.55;
    --t-micro: 12px;
    --t-micro-lh: 1.5;
    --t-tiny: 11px;
    --t-eyebrow: 10px;
    --t-eyebrow-w: 700;
    --t-eyebrow-trk: 1px;

    /* ── Phase 0: glass surface tokens ── */
    --glass-bg: rgba(20,20,24,0.72);
    --glass-bg-2: rgba(28,28,34,0.78);
    --glass-border: rgba(255,255,255,0.08);
    --glass-edge: rgba(255,255,255,0.12);
    --glass-blur: 14px;
    --glass-blur-sm: 10px;

    /* ── Phase 0: neon glow tokens ── */
    --glow-accent: 0 0 12px rgba(124,92,252,0.45);
    --glow-accent2: 0 0 12px rgba(252,92,125,0.45);
    --glow-accent3: 0 0 12px rgba(92,248,200,0.45);
    --glow-dot: 0 0 4px currentColor;
    --glow-daw-ableton: 0 0 12px rgba(119,252,243,0.40);
    --glow-daw-cubase: 0 0 12px rgba(142,200,255,0.40);
    --glow-daw-bitwig: 0 0 12px rgba(255,140,106,0.40);
    --glow-daw-mpc: 0 0 12px rgba(255,255,255,0.35);
    --glow-daw-dawproject: 0 0 12px rgba(167,139,250,0.40);
    --glow-daw-reaper: 0 0 12px rgba(163,230,53,0.40);
    --glow-daw-fl_studio: 0 0 12px rgba(255,153,68,0.40);
    --glow-daw-garageband: 0 0 12px rgba(240,192,64,0.40);
    --glow-daw-logic: 0 0 12px rgba(192,216,255,0.40);

    /* ── Phase 0: gradient accents ── */
    --grad-accent: linear-gradient(135deg, var(--accent), var(--accent2));
    --grad-accent-r: linear-gradient(135deg, var(--accent2), var(--accent));

    /* ── Phase 0: ambient nebula ── */
    --nebula: radial-gradient(ellipse 70% 50% at 20% 10%, rgba(124,92,252,0.10) 0%, transparent 60%),
              radial-gradient(ellipse 60% 50% at 80% 15%, rgba(252,92,125,0.07) 0%, transparent 55%),
              radial-gradient(ellipse 80% 40% at 50% 100%, rgba(92,248,200,0.05) 0%, transparent 65%),
              var(--bg);

    /* ── Phase 0: motion tokens ── */
    --dur-fast: 100ms;
    --dur: 150ms;
    --dur-slow: 180ms;
    --ease: ease;

    /* ── Phase 0: danger + action-semantic tokens ── */
    --danger: #e05555;
    --act-add-fg: #5cf8c8;
    --act-add-border: rgba(92,248,200,0.45);
    --act-add-bg: rgba(92,248,200,0.08);
    --act-add-glow: var(--glow-accent3);
    --act-work-fg: #c8b0ff;
    --act-work-border: rgba(124,92,252,0.60);
    --act-work-bg: rgba(124,92,252,0.14);
    --act-work-glow: var(--glow-accent);
    --act-danger-fg: #ff8a8a;
    --act-danger-border: rgba(224,85,85,0.55);
    --act-danger-bg: rgba(224,85,85,0.12);
    --act-danger-glow: 0 0 12px rgba(224,85,85,0.45);
    /* primary-commit "neon" button — Cubase-blue tinted outline (kit Save Configuration style) */
    --act-commit-fg: var(--daw-cubase-fg);
    --act-commit-border: rgba(142,200,255,0.55);
    --act-commit-bg: rgba(142,200,255,0.14);
    --act-commit-glow: 0 0 12px rgba(142,200,255,0.45);
    --act-commit-textglow: 0 0 6px rgba(142,200,255,0.5);

    /* ── icon sizing — theme-controlled (was hardcoded inline px in JS) ── */
    --icon-xs: 13px;
    --icon-sm: 16px;
    --icon-md: 22px;
    --icon-lg: 26px;
  }