/* ============================================================================
   Piping QC Tool — Design Tokens (FIXED BASE + REAL DARK MODE)
   Concept A · Lightened-navy variant for light, slate palette for dark.
   ----------------------------------------------------------------------------
   Replaces the broken self-referential :root block that was in index.html
   (lines ~12–32) and supersedes the old tokens.css.

   Load order: tokens.css  →  index.html inline <style>  →  theme-dark.css
   ========================================================================= */

/* Inter — self-hosted (SPEC-3.13 A10 follow-up: close the external Google-Fonts
   dependency the D1 JS vendoring missed; the D14 CSP style-src/font-src 'self' blocked
   the old remote web-font load, which silently fell back to system fonts in prod).
   Google Fonts serves Inter v20 as a VARIABLE font, so ONE woff2 per subset covers the
   whole 400-700 weight axis. Provenance (SHA-384 + source URL) is in vendor/MANIFEST.md.
   latin covers English + Western-European accents; latin-ext adds Central/Eastern-European
   name glyphs (Polish/Czech/Turkish welders etc.). Paths are relative to this file
   (assets/css/ -> assets/fonts/), same-origin under the CSP — no build step. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Light theme (default) ────────────────────────────────────────────── */
:root,
html.theme-light {
  /* Brand & accents */
  --accent:        #2563eb;
  --accent-hi:     #1d4ed8;
  --accent-soft:   #dbeafe;
  --accent-ring:   rgba(37, 99, 235, 0.22);
  --accent-rgb:    37, 99, 235;        /* for legacy rgba() usage */
  --pc-selected:   #2563eb;            /* selection / active marker (brand blue). SPEC-2.81 (ISO Canvas) re-pointed this from the legacy pink-red #e94560 to the brand blue: pink-red read as an error/alarm state, misleading for "this is selected". Still the single source of truth for selection/active chrome on the CAD canvas (read once via the PC_SELECTED const in index.html). Theme-stable: see theme-dark.css mirror — the CAD canvas/world layer is always dark, so this must NOT flip per theme. SPEC-2.70 introduced the token; SPEC-2.81 changed its value. */

  /* Sidebar / brand chrome (lightened mid-navy) */
  --pc-navy:       #3a5a84;
  --pc-navy-hi:    #4a6d9c;
  --pc-navy-lo:    #2f4a6d;
  --pc-navy-text:  #ffffff;
  --pc-navy-mu:    #c7d3e3;
  --pc-navy-di:    #8fa3bf;
  --pc-navy-border:#2f4a6d;
  --pc-pack-blue:  #7eb1ff;            /* SPEC-2.83: on-navy brand blue — BRAND.md */

  /* Safety / construction accent (used SPARINGLY) */
  --pc-safety:     #f97316;
  --orange:        #f97316;            /* legacy alias                 */

  /* Surfaces */
  --pc-surface:    #ffffff;
  --pc-body:       #f6f7f9;
  --pc-sunken:     #eef1f5;
  --pc-canvas:     var(--pc-sunken);  /* SPEC-2.61 drawing-canvas backdrop: light = sunken surface */
  --pc-hover:      #f1f5fb;

  /* SPEC-2.63 — registry table definition (three-level stack: header > zebra > plain row) */
  --pc-table-header: #e2e8f0;  /* header band — one step darker than --pc-sunken (#eef1f5) */
  --pc-table-zebra:  #e9edf2;  /* even-row stripe — lighter than the header band, above white rows. SPEC-2.86: was #f4f6f9 (~1.05:1, invisible); retuned for visible light-mode striping. Dark rebind below untouched. */

  /* Text */
  --pc-text:       #1a2332;
  --pc-text-mu:    #4a5568;
  --pc-text-di:    #647084;   /* SPEC-2.65 — was #8291a8 (~3.2:1); now ~5.0:1 on #ffffff (AA pass) */
  --ink-soft:      #6b7688;   /* SPEC-2.87 — recessive canvas ink for insulation traces (light). Package-pinned: docs/iso-tidy mock-styles.css. Theme-aware (dark mirror below). */
  --pc-link:       var(--accent);

  /* Borders */
  --pc-border:     #e5e9ef;
  --pc-border-s:   #eef1f5;
  --pc-border-st:  #cfd6e0;

  /* Status */
  --success:       #10b981;
  --success-soft:  #d1fae5;
  --success-text:  #047857;
  --warning:       #f59e0b;
  --warning-soft:  #fef3c7;
  --warning-text:  #b45309;
  --danger:        #ef4444;
  --danger-soft:   #fee2e2;
  --danger-text:   #b91c1c;
  --info:          #0ea5e9;
  --info-soft:     #e0f2fe;
  --info-text:     #0369a1;

  /* Focus ring */
  --pc-focus:      var(--accent-ring);

  /* SPEC-2.68 — ITP "Concept 2" data-grid token set (light). Components reference var(--itp-*)
     ONLY (zero hex in the ITP component CSS). Copied verbatim from ITP-Concept2-Build-Spec.md §1.
     Light is the default; the dark block below rebinds every token on html.theme-dark. */
  --itp-body:#f6f7f9;   --itp-surface:#ffffff;  --itp-surface-hi:#fbfcfe;
  --itp-sunken:#eef1f5; --itp-band:#f4f6fa;
  --itp-text:#1a2332;   --itp-text-mu:#4a5568;  --itp-text-di:#8291a8;
  --itp-border:#e5e9ef; --itp-border-hi:#dbe1ea; --itp-border-solid:#e5e9ef;
  --itp-accent:#2563eb; --itp-accent-hi:#1d4ed8; --itp-accent-soft:rgba(37,99,235,0.08);
  --itp-H:#dc2626; --itp-W:#d97706; --itp-R:#2563eb;
  --itp-H-soft:rgba(220,38,38,0.09); --itp-W-soft:rgba(217,119,6,0.10); --itp-R-soft:rgba(37,99,235,0.08);
  --itp-ok:#059669;    --itp-ok-soft:rgba(5,150,105,0.10);
  --itp-bad:#dc2626;   --itp-bad-soft:rgba(220,38,38,0.09);
  --itp-warn:#d97706;  --itp-warn-soft:rgba(217,119,6,0.10);
  --itp-muted:#8291a8; --itp-muted-soft:rgba(130,145,168,0.14);
  /* SPEC-2.84 D3 — --pc-field-hint replaces --itp-field-hint (one app-wide
     frameless-field resting-underline token, package-pinned value, both themes). */
  --pc-field-hint:rgba(100,112,132,0.45);
  --itp-shadow:0 16px 44px rgba(20,30,55,0.10);

  /* Legacy aliases (kept so existing var() references don't break) */
  --bg-body:       var(--pc-body);
  --bg-nav:        var(--pc-navy);
  --bg-surface:    var(--pc-surface);
  --bg-input:      var(--pc-surface);
  --bg-input-deep: var(--pc-sunken);
  --bg-hover:      var(--pc-hover);
  --border-subtle: var(--pc-border-s);
  --border-main:   var(--pc-border);
  --text-primary:  var(--pc-text);
  --text-secondary:var(--pc-text-mu);
  --text-muted:    var(--pc-text-di);
  --text-dim:      var(--pc-text-di);
  --text-faint:    var(--pc-text-di);
  --purple:        #ffffff;
  --purple-bg:     var(--accent);

  /* SPEC-2.13b — sidebar wordmark split colours */
  --pc-text-on-navy-strong: #ffffff;   /* "MDR" — white on navy sidebar */
  --pc-text-on-navy-soft:   #7eb1ff;   /* "pack" — soft blue on navy    */

  /* Typography */
  --font-sans:     'Inter', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --font-mono:     ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --fs-xs:         11px;
  --fs-sm:         12px;
  --fs-base:       13px;
  --fs-md:         14px;
  --fs-lg:         16px;
  --fs-xl:         20px;
  --fs-2xl:        24px;
  --fw-regular:    400;
  --fw-medium:     500;
  --fw-semibold:   600;
  --fw-bold:       700;
  --lh-tight:      1.25;
  --lh-normal:     1.5;

  /* Spacing (4px grid) */
  --sp-1:   4px;  --sp-2:   8px;  --sp-3:  12px;  --sp-4:  16px;
  --sp-5:  20px;  --sp-6:  24px;  --sp-8:  32px;  --sp-10: 40px;  --sp-12: 48px;

  /* Radius */
  --r-sm:  4px;   --r-md:  6px;   --r-lg:  8px;   --r-xl: 12px;

  /* Shadows */
  --sh-1: 0 1px 2px rgba(15, 23, 42, 0.07), 0 1px 1px rgba(15, 23, 42, 0.05);  /* SPEC-2.65 — alphas lifted from 0.04/0.03 so white surfaces read off the page (two-layer structure kept) */
  --sh-2: 0 1px 3px rgba(15, 23, 42, 0.06), 0 4px 12px rgba(15, 23, 42, 0.04);
  --sh-3: 0 4px 16px rgba(15, 23, 42, 0.08), 0 12px 32px rgba(15, 23, 42, 0.06);

  /* Density */
  --row-h:        36px;
  --row-h-tight:  30px;
  --input-h:      32px;
  --btn-h:        32px;
  --btn-h-lg:     36px;
}

/* ── Dark theme (proposed slate palette — signed off) ─────────────────── */
html.theme-dark,
html[data-theme="dark"] {
  /* Brand & accents — accent shifts up one step for dark */
  --accent:        #3b82f6;
  --accent-hi:     #60a5fa;
  --accent-soft:   rgba(59, 130, 246, 0.18);
  --accent-ring:   rgba(96, 165, 250, 0.32);
  --accent-rgb:    59, 130, 246;

  /* Sidebar / brand chrome — slate, NOT navy.
     Navy stays as a light-mode-only brand statement. */
  --pc-navy:       #131b2c;
  --pc-navy-hi:    #1c263c;
  --pc-navy-lo:    #0d1320;
  --pc-navy-text:  #e2e8f0;
  --pc-navy-mu:    #94a3b8;
  --pc-navy-di:    #64748b;
  --pc-navy-border:#1f2a40;
  --pc-pack-blue:  #7eb1ff;            /* SPEC-2.83: on-navy brand blue — same value both themes */

  /* Safety — slightly lifted so the active-row stripe still pops on slate */
  --pc-safety:     #fb923c;
  --orange:        #fb923c;

  /* Surfaces — three-step hierarchy: body < surface < hover */
  --pc-surface:    #131b2c;   /* cards, modals, table rows                  */
  --pc-body:       #0b1220;   /* page background                            */
  --pc-sunken:     #0f1726;   /* table headers, status bar, inset           */
  --pc-canvas:     #0f1726;   /* SPEC-2.61 drawing-canvas backdrop: dark slate */
  --pc-hover:      #1c263c;   /* row hover, search bg                       */

  /* SPEC-2.63 — registry table definition (header lifts above rows; zebra sits below hover) */
  --pc-table-header: #1a2336;  /* header band — one step lighter than --pc-sunken (#0f1726) */
  --pc-table-zebra:  #171f30;  /* even-row stripe — between --pc-surface and --pc-hover */

  /* Text */
  --pc-text:       #e2e8f0;
  --pc-text-mu:    #94a3b8;
  --pc-text-di:    #7c8ba3;   /* SPEC-2.65 — was #64748b (~3.8:1); now ~5.0:1 on #131b2c surface (AA pass) */
  --ink-soft:      #8c9bb4;   /* SPEC-2.87 — recessive canvas ink for insulation traces (dark). Package-pinned: docs/iso-tidy mock-styles.css. */
  --pc-link:       var(--accent-hi);

  /* Borders */
  --pc-border:     #243049;
  --pc-border-s:   #1c263c;
  --pc-border-st:  #2d3a52;

  /* Status — translucent backgrounds + bright text for dark surfaces */
  --success:       #10b981;
  --success-soft:  rgba(16, 185, 129, 0.18);
  --success-text:  #34d399;
  --warning:       #f59e0b;
  --warning-soft:  rgba(245, 158, 11, 0.18);
  --warning-text:  #fbbf24;
  --danger:        #ef4444;
  --danger-soft:   rgba(239, 68, 68, 0.18);
  --danger-text:   #f87171;
  --info:          #0ea5e9;
  --info-soft:     rgba(14, 165, 233, 0.18);
  --info-text:     #38bdf8;

  /* Focus ring */
  --pc-focus:      var(--accent-ring);

  /* SPEC-2.68 — ITP "Concept 2" data-grid token set (dark). Bound to html.theme-dark per the
     integration envelope (toggleTheme() flips it). Verbatim from ITP-Concept2-Build-Spec.md §1. */
  --itp-body:#0a1626;   --itp-surface:#13233f;  --itp-surface-hi:#17284a;
  --itp-sunken:#0e1d35; --itp-band:#102746;
  --itp-text:#e7edf6;   --itp-text-mu:#9fb0c8;  --itp-text-di:#637691;
  --itp-border:rgba(99,118,145,0.22); --itp-border-hi:#36507e; --itp-border-solid:#28406a;
  --itp-accent:#5aa0ff; --itp-accent-hi:#7eb6ff; --itp-accent-soft:rgba(90,160,255,0.14);
  --itp-H:#ff5d76; --itp-W:#f0a93b; --itp-R:#5aa0ff;
  --itp-H-soft:rgba(255,93,118,0.15); --itp-W-soft:rgba(240,169,59,0.15); --itp-R-soft:rgba(90,160,255,0.14);
  --itp-ok:#34d399;    --itp-ok-soft:rgba(52,211,153,0.15);
  --itp-bad:#ff5d76;   --itp-bad-soft:rgba(255,93,118,0.15);
  --itp-warn:#f0a93b;  --itp-warn-soft:rgba(240,169,59,0.15);
  --itp-muted:#637691; --itp-muted-soft:rgba(99,118,145,0.16);
  /* SPEC-2.84 D3 — --pc-field-hint (package pins one value for both themes). */
  --pc-field-hint:rgba(100,112,132,0.45);
  --itp-shadow:0 18px 50px rgba(0,0,0,0.45);

  /* Legacy aliases re-bound to the dark surfaces */
  --bg-body:       var(--pc-body);
  --bg-nav:        var(--pc-navy);
  --bg-surface:    var(--pc-surface);
  --bg-input:      var(--pc-sunken);
  --bg-input-deep: var(--pc-body);
  --bg-hover:      var(--pc-hover);
  --border-subtle: var(--pc-border-s);
  --border-main:   var(--pc-border);
  --text-primary:  var(--pc-text);
  --text-secondary:var(--pc-text-mu);
  --text-muted:    var(--pc-text-di);
  --text-dim:      var(--pc-text-di);
  --text-faint:    var(--pc-text-di);
  --purple:        #ffffff;
  --purple-bg:     var(--accent);

  /* Shadows — heavier in dark so cards still lift off the body */
  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.40);
  --sh-2: 0 1px 3px rgba(0, 0, 0, 0.50), 0 4px 12px rgba(0, 0, 0, 0.30);
  --sh-3: 0 4px 16px rgba(0, 0, 0, 0.55), 0 12px 32px rgba(0, 0, 0, 0.40);
}