/* FX Demo — Operational Dashboard design tokens (Phase 6, authored FRESH; Q-50/SWE-244/260).
 *
 * A governed "control-room" identity authored from scratch for the governed web/ tier —
 * NOT copied from the ungoverned ux/ spike (Q-50: reference only, build fresh). The visual
 * language (dark graphite surfaces, electric accents, monospace numerals, glass + depth,
 * restrained motion) is reused by hand; the data model is re-grounded to the Phase 5 baseline.
 *
 * Typography (WP-11.3 / ADR-0025): Inter (UI) + JetBrains Mono (numerals) are SELF-HOSTED under
 * /vendor/fonts/ (woff2, latin) — vendored + SHA-256-pinned by scripts/web/vendorAssets.sh,
 * served from `self` under CSP font-src 'self'. NO CDN, NO @import of remote fonts
 * (fonts.googleapis.com is forbidden — ADR-0022 §1). System stacks remain the fallback.
 *
 * Traceability: SWE-244/260; ADR-0021 §6; ADR-0022; ADR-0025; Dashboard Catalogue §3.
 */

/* --- Self-hosted typefaces (relative /vendor/fonts/ — never a CDN) --- */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/vendor/fonts/inter-latin-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/vendor/fonts/inter-latin-600.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/vendor/fonts/inter-latin-700.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("/vendor/fonts/inter-latin-800.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/vendor/fonts/jetbrains-mono-latin-400.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/vendor/fonts/jetbrains-mono-latin-500.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/vendor/fonts/jetbrains-mono-latin-600.woff2") format("woff2"); }

:root {
  /* Surfaces — graphite control room (deepened ramp for layering) */
  --fx-bg: #080b11;
  --fx-bg-deep: #05070b;
  --fx-surface: #0e131c;
  --fx-surface-2: #141c27;
  --fx-surface-3: #1a2433;
  --fx-line: #233040;
  --fx-line-soft: #1a2430;
  --fx-border: #283449;

  /* Text */
  --fx-text: #e8eef6;
  --fx-text-dim: #9fb0c0;
  --fx-text-faint: #6b7c8c;

  /* Accents (electric set) */
  --fx-cyan: #38e1ff;
  --fx-emerald: #3ee6a0;
  --fx-violet: #b08cff;
  --fx-amber: #ffce4d;
  --fx-sapphire: #5b8cff;
  --fx-rose: #ff6b8b;

  /* Semantic */
  --fx-ok: var(--fx-emerald);
  --fx-warn: var(--fx-amber);
  --fx-error: var(--fx-rose);
  --fx-accent: var(--fx-cyan);

  /* Finishes — depth, glow, glass, grid (the "premium" vocabulary) */
  --fx-shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.7);
  --fx-shadow-lg: 0 2px 6px rgba(0,0,0,.45), 0 28px 60px -28px rgba(0,0,0,.85);
  --fx-glow: 0 0 0 1px rgba(56,225,255,.22), 0 0 22px -6px rgba(56,225,255,.35);
  --fx-glass-bg: rgba(16, 22, 33, .62);
  --fx-glass-border: rgba(120, 150, 190, .14);
  --fx-grid: rgba(120, 150, 190, .045);

  /* Gradients */
  --fx-grad-accent: linear-gradient(90deg, var(--fx-sapphire), var(--fx-cyan));
  --fx-grad-text: linear-gradient(92deg, #cfeffc 0%, var(--fx-cyan) 55%, var(--fx-sapphire) 100%);
  --fx-grad-panel: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0) 60%);

  /* Typography */
  --fx-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fx-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;

  /* Geometry */
  --fx-radius: 12px;
  --fx-radius-sm: 7px;
  --fx-gap: 16px;
  --fx-sidebar-w: 256px;

  /* Motion (restrained) */
  --fx-motion: 160ms ease;
}

[data-theme="light"] {
  --fx-bg: #f3f6fa;
  --fx-bg-deep: #eaeef4;
  --fx-surface: #ffffff;
  --fx-surface-2: #eef2f7;
  --fx-surface-3: #e4ebf3;
  --fx-line: #d4deea;
  --fx-line-soft: #e4ebf3;
  --fx-border: #cbd4e1;
  --fx-text: #14202c;
  --fx-text-dim: #44586a;
  --fx-text-faint: #7d8fa0;
  --fx-accent: #0a84c2;
  --fx-shadow: 0 1px 2px rgba(30,50,90,.08), 0 10px 28px -16px rgba(30,50,90,.30);
  --fx-shadow-lg: 0 2px 6px rgba(30,50,90,.10), 0 26px 56px -28px rgba(30,50,90,.35);
  --fx-glow: 0 0 0 1px rgba(10,132,194,.22), 0 0 18px -6px rgba(10,132,194,.25);
  --fx-glass-bg: rgba(255,255,255,.72);
  --fx-glass-border: rgba(40,70,120,.12);
  --fx-grid: rgba(40,70,120,.05);
  --fx-grad-text: linear-gradient(92deg, #0d3b52 0%, #0a84c2 60%, #2563eb 100%);
}