/* Prose/UI typeface — a warm humanist grotesque, deliberately NOT one of the
 * AI-monoculture fonts (Inter/Geist/…). Data stays monospace (see --cb-font-mono).
 * @import must lead the file; the system stack is the offline fallback. */
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap');

/* Circuit Bench — shared design tokens (one authored system for all surfaces).
 *
 * Before this file the launcher, the 3D-bench chrome, and the two 2D editors each
 * carried their own near-black palette, button look, radius, and accent — four
 * themes that had drifted apart. This is the single source of truth: every surface
 * links it (home.html, schematic.html, pcb.html link it directly; the bench pages
 * get it via styles.css `@import`). Per-surface code only ever overrides
 * `--cb-accent` to its own lab colour, so a learner's familiarity carries from one
 * tool to the next while each lab keeps its identity hue.
 *
 * No build step — plain CSS custom properties + two utility recipes (.cb-btn,
 * .cb-row) that replace the per-file button and the banned side-stripe status row.
 */

:root {
  /* Background ramp (deepest → raised surfaces) */
  --cb-bg-0: #0b0e13;   /* page / canvas base   */
  --cb-bg-1: #11161c;   /* bars, panels         */
  --cb-bg-2: #1a212b;   /* controls, raised      */
  --cb-line: #2a3340;   /* hairline borders      */

  /* Text — muted is tuned to clear 4.5:1 on bg-0/1 (verified) */
  --cb-ink: #e6eaf0;
  --cb-ink-2: #cdd3dc;  /* secondary, still ≥7:1 */
  --cb-muted: #9aa6b4;  /* tertiary labels, ≥4.5:1 on bg-0 */

  /* Accent — the ONE thing a surface overrides to its lab hue. */
  --cb-accent: #2dd4ff;
  --cb-accent-ink: #06121a;                 /* text/icon sitting ON the accent  */
  --cb-accent-soft: color-mix(in srgb, var(--cb-accent) 16%, transparent);
  --cb-accent-line: color-mix(in srgb, var(--cb-accent) 55%, transparent);

  /* Semantic status (shared by Diagnose / ERC / DRC) */
  --cb-ok: #3ad07a;
  --cb-warn: #e0a544;
  --cb-err: #ff5a3c;
  --cb-info: #2dd4ff;

  /* Radius scale — cards 12–16, controls 8, pills full */
  --cb-r-card: 13px;
  --cb-r-ctrl: 8px;
  --cb-r-pill: 999px;

  /* Two-font system on a contrast axis: a humanist sans carries all prose, UI
     labels and headings; monospace is reserved for DATA (readouts, live values,
     netlists, the Gerber preview, pin symbols) where alignment + the "instrument"
     feel earn it. */
  --cb-font-ui: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --cb-font-mono: ui-monospace, "Cascadia Mono", "Consolas", monospace;
}

/* ---- Button: one recipe for every tool's toolbar/palette ---- */
.cb-btn {
  background: var(--cb-bg-2);
  color: var(--cb-ink-2);
  border: 1px solid var(--cb-line);
  border-radius: var(--cb-r-ctrl);
  padding: 5px 9px;
  cursor: pointer;
  font: inherit;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.cb-btn:hover { border-color: var(--cb-accent); }
.cb-btn:focus-visible { outline: 2px solid var(--cb-accent); outline-offset: 2px; }
.cb-btn.active {
  background: var(--cb-accent-soft);
  border-color: var(--cb-accent);
  color: var(--cb-ink);
}

/* ---- Status row: replaces the banned colored side-stripe everywhere ----
 * A flat row with a leading status GLYPH (shape, not just hue → colour-blind safe)
 * and a subtle full-tint background. Used by Diagnose, ERC and DRC. */
.cb-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 7px 10px;
  border-radius: var(--cb-r-ctrl);
  border: 1px solid var(--cb-line);
  background: var(--cb-bg-1);
}
.cb-row .cb-row-ic { flex: 0 0 auto; line-height: 1.45; }
.cb-row--ok   { background: color-mix(in srgb, var(--cb-ok)   12%, var(--cb-bg-1)); border-color: color-mix(in srgb, var(--cb-ok)   40%, var(--cb-line)); }
.cb-row--warn { background: color-mix(in srgb, var(--cb-warn) 12%, var(--cb-bg-1)); border-color: color-mix(in srgb, var(--cb-warn) 40%, var(--cb-line)); }
.cb-row--err  { background: color-mix(in srgb, var(--cb-err)  13%, var(--cb-bg-1)); border-color: color-mix(in srgb, var(--cb-err)  45%, var(--cb-line)); }
.cb-row--info { background: color-mix(in srgb, var(--cb-info) 12%, var(--cb-bg-1)); border-color: color-mix(in srgb, var(--cb-info) 40%, var(--cb-line)); }

/* Screen-reader-only helper (used to caption canvases for assistive tech). */
.cb-sr-only {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}