/* ==========================================================================
   Scanner Sentinel - Design Tokens
   Single source of truth: every other stylesheet consumes these variables.
   ========================================================================== */

:root {
  /* ---- Brand color primitives ---------------------------------------- */
  --navy-950: #060d1b;
  --navy-900: #0a1628;
  --navy-800: #0e1e38;
  --navy-700: #14284a;
  --navy-600: #1e3a63;

  /* Near-black canvas used only by the "Monitoring Layers" section */
  --ink-950: #04070e;
  --ink-900: #070b14;
  --ink-800: #0b1220;

  --green-300: #6ee7a0;
  --green-400: #4ade80;
  --green-500: #22c55e;
  --green-600: #16a34a;
  --green-glow: rgba(34, 197, 94, 0.35);

  --blue-300: #93c5fd;
  --blue-400: #60a5fa;
  --blue-500: #3b82f6;
  --blue-600: #2563eb;
  --blue-glow: rgba(59, 130, 246, 0.3);

  --white: #ffffff;
  --paper-50: #f6f8fb;
  --paper-100: #ecf0f6;
  --paper-200: #dde3ec;

  --slate-700: #44546b;
  --slate-600: #5b6b82;
  --slate-400: #8a99ad;
  --slate-300: #aab7c8;
  --slate-200: #c9d2e0;

  --severity-critical: #ef4444;
  --severity-critical-soft: rgba(239, 68, 68, 0.14);
  --severity-warning: #f59e0b;
  --severity-warning-soft: rgba(245, 158, 11, 0.14);
  --severity-normal: #22c55e;
  --severity-normal-soft: rgba(34, 197, 94, 0.14);

  /* ---- Semantic tokens ------------------------------------------------ */
  --bg-canvas-dark: var(--navy-900);
  --bg-canvas-darker: var(--ink-900);
  --bg-canvas-light: var(--white);
  --bg-canvas-paper: var(--paper-50);

  --bg-surface-on-dark: rgba(255, 255, 255, 0.04);
  --bg-surface-on-darker: rgba(255, 255, 255, 0.03);
  --bg-surface-on-light: var(--white);

  --text-on-dark-primary: #f4f7fb;
  --text-on-dark-secondary: var(--slate-200);
  --text-on-dark-muted: var(--slate-400);
  --text-on-light-primary: var(--navy-900);
  --text-on-light-secondary: var(--slate-600);

  --border-on-dark: rgba(255, 255, 255, 0.09);
  --border-on-darker: rgba(96, 165, 250, 0.22);
  --border-on-light: var(--paper-200);

  --accent-primary: var(--green-500);
  --accent-primary-strong: var(--green-400);
  --accent-primary-deep: var(--green-600);
  --accent-secondary: var(--blue-500);
  --accent-secondary-strong: var(--blue-400);

  /* ---- Spacing (4px base) --------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  --section-pad-y: clamp(var(--space-8), 9vw, var(--space-10));
  --container-max: 76rem;
  --container-pad-x: clamp(1.25rem, 5vw, 3rem);

  /* ---- Typography ------------------------------------------------------ */
  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", Consolas, "Courier New", monospace;

  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  --fs-xl: clamp(1.6rem, 1.35rem + 1vw, 2.1rem);
  --fs-2xl: clamp(2rem, 1.55rem + 2vw, 3rem);
  --fs-3xl: clamp(2.5rem, 1.9rem + 2.9vw, 4.1rem);

  --lh-tight: 1.08;
  --lh-snug: 1.3;
  --lh-normal: 1.65;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --ls-caps: 0.14em;
  --ls-display: -0.02em;

  /* ---- Shape / elevation ---------------------------------------------- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  --shadow-card: 0 10px 34px rgba(10, 22, 40, 0.1);
  --shadow-card-hover: 0 18px 44px rgba(10, 22, 40, 0.16);
  --shadow-card-dark: 0 14px 40px rgba(0, 0, 0, 0.4);
  --shadow-glow-blue: 0 0 0 1px var(--border-on-darker), 0 0 30px rgba(59, 130, 246, 0.12);
  --shadow-glow-blue-hover: 0 0 0 1px rgba(96, 165, 250, 0.55), 0 6px 44px rgba(59, 130, 246, 0.28);
  --shadow-glow-green: 0 0 24px var(--green-glow);

  /* ---- Motion ----------------------------------------------------------- */
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 160ms;
  --duration-base: 380ms;
  --duration-slow: 700ms;
  --reveal-distance: 28px;

  /* Synced from JS to the real header height (nav.js) */
  --header-height: 76px;
}