/*
 * Copyright 2026 Jason Figge
 *
 * This file is part of Chip Hippo.
 *
 * Chip Hippo is free software: you can redistribute it and/or modify it under
 * the terms of the GNU General Public License as published by the Free
 * Software Foundation, either version 3 of the License, or (at your option)
 * any later version.
 *
 * Chip Hippo is distributed in the hope that it will be useful, but WITHOUT
 * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
 * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
 * more details.
 *
 * You should have received a copy of the GNU General Public License along
 * with Chip Hippo. If not, see <https://www.gnu.org/licenses/>.
 */

/* theme.css — design tokens, reset, and global typography.
   All colours/sizes are custom properties; components must use these tokens
   rather than hardcoding values. */

/* Inter variable font — bundled under src/web/fonts/ (never load from a CDN).
   The opsz axis auto-tunes letterforms for the size; wght covers 100–900. */
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-VariableFont_opsz,wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* ── Palette (neutral charcoal grey — dark default) ──────────────────── */
  --color-base: #1c1c1c; /* app background / desk */
  --color-mantle: #161616; /* header / panel background */
  --color-crust: #101010; /* deepest background */
  --color-surface-0: #2a2a2a; /* panel background */
  --color-surface-1: #383838; /* raised elements */
  --color-overlay: #686868; /* borders / muted lines */

  --color-text: #e8e8e8; /* primary text */
  --color-subtext: #b0b0b0; /* secondary text */
  --color-muted: #808080; /* de-emphasized text */

  --color-accent: #d0d0d0; /* primary accent (monochrome) */
  --color-accent-hover: #e0e0e0;
  /* The app icon's green (chiphippo-icon.svg's #2f855a): the same 150° hue,
     lifted for a dark ground. Tints the parts tray's section icons. */
  --color-brand: #5eba8c;
  --color-success: #80c080; /* running / high logic level */
  --color-info: #78a8d8; /* informational accent */
  --color-warning: #d4b060; /* caution / conflict */
  --color-danger: #e07070; /* error */

  --color-desk-dot: #343434; /* desk pitch-grid dots */
  --color-net-glow: #7fd0ff; /* connectivity-inspector highlight (Feature 70) */

  /* ── Simulation logic-level tints (Feature 90 — probe/LED/net glow) ──── */
  --color-sim-high: #7ce07c; /* H — driven high (green) */
  --color-sim-low: #5878c8; /* L — driven low (dim blue) */
  --color-sim-float: #868e98; /* Z — floating / undriven (grey) */
  --color-sim-conflict: #e0a840; /* X — conflict / short / oscillation (amber) */

  /* ── Breadboard palette (drawn boards — plastic tones) ───────────────── */
  --color-board-body: #d9d5c9; /* cream plastic slab */
  --color-board-edge: #b8b3a4; /* body outline */
  --color-board-trench: #c7c2b4; /* center groove */
  --color-board-hole: #33322e; /* tie-point squares */
  --color-board-label: #8a8577; /* row letters / column numerals */
  --color-rail-plus: #c05050; /* red rail stripe */
  --color-rail-minus: #5070c0; /* blue rail stripe */

  /* ── Part palette (DIP chips — same molded black in both themes) ─────── */
  --color-chip-body: #26262b; /* molded plastic body */
  --color-chip-notch: #17171a; /* notch recess */
  --color-chip-leg: #9aa0a8; /* tinned legs */
  --color-chip-label: #d8d8dc; /* printed part number + pin-1 dot */
  /* A CUSTOM chip (the chip designer): its own slate-blue plastic, a lighter
     folded corner and the `</>` glyph — never a library part's black. */
  --color-chip-custom-body: #22364f;
  --color-chip-custom-fold: #46698f;
  --color-chip-custom-glyph: #a9cbef;
  /* The chip debugger: an armed chip's breakpoint badge, and the outline a
     chip paused in its own code pulses with. */
  --color-debug-break: #e5484d;
  --color-debug-pause: #f5a524;
  /* The chip designer's code editor (hdl-editor.js): Verilog, coloured. A
     PIN name is the one that links to the package, so it stands out most. */
  --color-code-keyword: #c792ea;
  --color-code-number: #f2a76b;
  --color-code-comment: #7f8b94;
  --color-code-pin: #6fd3a4;
  --color-code-signal: #82aaff;
  --color-code-operator: #b8c0c8;
  --color-code-bad: #ff6b6b;
  --color-code-current: rgba(245, 165, 36, 0.22);
  --color-code-linked: rgba(111, 211, 164, 0.28);

  /* ── Discrete parts & PSU bricks (Feature 60) ────────────────────────── */
  --color-part-body: #43474d; /* switch/button housings */
  --color-part-inset: #2c2f34; /* slide slot / recesses */
  --color-part-accent: #c8ccd2; /* knobs / caps highlight */
  --color-part-cap: #b25252; /* push-button cap */
  --color-part-resistor: #c9a26a; /* resistor body (beige) */
  /* A resistor's colour code (IEC 60062) — one per band colour in
     model/resistor-bands.js, tuned to read against the beige body. */
  --color-band-black: #1e1e20;
  --color-band-brown: #7a4a22;
  --color-band-red: #c8332d;
  --color-band-orange: #e07a1f;
  --color-band-yellow: #e8cf2a;
  --color-band-green: #2f9a45;
  --color-band-blue: #2f5fc8;
  --color-band-violet: #8a3fc0;
  --color-band-grey: #8c8f94;
  --color-band-white: #f2f2f0;
  --color-band-gold: #a8820f; /* darker than the true hue: the body is beige */
  --color-band-silver: #bfc3c8;
  /* Capacitors: a ceramic disc's glaze, and an electrolytic's sleeve with
     the paler stripe printed down its negative side. */
  --color-part-ceramic: #d9892b;
  --color-part-ceramic-text: #3a2408;
  --color-part-cap-can: #2a4a8c;
  --color-part-cap-stripe: #b8c4dc;
  --color-part-cap-text: #e9eef8;
  /* A trimmer potentiometer: the blue moulded body a Bourns 3296 has, its
     white printing, and the brass adjusting screw with its slot. */
  --color-part-trimpot: #2f62b5;
  --color-part-trimpot-text: #eef2fa;
  --color-part-screw: #c9a347;
  --color-part-screw-slot: #4a3a12;
  /* The discretes: a rectifier's black epoxy and the silver band on its
     cathode end; a Zener's amber glass and its black band; a toroid's
     ferrite ring, the copper wound round it and the dark edge between its
     turns, and a canned inductor's rim, its black top and the printing on
     it; a transistor's black moulding, a TO-220's tinned tab
     and the printing on either; and the lamp a transistor shows while it
     conducts, ringed amber while a MOSFET is holding its last state. */
  --color-part-diode: #232326;
  --color-part-diode-band: #c4c8ce;
  --color-part-zener: #c9702a;
  --color-part-zener-band: #1e1e20;
  --color-part-inductor-core: #2f3034;
  --color-part-inductor-copper: #d08a46;
  --color-part-inductor-wire: #6e3d17;
  --color-part-inductor-rim: #45464b;
  --color-part-inductor-drum: #1b1b1e;
  --color-part-inductor-text: #c9c9ce;
  --color-part-transistor: #222226;
  --color-part-transistor-tab: #b4b9c0;
  --color-part-transistor-text: #d8d8dc;
  --color-part-relay: #2c5fa8;
  --color-part-relay-text: #e8eef8;
  --color-part-speaker: #1d1e21;
  --color-part-speaker-cone: #3b3e44;
  --color-part-speaker-rim: #8f959d;
  --color-part-speaker-text: #c9ccd2;
  --color-part-on: #52d273;
  --color-part-held: #e0a840;
  /* Magic smoke from a burnt-out part. Sooty, but it has to read against BOTH
     the dark and light desk (parts are theme-invariant), so it can't go much
     darker than this without vanishing on #1c1c1c. */
  --color-part-smoke: #565b62;
  /* Spice Lite's brown smoke: an output driven past twice its budget. */
  --color-part-smoke-brown: #7a5634;
  --color-psu-body: #2e3238; /* power brick */
  --color-psu-badge: #e4e6ea; /* voltage badge text */
  --color-load-body: #3a3348; /* electronic load brick */
  /* A supply at its current limit (Spice Lite): amber that reads on the
     brick's dark body in either theme — the light theme's --color-warning is
     a dark amber made for a light page, and on the brick it all but vanished. */
  --color-psu-limited: #e8b84a;
  /* An HD44780 module is three materials, and at its true size the tones are
     what tell them apart: a green board, the dark metal frame bonded to it,
     and the backlit glass inside that. */
  --color-lcd-pcb: #256147; /* the module's own soldermask-green PCB */
  --color-lcd-bezel: #20242a; /* the display module's frame (dark) */
  /* The backlit field, one per LED_COLOR_OPTIONS name — an LCD module picks
     its colour from the same list every other lit part does. */
  --color-lcd-screen-green: #7cbf5a; /* the classic yellow-green STN panel */
  --color-lcd-screen-blue: #2b5fd9;
  --color-lcd-screen-red: #b8443c;
  --color-lcd-screen-yellow: #d9c24a;
  --color-lcd-screen-white: #dfe6ea;
  /* A LIT DOT. Every panel but blue is positive-mode — dark dots on a tinted
     field — and the blue one is negative-mode, light dots on blue, which is
     what the real part looks like and why this can't be a single token. */
  --color-lcd-dot-green: #16261a;
  --color-lcd-dot-blue: #eaf2ff;
  --color-lcd-dot-red: #2a1010;
  --color-lcd-dot-yellow: #2a2410;
  --color-lcd-dot-white: #1b1f24;

  /* ── Jumper-wire palette (Feature 50 — one token per WIRE_COLORS name;
        LEDs share these same color tokens — house rule) ─────────────────── */
  --color-wire-red: #d04a4a;
  --color-wire-black: #26262a;
  --color-wire-blue: #4a6fd0;
  --color-wire-green: #4aa04a;
  --color-wire-yellow: #d0b04a;
  --color-wire-orange: #d0804a;
  --color-wire-white: #e8e8e8;
  --color-wire-purple: #9a5ad0;
  --color-wire-outline: rgba(0, 0, 0, 0.5); /* darker under-stroke */

  /* ── Typography ──────────────────────────────────────────────────────── */
  --font-sans:
    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:
    ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Menlo, monospace;
  /* ONE base — `--font-size`, the Appearance tab's "Editor font size" (11–18,
     default 13) — and a ramp of fixed ±1px steps off it. ADDITIVE, not
     proportional: a UI step is one pixel at every base, so a caption stays
     exactly one step under the label above it however large the app is set.
     The ramp FLATTENS at the bottom (`max()`) because there is a floor under
     which chrome text stops being readable at all; it is never capped at the
     top, which is the direction this setting exists for.
     Desk artwork is deliberately NOT on this scale — chip labels, board
     markings and schematic symbols are drawn in WORLD units (1 unit = one
     breadboard pitch); they are part of the circuit and scale with the desk
     camera. Anything sized in world units stays a bare number here. */
  --font-size: 13px;
  --font-size-xs: max(10px, calc(var(--font-size) - 2px));
  --font-size-sm: max(11px, calc(var(--font-size) - 1px));
  --font-size-lg: calc(var(--font-size) + 1px);
  --font-size-xl: calc(var(--font-size) + 2px);
  --font-size-display: calc(var(--font-size) + 11px); /* the About app name */
  --line-height: 1.5;

  /* ── Spacing scale ───────────────────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* ── Radii & elevation ───────────────────────────────────────────────── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.4);

  /* ── Layout ──────────────────────────────────────────────────────────── */
  /* Height is ONE LINE OF TEXT plus constant chrome, so a control grows with
     the type rather than clipping it. The px term is the padding, not the box.
     The toolbar row gets its own pair because a header of mixed text and icon
     buttons has to stay FLUSH: sized by content instead, the text buttons would
     grow and the icon ones would not, and the row would come out ragged. */
  --header-height: calc(var(--font-size) + 35px); /* 48 at the default 13 */
  --control-height: calc(
    var(--font-size) + 19px
  ); /* 32; inputs, selects, buttons */
  --toolbar-height: calc(var(--font-size) + 15px); /* 28; buttons and pills */
  /* One segment of a segmented control — a toolbar pill's, and the Settings /
     Properties dialogs' segmented picker, which is deliberately the same shape
     in a card. Hence no `toolbar-` in the name: it is the app's, not the
     header's. Also the square close (×) buttons, which are one glyph in a box
     of exactly this size. */
  --segment-height: calc(var(--font-size) + 9px); /* 22 at the default 13 */
}

/* Light palette, reached two ways.
   ① The media query is the app's ACTUAL path: Settings ▸ Appearance ▸ Theme
   persists "system"/"light"/"dark", and main turns that into Electron's
   `nativeTheme.themeSource` — which is what `prefers-color-scheme` reports in
   every window here. So one native switch themes the main window, every
   auxiliary window, and the native menus/dialogs, with nothing to plumb per
   window and no flash of the wrong palette.
   ② `data-theme="light"`/`"dark"` on the root is a manual override (handy in
   the devtools, and the escape hatch if a page ever needs to pin a palette).
   The attribute out-specifies the media query, so it wins in both directions —
   which is why the media query is guarded with `:not([data-theme])`. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --color-base: #f4f4f4;
    --color-mantle: #ebebeb;
    --color-crust: #dedede;
    --color-surface-0: #d2d2d2;
    --color-surface-1: #c2c2c2;
    --color-overlay: #828282;
    --color-text: #1e1e1e;
    --color-subtext: #484848;
    --color-muted: #686868;
    --color-accent: #383838;
    --color-accent-hover: #202020;
    --color-brand: #2f855a;
    --color-success: #2a7a2a;
    --color-info: #3a6ea5;
    --color-warning: #9a6800;
    --color-danger: #b82020;
    --color-desk-dot: #c8c8c8;
    --color-net-glow: #1f80c0;
    --color-sim-high: #2a8a2a;
    --color-sim-low: #3a5fb5;
    --color-sim-float: #6c747e;
    --color-sim-conflict: #a87400;
    --color-board-body: #f2efe7;
    --color-board-edge: #c9c4b4;
    --color-board-trench: #e0dccf;
    --color-board-hole: #3c3b36;
    --color-board-label: #97917f;
    --color-rail-plus: #c04545;
    --color-rail-minus: #4568c0;
    --color-wire-white: #d4d4d4; /* keep white leads visible on light desks */
    --color-wire-outline: rgba(0, 0, 0, 0.35);
    --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.12);
    --color-code-keyword: #8a3fb5;
    --color-code-number: #a85a12;
    --color-code-comment: #6b757d;
    --color-code-pin: #11804e;
    --color-code-signal: #2f5fc0;
    --color-code-operator: #4a525a;
    --color-code-bad: #c62828;
    --color-code-current: rgba(200, 120, 0, 0.18);
    --color-code-linked: rgba(17, 128, 78, 0.2);
  }
}

:root[data-theme="light"] {
  color-scheme: light;
  --color-base: #f4f4f4;
  --color-mantle: #ebebeb;
  --color-crust: #dedede;
  --color-surface-0: #d2d2d2;
  --color-surface-1: #c2c2c2;
  --color-overlay: #828282;
  --color-text: #1e1e1e;
  --color-subtext: #484848;
  --color-muted: #686868;
  --color-accent: #383838;
  --color-accent-hover: #202020;
  --color-brand: #2f855a;
  --color-success: #2a7a2a;
  --color-info: #3a6ea5;
  --color-warning: #9a6800;
  --color-danger: #b82020;
  --color-desk-dot: #c8c8c8;
  --color-net-glow: #1f80c0;
  --color-sim-high: #2a8a2a;
  --color-sim-low: #3a5fb5;
  --color-sim-float: #6c747e;
  --color-sim-conflict: #a87400;
  --color-board-body: #f2efe7;
  --color-board-edge: #c9c4b4;
  --color-board-trench: #e0dccf;
  --color-board-hole: #3c3b36;
  --color-board-label: #97917f;
  --color-rail-plus: #c04545;
  --color-rail-minus: #4568c0;
  --color-wire-white: #d4d4d4;
  --color-wire-outline: rgba(0, 0, 0, 0.35);
  --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.12);
  --color-code-keyword: #8a3fb5;
  --color-code-number: #a85a12;
  --color-code-comment: #6b757d;
  --color-code-pin: #11804e;
  --color-code-signal: #2f5fc0;
  --color-code-operator: #4a525a;
  --color-code-bad: #c62828;
  --color-code-current: rgba(200, 120, 0, 0.18);
  --color-code-linked: rgba(17, 128, 78, 0.2);
}

/* Explicit dark override — same values as the :root default; present so the
   manual override works in both directions (see the note above). */
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-base: #1c1c1c;
  --color-mantle: #161616;
  --color-crust: #101010;
  --color-surface-0: #2a2a2a;
  --color-surface-1: #383838;
  --color-overlay: #686868;
  --color-text: #e8e8e8;
  --color-subtext: #b0b0b0;
  --color-muted: #808080;
  --color-accent: #d0d0d0;
  --color-accent-hover: #e0e0e0;
  --color-brand: #5eba8c;
  --color-success: #80c080;
  --color-info: #78a8d8;
  --color-warning: #d4b060;
  --color-danger: #e07070;
  --color-desk-dot: #343434;
  --color-net-glow: #7fd0ff;
  --color-sim-high: #7ce07c;
  --color-sim-low: #5878c8;
  --color-sim-float: #868e98;
  --color-sim-conflict: #e0a840;
  --color-board-body: #d9d5c9;
  --color-board-edge: #b8b3a4;
  --color-board-trench: #c7c2b4;
  --color-board-hole: #33322e;
  --color-board-label: #8a8577;
  --color-rail-plus: #c05050;
  --color-rail-minus: #5070c0;
  --color-wire-white: #e8e8e8;
  --color-wire-outline: rgba(0, 0, 0, 0.5);
  --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.4);
  --color-code-keyword: #c792ea;
  --color-code-number: #f2a76b;
  --color-code-comment: #7f8b94;
  --color-code-pin: #6fd3a4;
  --color-code-signal: #82aaff;
  --color-code-operator: #b8c0c8;
  --color-code-bad: #ff6b6b;
  --color-code-current: rgba(245, 165, 36, 0.22);
  --color-code-linked: rgba(111, 211, 164, 0.28);
}

/* ── Minimal reset ───────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: var(--font-size);
  line-height: var(--line-height);
  color: var(--color-text);
  background: var(--color-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

h1,
h2,
h3,
p {
  margin: 0;
}