/* =======================================================================
   DESIGN TOKENS — Single source of truth for CyberAI design system
   Loaded before all other CSS files.
   ======================================================================= */
:root {
  /* ── Blue-Orange Identity ─────────────────────────────────────────── */
  --blue-900: #062237;
  --blue-800: #09324b;
  --blue-700: #0c3f61;
  --blue-600: #13517a;
  --orange-500: #ff8a00;
  --orange-600: #ff6b00;
  --accent: #37c0ff;
  --cyan-accent: var(--accent);  /* alias for legacy refs */

  /* ── Gradients ────────────────────────────────────────────────────── */
  --nav-grad: linear-gradient(120deg, #f99f36 0%, #f7a94f 14%, #1c8dee 48%, #23c4ff 68%, #f08d29 100%);
  --nav-grad-hover: linear-gradient(120deg, #ffb45c 0%, #ffa53a 18%, #23c4ff 50%, #1c8dee 68%, #f08d29 100%);
  --btn-grad: linear-gradient(135deg, #0b2a45 0%, #1383ff 45%, #23c4ff 100%);
  --btn-grad-hover: linear-gradient(135deg, #1383ff 0%, #23c4ff 55%, #45d7ff 100%);
  --grad-orange-blue: linear-gradient(135deg, var(--orange-500) 0%, var(--accent) 100%);
  --grad-blue-orange: linear-gradient(135deg, var(--accent) 0%, var(--orange-500) 100%);

  /* ── Surfaces & Backgrounds ───────────────────────────────────────── */
  --bg: linear-gradient(180deg, var(--blue-800), var(--blue-900));
  --surface: #0a2739;
  --panel: #0c2e44;
  --border: #1b4a63;
  --text: #eaf3f9;
  --muted: #a6c0d3;

  /* ── Shadows ──────────────────────────────────────────────────────── */
  --shadow-sm: 0 4px 12px rgba(0,0,0,.25);
  --shadow-md: 0 8px 24px rgba(0,0,0,.35);
  --shadow-lg: 0 10px 40px rgba(0,0,0,.5);
  --shadow-glow: 0 0 20px rgba(255,138,0,.3), 0 0 40px rgba(55,192,255,.2);
  --shadow: 0 10px 26px rgba(0,0,0,.35);
  --shadow-soft: 0 18px 50px rgba(0,0,0,.5);

  /* ── Spacing & Radius ─────────────────────────────────────────────── */
  --radius: 12px;
  --rad: 18px;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;

  /* ── Responsive Breakpoints ───────────────────────────────────────── */
  --bp-mobile-small: 480px;
  --bp-mobile-large: 768px;
  --bp-tablet: 1024px;
  --bp-desktop: 1280px;
  --bp-desktop-large: 1920px;

  /* ── Brand Scale (legacy compat) ──────────────────────────────────── */
  --brand-50: #eaf3f9;
  --brand-100: #a6c0d3;
  --brand-200: #13517a;
  --brand-300: #0c3f61;
  --brand-400: #ff8a00;
  --brand-500: #ff8a00;
  --brand-600: #37c0ff;
  --brand-700: #0c3f61;
  --brand-800: #09324b;
  --brand-900: #062237;

  /* ── Accent Scale ─────────────────────────────────────────────────── */
  --accent-50: #eaf3f9;
  --accent-100: #a6c0d3;
  --accent-200: #13517a;
  --accent-300: #0c3f61;
  --accent-400: #37c0ff;
  --accent-500: #37c0ff;
  --accent-600: #37c0ff;
  --accent-700: #0c3f61;
  --accent-800: #09324b;
  --accent-900: #062237;
  --accent-ghost: rgba(55,192,255,.1);

  /* ── Semantic Colors ──────────────────────────────────────────────── */
  --focus: #37c0ff;
  --ring: rgba(58,166,255,.45);
  --error: #ef4444;
  --success: #22c55e;

  /* ── Brand Tertiary (purple, used in footer + legal pages) ─────── */
  --brand-purple: #a855f7;
  --brand-purple-rgb: 168, 85, 247;
  --brand-cyan-rgb: 55, 192, 255;
  --brand-orange-rgb: 255, 138, 0;

  /* ── Icon Utilities ───────────────────────────────────────────────── */
  --icon-size: 20px;
  --icon-glow: 0 0 12px rgba(55,192,255,.3);
}