/*
 * theme.css — Ohm2Eng Design System — Single Source of Truth
 *
 * Semantic tokens are defined here with their actual values.
 * Shorthand aliases (--bg, --panel, --bdr, --tx, --copper, …) point to the
 * semantic tokens so all existing JS/CSS continues to work without changes.
 *
 * To retheme the entire app: edit only this file.
 *
 * Dark mode is the default (:root)  — Midnight Blue palette.
 * Light mode overrides via [data-theme="light"] — Cream/Paper palette.
 */

/* ════════════════════════════════════════════════════════════════
   DARK MODE — DEFAULT  (Midnight Blue)
   ════════════════════════════════════════════════════════════════ */
:root {

  /* ── Semantic Design Tokens ───────────────────────────────── */

  /* Backgrounds — deep navy layers */
  --bg-base:      #0b1120;   /* page / outermost surface          */
  --bg-elevated:  #0f172a;   /* slightly raised surface           */
  --bg-panel:     #131e30;   /* panels, sidebars, toolbars        */
  --bg-panel-2:   #1a2640;   /* secondary panel level             */
  --bg-panel-3:   #1e2d4a;   /* tertiary panel level              */

  /* Borders — low-contrast navy variants */
  --border-color:   #1e2d4a; /* default border                    */
  --border-color-2: #26385c; /* stronger border / dividers        */

  /* Text — soft cream / off-white */
  --text-main:      #e8e6e0; /* primary readable text — warm cream */
  --text-secondary: #8a9bb5; /* muted / helper text               */
  --text-tertiary:  #3d506e; /* placeholder / disabled text       */

  /* Accent — Muted Gold (professional, works on navy & cream) */
  --color-copper:  #c9a84c;  /* Muted Gold — primary brand accent */

  /* Accent — Instruments / Status */
  --color-teal:    #4ecdc4;  /* oscilloscope CH2 only             */
  --color-green:   #4ade80;
  --color-yellow:  #fbbf24;
  --color-orange:  #fb923c;
  --color-purple:  #a78bfa;
  --color-red:     #f87171;
  --color-pink:    #f472b6;
  --error-color:   #e94560;

  /* Cards */
  --card-bg:   #131e30;
  --card-bg-2: #1a2640;

  /* Misc */
  --radius:    8px;
  --shadow:    0 6px 24px rgba(0,0,0,.55);

  /* Canvas (read by renderer.js via getComputedStyle) */
  --canvas-bg:  #080f1c;
  --canvas-dot: rgba(201,168,76,0.15);
  --wire-default: #4a9aba;
  --comp-stroke: ;          /* empty → renderer falls back to individual component color */
  --value-label: rgba(170,200,220,0.82);
  --sim-result-color: #06d6a0;

  /* Oscilloscope display — stays near-black for waveform clarity */
  --osc-bg:           #05080f;
  --osc-grid-minor:   rgba(50,50,50,0.7);
  --osc-grid-major:   rgba(80,80,80,0.6);
  --osc-grid-center:  rgba(120,120,120,0.9);
  --osc-grid-tick:    rgba(160,160,160,0.6);
  --osc-border:       #555555;
  --osc-wait-green:   rgba(120,180,120,0.22);
  --osc-wait-green2:  rgba(120,180,120,0.13);
  --osc-trig-wait:    rgba(255,200,0,0.25);
  --osc-trig-line:    rgba(255,200,0,0.65);
  --osc-trig-marker:  #ffcc00;
  --osc-ch1:          #ff4444;
  --osc-ch2:          #4ecdc4;
  --osc-ch1-label:    rgba(255,68,68,0.65);
  --osc-ch2-label:    rgba(68,136,255,0.65);
  --osc-scale-text:   rgba(130,130,130,0.45);
  --osc-mode-bg-on:   #12100a;
  --osc-mode-bg-off:  #0b0c0e;
  --osc-btn-off:      #2e3a50;
  --bode-bg:          #050810;
  --bode-wait-text:   rgba(0,180,80,0.25);

  /* Oscilloscope coupling button active backgrounds (channel-tinted) */
  --osc-couple-a-bg:  #200808;
  --osc-couple-b-bg:  #080820;

  /* Clerk auth modal (consumed as literal strings via window.TC) */
  --clerk-primary:    #c9a84c;
  --clerk-bg:         #0b1120;
  --clerk-card-bg:    #0f172a;
  --clerk-card-bdr:   #1e2d4a;
  --clerk-text:       #e8e6e0;
  --clerk-text-sec:   #5a7496;
  --clerk-input-bg:   #0b1630;
  --clerk-neutral:    #1a2640;
  --clerk-title:      #d4cfc6;

  /* Oscilloscope component grid (component-based OSC, darker than panel scope) */
  --osc-grid-minor-2: rgba(30,30,30,1);
  --osc-grid-major-2: rgba(55,55,55,1);
  --osc-grid-border-2: #2a2a2a;
  --osc-trig-line-2:  rgba(255,200,0,0.5);
  --osc-conn-ch1:     #ff4444;
  --osc-conn-ch1-dim: #ff8888;
  --osc-conn-ch2:     #4488ff;
  --osc-conn-ch2-dim: #8888ff;
  /* Multi-channel palette (8 channels for component OSC) */
  --osc-ch3:          #06d6a0;
  --osc-ch4:          #ffd166;
  --osc-ch5:          #e94560;
  --osc-ch6:          #ce93d8;
  --osc-ch7:          #f77f00;
  --osc-ch8:          #00e5ff;

  /* Logic Analyzer */
  --la-bg:            #050810;
  --la-wait-text:     #1e2d4a;
  --la-header-bg:     #0f1a2e;
  --la-header-text:   #3a5a8a;
  --la-row-even:      rgba(10,20,50,0.45);
  --la-row-odd:       rgba(5,12,35,0.45);
  --la-grid:          rgba(40,70,120,0.25);
  --la-no-data:       rgba(100,110,130,0.4);
  --la-bottom-line:   #1e2d4a;
  --la-axis-text:     #2a4a7a;
  --la-sig-0:         #c9a84c;
  --la-sig-1:         #fbbf24;
  --la-sig-2:         #fb923c;
  --la-sig-3:         #e94560;
  --la-sig-4:         #ce93d8;
  --la-sig-5:         #f77f00;
  --la-sig-6:         #4ecdc4;
  --la-sig-7:         #ff8888;

  /* Logic levels (renderer) */
  --logic-high:       #43a047;
  --logic-low:        #e53935;
  --logic-undef:      #888888;

  /* ── Backward-Compat Aliases ─────────────────────────────── */
  /* All existing JS inline-styles and CSS rules use these names.
     They resolve through to the semantic tokens above.          */
  --bg:    var(--bg-base);
  --bg2:   var(--bg-elevated);
  --panel: var(--bg-panel);
  --p2:    var(--bg-panel-2);
  --p3:    var(--bg-panel-3);
  --bdr:   var(--border-color);
  --bdr2:  var(--border-color-2);
  --tx:    var(--text-main);
  --tx2:   var(--text-secondary);
  --tx3:   var(--text-tertiary);
  --copper: var(--color-copper);
  /* --teal and --green are re-mapped to copper in index.html <style>
     so that all brand-accent UI elements use the gold/copper palette.
     The raw oscilloscope channel colour lives in --osc-ch2 / --color-teal. */
  --teal:   var(--color-teal);
  --green:  var(--color-green);
  --yellow: var(--color-yellow);
  --orange: var(--color-orange);
  --purple: var(--color-purple);
  --red:    var(--color-red);
  --pink:   var(--color-pink);
  --card:   var(--card-bg);
  --card2:  var(--card-bg-2);
  --r:      var(--radius);

  /* ── Layout / Gradient Tokens ──────────────────────────────── */
  /* These let index.html swap complex gradients per-theme. */
  --tb-bg:         linear-gradient(90deg, #071830, #0f2540, #071830);
  --tb2-bg:        linear-gradient(90deg, #051220, #091c34, #051220);
  --sb-bg:         linear-gradient(90deg, #071830, #0d2040);
  --canvas-area-bg: #080f1c;
  --fd-bg:         #0d1e30;           /* file dropdown */
  --lib-mobile-bg: rgba(11,25,48,0.82);

  /* ── Accent RGBA Helpers ────────────────────────────────────── */
  /* Tinted shadows / glows derived from the copper accent colour. */
  --accent-glow-sm:   rgba(201,168,76,0.10);
  --accent-glow-md:   rgba(201,168,76,0.25);
  --accent-glow-lg:   rgba(201,168,76,0.50);
  --accent-border-alpha: rgba(201,168,76,0.40);
  --accent-bg-tint:   rgba(201,168,76,0.08);   /* hover/active tint */
  --ghost-bg:         rgba(201,168,76,0.10);
  --ghost-bdr:        rgba(201,168,76,0.50);
  --sel-box-bg:       rgba(201,168,76,0.06);
}

/* ════════════════════════════════════════════════════════════════
   LIGHT MODE OVERRIDE  (Cream / Paper)
   ════════════════════════════════════════════════════════════════ */
[data-theme="light"] {

  /* Backgrounds — warm paper / cream layers */
  --bg-base:      #fcfbf7;
  --bg-elevated:  #f5f3ee;
  --bg-panel:     #f0ede6;
  --bg-panel-2:   #e8e4db;
  --bg-panel-3:   #dedad0;

  /* Borders — subtle warm-grey */
  --border-color:   #d4cfc6;
  --border-color-2: #c4bfb4;

  /* Text — maximum contrast for professional CAD legibility */
  --text-main:      #000000;
  --text-secondary: #1a1a1a;
  --text-tertiary:  #4b5563;

  /* Accent — slightly deeper gold for cream background */
  --color-copper:  #a07830;

  /* Accent — Instruments */
  --color-teal:    #1a7a74;
  --color-green:   #16803a;
  --color-yellow:  #b45309;
  --color-orange:  #c2410c;
  --color-purple:  #6d28d9;
  --color-red:     #b91c1c;
  --color-pink:    #9d174d;

  /* Cards */
  --card-bg:   #f0ede6;
  --card-bg-2: #e8e4db;

  /* Misc */
  --shadow: 0 6px 24px rgba(11,17,32,.12);

  /* Canvas — pure white Multisim-style whiteboard */
  --canvas-bg:  #ffffff;
  --canvas-dot: rgba(0,0,0,0.07);
  --wire-default: #1a2e46;
  --comp-stroke: #111111;              /* override: all component outlines/labels → near-black */
  --value-label: rgba(20,30,40,0.85); /* parameter/value labels — dark on white */
  --sim-result-color: #0a5c38;        /* simulation result readout — dark green on white */

  /* Oscilloscope and LA stay dark in light mode — instruments always dark display */
  --osc-mode-bg-on:  #12100a;
  --osc-mode-bg-off: #0b0c0e;

  /* Layout / Gradient overrides for light mode */
  --tb-bg:          linear-gradient(90deg, #efe9dc, #f0ede6, #efe9dc);
  --tb2-bg:         linear-gradient(90deg, #e5ddd0, #e8e1d4, #e5ddd0);
  --sb-bg:          linear-gradient(90deg, #ece7de, #e8e3da);
  --canvas-area-bg: #ffffff;
  --fd-bg:          #f0ede6;
  --lib-mobile-bg:  rgba(240,236,228,0.92);

  /* Accent RGBA helpers — warm gold for light mode */
  --accent-glow-sm:   rgba(160,120,48,0.10);
  --accent-glow-md:   rgba(160,120,48,0.25);
  --accent-glow-lg:   rgba(160,120,48,0.50);
  --accent-border-alpha: rgba(160,120,48,0.40);
  --accent-bg-tint:   rgba(160,120,48,0.08);
  --ghost-bg:         rgba(160,120,48,0.10);
  --ghost-bdr:        rgba(160,120,48,0.50);
  --sel-box-bg:       rgba(160,120,48,0.06);
}