/**
 * ============================================================================
 * DESIGN SYSTEM TOKENS — Optimized & Modern
 * Investigation Theme: Cyberpunk Forensic & 2050.earth Telemetry Command Deck
 * Standard: Primitive → Semantic → Component
 * ============================================================================
 */

:root {
  /* ======================== PRIMITIVES ======================== */
  /* Colors - Neutral */
  --slate-950: #03060c;
  --slate-900: #070c18;
  --slate-850: #0c1424;
  --slate-800: #121c32;
  --slate-700: #223356;
  --slate-600: #334870;
  --slate-500: #64748b;
  --slate-400: #94a3b8;
  --slate-300: #cbd5e1;
  --slate-100: #f1f5f9;
  --white: #ffffff;

  /* Colors - Neon Hues */
  --cyan-neon: #00f2fe;
  --cyan-400: #22d3ee;
  --cyan-500: #06b6d4;
  --emerald-neon: #00ff88;
  --emerald-400: #34d399;
  --emerald-500: #10b981;
  --rose-neon: #ff007f;
  --rose-400: #fb7185;
  --crimson-neon: #ff0033;
  --crimson-400: #f87171;
  --amber-neon: #ffaa00;
  --amber-400: #fbbf24;
  --purple-neon: #9900ff;
  --purple-400: #a855f7;
  --violet-neon: #e056fd;
  --blue-neon: #1e90ff;
  --blue-500: #3b82f6;

  /* Fonts */
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Font Sizes */
  --text-2xs: 0.65rem;
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;

  /* Border Radius */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 9999px;

  /* Shadows */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);
  --shadow-elevated: 0 16px 36px rgba(0, 0, 0, 0.7);

  /* Glows */
  --glow-cyan: 0 0 20px rgba(0, 242, 254, 0.35);
  --glow-cyan-strong: 0 0 35px rgba(0, 242, 254, 0.55);
  --glow-emerald: 0 0 20px rgba(0, 255, 136, 0.35);
  --glow-rose: 0 0 20px rgba(255, 0, 127, 0.35);
  --glow-crimson: 0 0 25px rgba(255, 0, 51, 0.45);
  --glow-amber: 0 0 20px rgba(255, 170, 0, 0.35);

  /* ======================== SEMANTICS ======================== */
  /* Surfaces */
  --surface-canvas: var(--slate-950);
  --surface-panel: rgba(12, 20, 36, 0.92);
  --surface-card: rgba(15, 24, 44, 0.82);
  --surface-overlay: rgba(5, 9, 16, 0.85);

  /* Typography */
  --text-primary: var(--slate-100);
  --text-secondary: var(--slate-400);
  --text-muted: var(--slate-500);
  --text-accent: var(--cyan-neon);
  --text-success: var(--emerald-neon);
  --text-danger: var(--crimson-400);

  /* Borders */
  --border-subtle: rgba(0, 242, 254, 0.12);
  --border-default: rgba(0, 242, 254, 0.25);
  --border-strong: rgba(0, 242, 254, 0.5);

  /* Category Intent Colors */
  --intent-core: var(--cyan-neon);
  --intent-crypto: var(--rose-neon);
  --intent-judol: var(--crimson-neon);
  --intent-smokescreen: var(--purple-neon);
  --intent-laundering: var(--amber-neon);
  --intent-botnet: var(--violet-neon);
  --intent-media: var(--blue-neon);
  --intent-origin: var(--blue-500);
  --intent-passobis: var(--crimson-400);
  --intent-forensic: var(--emerald-neon);

  /* Risk Levels */
  --risk-critical-bg: rgba(255, 0, 51, 0.14);
  --risk-critical-border: rgba(255, 0, 51, 0.5);
  --risk-critical-text: #ff4d6d;
  --risk-critical-glow: var(--glow-crimson);

  --risk-high-bg: rgba(255, 0, 127, 0.14);
  --risk-high-border: rgba(255, 0, 127, 0.45);
  --risk-high-text: #ff66aa;

  --risk-medium-bg: rgba(255, 170, 0, 0.14);
  --risk-medium-border: rgba(255, 170, 0, 0.45);
  --risk-medium-text: #ffcc66;

  --risk-safe-bg: rgba(0, 255, 136, 0.12);
  --risk-safe-border: rgba(0, 255, 136, 0.45);
  --risk-safe-text: var(--emerald-neon);

  /* ======================== COMPONENTS ======================== */
  /* Header */
  --header-height: 72px;
  --header-bg: rgba(7, 12, 22, 0.92);

  /* Telemetry */
  --telemetry-bg: rgba(4, 7, 14, 0.96);
  --telemetry-border: rgba(0, 242, 254, 0.18);
  --telemetry-text-label: var(--slate-500);
  --telemetry-text-value: var(--cyan-400);

  /* HUD Corners */
  --hud-corner-color: var(--cyan-neon);
  --hud-corner-size: 16px;
  --hud-corner-thickness: 2px;

  /* Cards */
  --card-bg: var(--surface-card);
  --card-border: var(--border-subtle);
  --card-radius: var(--radius-md);
  --card-shadow: var(--shadow-md);

  /* Buttons */
  --btn-radius: var(--radius-sm);
  --btn-cyber-bg: rgba(0, 242, 254, 0.1);
  --btn-cyber-border: rgba(0, 242, 254, 0.25);
  --btn-cyber-text: var(--cyan-neon);
  --btn-cyber-hover-bg: var(--cyan-neon);
  --btn-cyber-hover-text: var(--slate-950);

  /* Inspector */
  --inspector-avatar-size: 72px;

  /* Table */
  --table-bg: rgba(10, 16, 28, 0.7);
  --table-border: rgba(255, 255, 255, 0.06);
  --table-header-bg: rgba(15, 24, 42, 0.9);
  --table-row-hover: rgba(0, 242, 254, 0.06);

  /* Modal */
  --modal-backdrop: rgba(3, 6, 12, 0.88);
  --modal-bg: rgba(11, 18, 32, 0.98);
  --modal-border: var(--border-strong);
  --modal-shadow: var(--shadow-elevated);

  /* Hero Banner */
  --hero-banner-bg: linear-gradient(135deg, rgba(8, 14, 26, 0.95), rgba(15, 23, 42, 0.9));
  --hero-banner-border: rgba(0, 242, 254, 0.25);
  --hero-step-bg: rgba(12, 19, 35, 0.7);
  --hero-step-hover-bg: rgba(18, 28, 52, 0.85);
  --hero-step-border: rgba(255, 255, 255, 0.08);
}