/* ==========================================================================
   YesTechie Labs Style 0.4.0 — chapter 14 · Themes
   Labs Light (= the kit tokens) + Labs Dark. Load this file LAST.

     <html data-theme="light|dark" data-theme-pref="light|dark|system">
   js/theme.js resolves "system" through prefers-color-scheme. [data-theme]
   also works on any container, so a dark panel can sit inside a light page.

   THM-07 literals that match a token in both themes now live on the owning
   rule (form control, chart band, bullet tracks, scrim, scanners). What
   remains here is the token blocks plus dark-only fixes whose light value
   is intentionally different (password fill, drop shadows, lamp glow).
   ========================================================================== */

/* THM-05 · Labs Light: explicit copy of the live colour tokens */
[data-theme="light"] {
  color-scheme: light;
  --bg-color: #f4f5f4;
  --grid-color: #e2e6e3;
  --panel-bg: rgba(238, 242, 239, 0.85);
  --panel-bg-solid: #eff2ef;
  --panel-bg-hover: rgba(220, 226, 222, 0.95);
  --border-main: #a3b1a6;
  --border-light: #c2ccc4;
  --border-dashed: #b4bfb7;
  --text-dark: #374151;
  --text-muted: #6b7280;
  --accent-blue: #6388b0;
  --accent-blue-trans: rgba(99, 136, 176, 0.2);
  --accent-red: #db6554;
  --accent-red-trans: rgba(219, 101, 84, 0.2);
  --accent-green: #7a9f82;
  --accent-green-trans: rgba(122, 159, 130, 0.2);
  --accent-yellow: #c69c5e;
  --accent-yellow-trans: rgba(198, 156, 94, 0.2);
  --surface-pane: rgba(255, 255, 255, 0.4);
  --surface-input: rgba(0, 0, 0, 0.02);
  --surface-input-focus: #ffffff;
  --surface-well: rgba(0, 0, 0, 0.03);
  --surface-submit: #d4dde5;
  --scrim: rgba(0, 0, 0, 0.3);
  --ink-on-accent: #ffffff;
  --accent-blue-faint: rgba(99, 136, 176, 0.12);
  --band-1: rgba(0, 0, 0, 0.1);
  --band-2: rgba(0, 0, 0, 0.06);
  --band-3: rgba(0, 0, 0, 0.03);
  --accent-blue-ink: #4b6f95;
  --accent-red-ink: #c43d29;
  --accent-green-ink: #54745b;
  --accent-yellow-ink: #8a6631;
  --text-muted-ink: #666d7a;
  --theme-meta: #eff2ef;
  --hatch: repeating-linear-gradient( -45deg, transparent 0 4px, rgba(163, 177, 166, 0.35) 4px 5px );
  --subgrid: linear-gradient(rgba(226, 230, 227, 0.6) 1px, transparent 1px), linear-gradient(90deg, rgba(226, 230, 227, 0.6) 1px, transparent 1px);
}

/* THM-05 · Labs Dark: graphite-sage night mode, same identity */
[data-theme="dark"] {
  color-scheme: dark;
  --bg-color: #141715;
  --grid-color: #1e2320;
  --panel-bg: rgba(27, 32, 29, 0.88);
  --panel-bg-solid: #1b201d;
  --panel-bg-hover: rgba(42, 49, 45, 0.95);
  --border-main: #606f64;
  --border-light: #36403a;
  --border-dashed: #4a564e;
  --text-dark: #d9dfda;
  --text-muted: #939d96;
  --accent-blue: #88a7c8;
  --accent-blue-trans: rgba(136, 167, 200, 0.18);
  --accent-red: #e3806f;
  --accent-red-trans: rgba(227, 128, 111, 0.18);
  --accent-green: #92b89a;
  --accent-green-trans: rgba(146, 184, 154, 0.18);
  --accent-yellow: #d6b27a;
  --accent-yellow-trans: rgba(214, 178, 122, 0.18);
  --surface-pane: rgba(255, 255, 255, 0.025);
  --surface-input: rgba(255, 255, 255, 0.035);
  --surface-input-focus: #222924;
  --surface-well: rgba(0, 0, 0, 0.22);
  --surface-submit: #243039;
  --scrim: rgba(0, 0, 0, 0.6);
  --ink-on-accent: #121513;
  --accent-blue-faint: rgba(136, 167, 200, 0.14);
  --band-1: rgba(255, 255, 255, 0.14);
  --band-2: rgba(255, 255, 255, 0.08);
  --band-3: rgba(255, 255, 255, 0.04);
  --accent-blue-ink: #88a7c8;
  --accent-red-ink: #e3806f;
  --accent-green-ink: #92b89a;
  --accent-yellow-ink: #d6b27a;
  --text-muted-ink: #939d96;
  --theme-meta: #1b201d;
  --hatch: repeating-linear-gradient( -45deg, transparent 0 4px, rgba(96, 111, 100, 0.45) 4px 5px );
  --subgrid: linear-gradient(rgba(44, 52, 47, 0.8) 1px, transparent 1px), linear-gradient(90deg, rgba(44, 52, 47, 0.8) 1px, transparent 1px);
}

/* Aliases resolve where they are declared, so a nested scope re-declares them. */
[data-theme="light"],
[data-theme="dark"] {
  --lamp-idle: var(--border-main);
  --focus-ring: 1px dashed var(--accent-blue);
  --bg: var(--bg-color);
  --grid: var(--grid-color);
  --panel: var(--panel-bg);
  --panel-hover: var(--panel-bg-hover);
  --panel-border: var(--border-main);
  --border: var(--border-main);
  --border-lt: var(--border-light);
  --border-dash: var(--border-dashed);
  --text: var(--text-dark);
  --text-main: var(--text-dark);
  --muted: var(--text-muted);
  --blue: var(--accent-blue);
  --blue-t: var(--accent-blue-trans);
  --red: var(--accent-red);
  --red-t: var(--accent-red-trans);
  --green: var(--accent-green);
  --green-t: var(--accent-green-trans);
  --yellow: var(--accent-yellow);
  --yellow-t: var(--accent-yellow-trans);
}

/* THM-05 · a non-html element with [data-theme] paints its own canvas */
[data-theme="light"]:not(html),
[data-theme="dark"]:not(html) {
  background-color: var(--bg-color);
  background-image:
    linear-gradient(var(--grid-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  color: var(--text-dark);
}

/* ------------------------------------------------------------------------
   Dark-only fixes whose light value is intentionally not the token.
   ------------------------------------------------------------------------ */

/* password field keeps its sage fill in Light; Dark uses the input token */
[data-theme="dark"] input[type="password"].form-control {
  background: var(--surface-input);
  border-color: var(--border-main);
}

/* light drop shadows read as smudges on dark */
[data-theme="dark"] .login-container { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); }
[data-theme="dark"] .modal,
[data-theme="dark"] .palette { box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.35); }

/* lamps: tighter glow so they do not bloom on dark */
[data-theme="dark"] .dot-green,
[data-theme="dark"] .lamp.ok { box-shadow: 0 0 3px var(--accent-green); }
[data-theme="dark"] .dot-red,
[data-theme="dark"] .lamp.crit { box-shadow: 0 0 3px var(--accent-red); }
[data-theme="dark"] .dot-yellow,
[data-theme="dark"] .lamp.warn { box-shadow: 0 0 3px var(--accent-yellow); }
[data-theme="dark"] .dot-blue,
[data-theme="dark"] .lamp.info { box-shadow: 0 0 3px var(--accent-blue); }

/* THM-09 · no animated flash while switching */
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after { transition: none !important; }

/* Theme controls (from Labs Style ch.14 components) */
/* THM-01 · glyphs drawn in CSS: light = open ring, dark = solid, system = half */
.theme-glyph {
  display: inline-block;
  width: 8px;
  height: 8px;
  border: 1px solid currentColor;
  border-radius: 50%;
  flex-shrink: 0;
}
.theme-glyph.dark { background: currentColor; }
.theme-glyph.system { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }

/* THM-01 · segmented selector (radiogroup) */
.theme-switch { display: inline-flex; align-items: stretch; border: 1px solid var(--border-main); }
.theme-switch::before { content: "["; color: var(--border-main); padding: 4px 0 0 6px; }
.theme-switch::after { content: "]"; color: var(--border-main); padding: 4px 6px 0 0; }
.theme-switch button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  font-size: 11px;
  text-transform: uppercase;
  background: transparent;
  border: none;
  padding: 5px 9px;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
}
.theme-switch button + button { border-left: 1px dotted var(--border-main); }
.theme-switch button:hover { color: var(--text-dark); background: var(--panel-bg-hover); }
.theme-switch button[aria-checked="true"] { color: var(--text-dark); background: var(--accent-blue-trans); font-weight: bold; box-shadow: inset 0 -2px 0 var(--accent-blue); }
.theme-switch button:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: -3px; }
.theme-switch.sm button { padding: 3px 7px; font-size: 10px; }

/* THM-01 · resolved read-out ("SYSTEM → DARK") */
.theme-resolved { font-size: 10px; color: var(--text-muted); letter-spacing: .12em; white-space: nowrap; }
.theme-resolved b { color: var(--text-dark); }

/* THM-02 · compact cycle button: [ ◐ SYS ] */
.theme-cycle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border-main);
  padding: 3px 7px;
  cursor: pointer;
  white-space: nowrap;
}
.theme-cycle::before { content: "["; color: var(--border-main); }
.theme-cycle::after { content: "]"; color: var(--border-main); }
.theme-cycle:hover { color: var(--text-dark); background: var(--panel-bg-hover); }
.theme-cycle:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; }
.utilities .theme-cycle{margin-left:12px;align-self:center}
.sim-bar .theme-cycle{margin-left:12px;font-size:9px;padding:2px 6px;vertical-align:middle}

/* Labs site + kit aliases: hardcoded light literals mapped to theme tokens */
[data-theme] { --panel-solid: var(--panel-bg-solid); --panel: var(--panel-bg); --bg: var(--bg-color); --grid: var(--grid-color); --text: var(--text-dark); --muted: var(--text-muted); --border: var(--border-main); }
[data-theme="dark"] .topbar { background: color-mix(in srgb, var(--panel-bg-solid) 96%, transparent); }
[data-theme="dark"] body { background-color: var(--bg-color); }
[data-theme="dark"] .form-group input, [data-theme="dark"] .form-group select, [data-theme="dark"] .form-group textarea,
[data-theme="dark"] .form-control { background: var(--surface-input); color: var(--text-dark); }
[data-theme="dark"] .form-group input:focus, [data-theme="dark"] .form-group select:focus, [data-theme="dark"] .form-group textarea:focus,
[data-theme="dark"] .form-control:focus { background: var(--surface-input-focus); }
[data-theme="dark"] .btn-primary:hover, [data-theme="dark"] .btn-primary:hover::before, [data-theme="dark"] .btn-primary:hover::after { color: var(--ink-on-accent); }
[data-theme="dark"] .visual-ph { background: linear-gradient(var(--grid-color) 1px, transparent 1px), linear-gradient(90deg, var(--grid-color) 1px, transparent 1px), var(--surface-pane); background-size: 20px 20px, 20px 20px, auto; }
[data-theme="dark"] .section { background: var(--surface-pane); }
[data-theme="dark"] .ambient-scanner-h, [data-theme="dark"] .ambient-scanner-v { opacity: .6; }