/* theme.css — Veriweld brand system (dark mode)
   Locked 2026-04-18 per Inspection automation 2.0/brand/BRAND_SYSTEM.md
   ─────────────────────────────────────────────────────────────────────
   Three fonts (Archivo/Inter Tight/JetBrains Mono), ink/paper/blueprint/arc palette,
   2px border radius, dark-mode surfaces. Legacy --bg/--text/--accent tokens are
   preserved as aliases so existing markup re-skins automatically. */

*{margin:0;padding:0;box-sizing:border-box}

:root{
  /* ── Brand tokens (primary) ── */
  --ink:#0E1116;
  --ink-2:#14171C;
  --ink-3:#1C2128;
  --paper:#F4F3EE;
  --paper-2:#ECEAE1;
  --white:#FDFDFB;
  --mist:#A8B0BD;
  --steel:#6B7280;
  --graphite:#3A4250;

  /* Dark-mode borders (brand spec: #262A31 default, #333841 stronger) */
  --border:#262A31;
  --border-2:#333841;

  /* Blueprint (primary accent) */
  --bp-50:#E7EEF6;
  --bp-200:#9DB5D0;
  --blueprint:#1B4F8C;
  --bp-800:#123963;
  --bp-900:#0B243E;

  /* Arc (alerts, rework) */
  --arc-50:#FFEAD8;
  --arc-200:#FFB286;
  --arc:#FF5A1F;
  --arc-700:#C63E10;
  --arc-900:#7A2708;
  --arc-dark:#FF9E7A;         /* brightened arc for text on dark surfaces */

  /* Semantic / hi-vis */
  --success:#1E8E3E;
  --success-dark:#3FB55F;     /* brightened success for text on dark */
  --hivis:#F2C200;
  --copper:#B7733A;

  /* Radii (brand lock: 2px) */
  --radius:2px;
  --radius-lg:2px;

  /* Fonts */
  --font:'Inter Tight',system-ui,sans-serif;
  --font-display:'Archivo','Inter Tight',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;

  /* ── Legacy aliases (map old token names onto brand tokens) ── */
  --bg:var(--ink);
  --bg2:var(--ink-2);
  --bg3:var(--ink-3);
  --bg4:var(--border);

  --text:var(--paper);
  --text2:var(--mist);
  --text3:var(--mist);

  --accent:var(--blueprint);
  --accent2:var(--bp-200);
  --accent-bg:rgba(27,79,140,.18);

  --red:var(--arc-dark);
  --red-bg:rgba(255,90,31,.14);
  --red-border:rgba(255,90,31,.35);

  --amber:var(--hivis);
  --amber-bg:rgba(242,194,0,.14);
  --amber-border:rgba(242,194,0,.35);

  --green:var(--success-dark);
  --green-bg:rgba(63,181,95,.14);
  --green-border:rgba(63,181,95,.35);

  --cyan:#4DD0E1;
  --purple:#C084FC;
}

html,body{height:100%}
body{font-family:var(--font);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}

/* Utility classes */
.mono{font-family:var(--mono)}
.display{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em}
.muted{color:var(--text3)}
.truncate{max-width:280px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Brand chrome primitives — use anywhere that needs the engineering-drafting treatment */
.vw-kicker{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mist);display:inline-flex;gap:10px;align-items:center}
.vw-kicker::before{content:"";width:18px;height:1px;background:currentColor}
.vw-kicker .num{color:var(--bp-200);font-weight:600}

.vw-frame{position:relative}
.vw-frame::before,.vw-frame::after,.vw-frame>.vw-tick-bl,.vw-frame>.vw-tick-br{content:"";position:absolute;width:8px;height:8px;border:1px solid var(--mist);opacity:.5;pointer-events:none}
.vw-frame::before{top:-1px;left:-1px;border-right:none;border-bottom:none}
.vw-frame::after{top:-1px;right:-1px;border-left:none;border-bottom:none}
.vw-frame>.vw-tick-bl{bottom:-1px;left:-1px;border-right:none;border-top:none}
.vw-frame>.vw-tick-br{bottom:-1px;right:-1px;border-left:none;border-top:none}

.vw-sheet-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,auto));gap:28px;justify-content:start;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--mist);padding:10px 14px;border:1px solid var(--border);border-radius:var(--radius);background:var(--ink-2)}
.vw-sheet-meta .cell{display:flex;flex-direction:column;gap:2px}
.vw-sheet-meta .lbl{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--mist)}
.vw-sheet-meta .val{color:var(--paper);font-weight:500;font-size:11px}

/* Scrollbar */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:var(--radius)}
::-webkit-scrollbar-thumb:hover{background:var(--border-2)}
