/* ============================================================
   CircuitForge Professional - 5 Comprehensive Lab Themes
   Every theme retunes: UI chrome, canvas grid, wire colors AND
   the schematic artwork itself (--svg-* tokens are consumed by
   the inline component SVGs), guaranteeing human-readable text,
   bodies and strokes no matter which theme is active.
   ============================================================ */

/* Shared SVG artwork token defaults (dark baseline) */
body {
  --svg-body: #131c26;        /* component body fill            */
  --svg-body-dark: #04080c;   /* recessed screens / inner wells */
  --svg-edge: #3a5566;        /* body outlines, dim hardware    */
  --svg-lead: #8fa8b8;        /* component leads / stub wires   */
  --svg-text: #cfd8dc;        /* bright labels inside artwork   */
  --svg-text-dim: #7497a8;    /* muted labels inside artwork    */
  --grad-header: linear-gradient(180deg, #10161e 0%, #0b1017 100%);
  --grad-panel: linear-gradient(180deg, #131c26 0%, #10161e 100%);
  --grad-accent: linear-gradient(135deg, var(--accent-cyan), var(--accent-green));
  --grad-btn-run: linear-gradient(135deg, rgba(0, 255, 136, 0.22), rgba(0, 212, 255, 0.14));
  --grad-title: linear-gradient(90deg, var(--accent-cyan), var(--accent-green));
  --shadow-panel: 0 16px 44px rgba(0, 0, 0, 0.75);
}

/* 1. Dark Neon (Cyberpunk Laboratory - Default) */
body.theme-dark-neon {
  --bg-primary: #0a0e14;
  --bg-canvas: #070a0e;
  --bg-panel: #111820;
  --bg-panel-secondary: #16202c;
  --bg-panel-elevated: #1d2b3a;
  --border-color: #1e3a4a;
  --border-color-light: #2c556b;
  --text-primary: #c8dde8;
  --text-secondary: #7497a8;
  --text-muted: #4a6675;
  --accent-cyan: #00d4ff;
  --accent-green: #00ff88;
  --accent-orange: #ff6b35;
  --accent-yellow: #ffb830;
  --accent-purple: #b478ff;
  --wire-default: #00d4ff;
  --wire-powered: #00ff88;
  --grid-color: rgba(0, 212, 255, 0.05);
  --grid-major-color: rgba(0, 212, 255, 0.12);
  --ribbon-bg: #111820;
  --ribbon-border: #1e3a4a;
}

/* 2. UNI-T Lab Light (Realistic Laboratory Bench) */
body.theme-unit-light {
  --bg-primary: #eaedf1;
  --bg-canvas: #f4f6f9;
  --bg-panel: #dde2e8;
  --bg-panel-secondary: #cfd6df;
  --bg-panel-elevated: #ffffff;
  --border-color: #bcc6d2;
  --border-color-light: #9faec0;
  --text-primary: #1e293b;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --accent-cyan: #0284c7;
  --accent-green: #16a34a;
  --accent-orange: #ea580c;
  --accent-yellow: #b45309;
  --accent-purple: #9333ea;
  --wire-default: #0284c7;
  --wire-powered: #16a34a;
  --grid-color: rgba(2, 132, 199, 0.08);
  --grid-major-color: rgba(2, 132, 199, 0.16);
  --ribbon-bg: #dde2e8;
  --ribbon-border: #bcc6d2;
  --svg-body: #ffffff;
  --svg-body-dark: #e2e8f0;
  --svg-edge: #64748b;
  --svg-lead: #334155;
  --svg-text: #0f172a;
  --svg-text-dim: #475569;
  --grad-header: linear-gradient(180deg, #f1f4f8 0%, #dfe4ec 100%);
  --grad-panel: linear-gradient(180deg, #ffffff 0%, #e8edf3 100%);
  --grad-btn-run: linear-gradient(135deg, rgba(22, 163, 74, 0.18), rgba(2, 132, 199, 0.12));
  --shadow-panel: 0 12px 34px rgba(15, 23, 42, 0.22);
}
body.theme-unit-light #ms-word-ribbon {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
body.theme-unit-light .ribbon-tab-bar { background: #cfd6df; }
body.theme-unit-light .comp-outer-box {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

/* 3. High-Contrast Blueprint (Engineering Schematic Style) */
body.theme-blueprint {
  --bg-primary: #071927;
  --bg-canvas: #092032;
  --bg-panel: #0c2b42;
  --bg-panel-secondary: #103755;
  --bg-panel-elevated: #15456b;
  --border-color: #1a5885;
  --border-color-light: #257bb9;
  --text-primary: #e0f2fe;
  --text-secondary: #7dd3fc;
  --text-muted: #38bdf8;
  --accent-cyan: #38bdf8;
  --accent-green: #4ade80;
  --accent-orange: #fb923c;
  --accent-yellow: #fde047;
  --accent-purple: #c084fc;
  --wire-default: #e0f2fe;
  --wire-powered: #38bdf8;
  --grid-color: rgba(56, 189, 248, 0.12);
  --grid-major-color: rgba(56, 189, 248, 0.28);
  --ribbon-bg: #0c2b42;
  --ribbon-border: #1a5885;
  --svg-body: #0d3049;
  --svg-body-dark: #062033;
  --svg-edge: #4aa3d8;
  --svg-lead: #bfe3f7;
  --svg-text: #f0f9ff;
  --svg-text-dim: #93c5fd;
  --grad-header: linear-gradient(180deg, #0d2c44 0%, #092032 100%);
  --grad-panel: linear-gradient(180deg, #0f3352 0%, #0b2740 100%);
  --grad-btn-run: linear-gradient(135deg, rgba(74, 222, 128, 0.2), rgba(56, 189, 248, 0.16));
  --shadow-panel: 0 16px 44px rgba(0, 10, 20, 0.8);
}
body.theme-blueprint .ribbon-tab-bar { background: #092032; }

/* 4. Retro CRT Phosphor Green (1980s Vintage Tech Monitor) */
body.theme-retro-crt {
  --bg-primary: #050d08;
  --bg-canvas: #030805;
  --bg-panel: #0a180e;
  --bg-panel-secondary: #0f2415;
  --bg-panel-elevated: #15321e;
  --border-color: #1a4225;
  --border-color-light: #286639;
  --text-primary: #4efc82;
  --text-secondary: #2db858;
  --text-muted: #1c7336;
  --accent-cyan: #33ff88;
  --accent-green: #4efc82;
  --accent-orange: #88ff66;
  --accent-yellow: #aaff44;
  --accent-purple: #33eeaa;
  --wire-default: #33ff88;
  --wire-powered: #66ffaa;
  --grid-color: rgba(78, 252, 130, 0.08);
  --grid-major-color: rgba(78, 252, 130, 0.18);
  --ribbon-bg: #0a180e;
  --ribbon-border: #1a4225;
  --svg-body: #081410;
  --svg-body-dark: #041008;
  --svg-edge: #1f7a44;
  --svg-lead: #35c46e;
  --svg-text: #a4ffc8;
  --svg-text-dim: #2db858;
  --grad-header: linear-gradient(180deg, #0c2012 0%, #061208 100%);
  --grad-panel: linear-gradient(180deg, #0d2114 0%, #081710 100%);
  --grad-btn-run: linear-gradient(135deg, rgba(78, 252, 130, 0.22), rgba(51, 255, 136, 0.12));
  --shadow-panel: 0 16px 44px rgba(0, 0, 0, 0.85);
}
body.theme-retro-crt #canvas-viewport::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%);
  background-size: 100% 4px;
  pointer-events: none;
  opacity: 0.6;
}

/* 5. Minimal Paper Light (Crisp Technical Publication Mode) */
body.theme-paper-light {
  --bg-primary: #f8fafc;
  --bg-canvas: #ffffff;
  --bg-panel: #f1f5f9;
  --bg-panel-secondary: #e2e8f0;
  --bg-panel-elevated: #ffffff;
  --border-color: #cbd5e1;
  --border-color-light: #94a3b8;
  --text-primary: #0f172a;
  --text-secondary: #334155;
  --text-muted: #64748b;
  --accent-cyan: #0369a1;
  --accent-green: #15803d;
  --accent-orange: #c2410c;
  --accent-yellow: #a16207;
  --accent-purple: #7e22ce;
  --wire-default: #0f172a;
  --wire-powered: #15803d;
  --grid-color: rgba(15, 23, 42, 0.06);
  --grid-major-color: rgba(15, 23, 42, 0.12);
  --ribbon-bg: #f1f5f9;
  --ribbon-border: #cbd5e1;
  --svg-body: #ffffff;
  --svg-body-dark: #e8edf3;
  --svg-edge: #64748b;
  --svg-lead: #1e293b;
  --svg-text: #0f172a;
  --svg-text-dim: #475569;
  --grad-header: linear-gradient(180deg, #ffffff 0%, #eef2f7 100%);
  --grad-panel: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
  --grad-btn-run: linear-gradient(135deg, rgba(21, 128, 61, 0.16), rgba(3, 105, 161, 0.1));
  --shadow-panel: 0 10px 30px rgba(15, 23, 42, 0.16);
}
body.theme-paper-light .ribbon-tab-bar { background: #e2e8f0; }
body.theme-paper-light .comp-outer-box {
  background: #ffffff;
  border-color: #94a3b8;
}

/* ============================================================
   Theme consumption: chrome surfaces adopt the gradient tokens
   ============================================================ */
#top-menubar { background: var(--grad-header); }
.mb-separator { background: var(--border-color); }
.mb-dropdown-menu {
  background: var(--grad-panel);
  border-color: var(--border-color);
  box-shadow: var(--shadow-panel);
}
.palette-thumb { background: var(--bg-canvas); border-color: var(--border-color); }
.palette-menu-group-title { border-bottom-color: rgba(128, 152, 170, 0.14); }

.comp-label-name { color: var(--text-primary); text-shadow: none; }
.comp-label-value { color: var(--accent-cyan); text-shadow: none; }
.comp-pin-label { color: var(--text-secondary); }

.preset-menu-group-title {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--accent-yellow);
  padding: 7px 8px 3px;
  border-bottom: 1px solid rgba(128, 152, 170, 0.14);
  margin: 4px 0 2px;
}
.preset-menu-group-title:first-child { margin-top: 0; }