/* ============================================================
   variables.css — design tokens
   Style Route C: AI Risk Intelligence
   ------------------------------------------------------------
   All page-level values must reference tokens defined here.
   To swap to Route A/B/D/E, only this file changes.
   ============================================================ */

:root {
  /* --- Colour: background ---------------------------------- */
  --color-bg-primary:    #020817; /* near-black canvas */
  --color-bg-surface:    #0f172a; /* alternating section */
  --color-bg-elevated:   #1e293b; /* cards, panels */
  --color-bg-card:       #0f172a; /* capability cards */

  /* --- Colour: text ---------------------------------------- */
  --color-text-primary:   #e2e8f0;
  --color-text-secondary: #94a3b8;
  --color-text-muted:     #64748b;

  /* --- Colour: accent -------------------------------------- */
  --color-accent-primary:   #38bdf8; /* sky blue */
  --color-accent-secondary: #818cf8; /* soft indigo */
  --color-accent-deep:      #0284c7; /* darker sky for gradients */
  --color-accent-trust:     #22c55e; /* live/operational green */
  --color-accent-glow:      rgba(56, 189, 248, 0.12);

  /* --- Colour: borders ------------------------------------- */
  --color-border:         rgba(56, 189, 248, 0.15);
  --color-border-subtle:  rgba(56, 189, 248, 0.08);
  --color-border-strong:  rgba(56, 189, 248, 0.30);

  /* --- Colour: status -------------------------------------- */
  --color-status-live-bg:     rgba(34, 197, 94, 0.10);
  --color-status-live-border: rgba(34, 197, 94, 0.25);
  --color-status-muted-bg:    rgba(100, 116, 139, 0.10);
  --color-status-muted-border:rgba(100, 116, 139, 0.20);

  /* --- Typography ------------------------------------------ */
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Monaco, Menlo, Consolas, monospace;

  --fs-h1:      clamp(2.4rem, 5vw,   3.8rem);
  --fs-h2:      clamp(1.8rem, 3.5vw, 2.6rem);
  --fs-h3:      1.15rem;
  --fs-h4:      1rem;
  --fs-body:    1rem;
  --fs-small:   0.875rem;
  --fs-xs:      0.78rem;
  --fs-eyebrow: 0.65rem;
  --fs-cta:     clamp(1.7rem, 3.5vw, 2.5rem);

  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extra:    800;

  --lh-tight: 1.1;
  --lh-snug:  1.35;
  --lh-base:  1.6;
  --lh-loose: 1.75;

  --ls-tight: -0.02em;
  --ls-snug:  -0.01em;
  --ls-wide:  0.08em;
  --ls-wider: 0.15em;

  /* --- Spacing scale --------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* --- Radii ----------------------------------------------- */
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  20px;
  --radius-pill: 999px;

  /* --- Shadows / glow -------------------------------------- */
  --shadow-glow:        0 0 20px rgba(56, 189, 248, 0.10);
  --shadow-glow-strong: 0 0 24px rgba(56, 189, 248, 0.18);

  /* --- Transitions ----------------------------------------- */
  --t-fast: 0.15s ease;
  --t-base: 0.20s ease;
  --t-slow: 0.25s ease;

  /* --- Layout ---------------------------------------------- */
  --container-max:  1180px;
  --container-pad:  24px;

  --section-pad-lg: 96px;
  --section-pad-md: 64px;
  --section-pad-sm: 48px;

  /* --- Z-index --------------------------------------------- */
  --z-skip:    9999;
  --z-header:  100;
  --z-overlay: 500;

  /* --- Breakpoints (for documentation only) ---------------
     Used in responsive.css via @media queries.
     sm: 480  | md: 768  | lg: 1024 | xl: 1280
     nav-collapse: 1024  (header switches to hamburger)
     -------------------------------------------------------- */
}