/* ============================================================
   SECCOMPLY DESIGN TOKENS
   ============================================================ */
:root {
  --bg-primary: #020617;
  --bg-secondary: #0B1120;
  --bg-card: #0F172A;
  --bg-card-hover: #1E293B;
  --border: rgba(255,255,255,0.06);
  --border-hover: rgba(255,255,255,0.12);
  --white: #F8FAFC;
  --text-primary: #E2E8F0;
  --text-secondary: #94A3B8;
  --text-muted: #64748B;
  --accent: #E8632B;
  --accent-light: #FF8A50;
  --accent-dark: #C54F1A;
  --gradient-accent: linear-gradient(135deg, #E8632B, #FF8A50);
  --green: #10B981;
  --green-dim: rgba(16,185,129,0.15);
  --yellow: #F59E0B;
  --yellow-dim: rgba(245,158,11,0.15);
  --red: #EF4444;
  --red-dim: rgba(239,68,68,0.15);
  --blue: #3B82F6;
  --blue-dim: rgba(59,130,246,0.15);
  --purple: #8B5CF6;
  --purple-dim: rgba(139,92,246,0.15);
  --teal: #14B8A6;
  --teal-dim: rgba(20,184,166,0.15);
  --blue-700: #475569;
  --blue-800: #1E293B;
  --blue-900: #0F172A;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 0.2s;
  --duration-normal: 0.4s;
  --duration-slow: 0.7s;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.4);
  --shadow-lg: 0 10px 40px rgba(0,0,0,0.5);
  --shadow-glow: 0 0 30px rgba(232,99,43,0.15);
  --shadow-glow-strong: 0 0 60px rgba(232,99,43,0.25);
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}