/* ==========================================================================
   Elevenified Design System Tokens — Master CSS Variables
   Aesthetic: Industrial Cybernetic Dark Theme & AI + Human Synergy System
   ========================================================================== */

:root {
  /* ============================================================
     ELEVENIFIED MASTER BRAND TOKENS
     ============================================================ */
  /* Backgrounds (Eye Comfort in Low Light) */
  --bg-deep-slate: #1A1C20;
  --bg-rubber: #25282D;
  --bg-rubber-light: #2D3138;
  --bg-void: #0D0F12;
  --bg-space: #07090b;
  --bg-obsidian: var(--bg-deep-slate, #1A1C20);
  --bg-card: var(--bg-rubber, #25282D);
  --bg-card-hover: var(--bg-rubber-light, #2D3138);
  --bg-card-subtle: rgba(37, 40, 45, 0.7);
  --bg-glass: rgba(26, 28, 32, 0.85);

  /* Primary Brand Semantics */
  --neon-volt: #39FF14;
  --neon-volt-dark: #2ECC40;
  --neon-volt-glow: rgba(57, 255, 20, 0.35);

  --synergy-blue: #00C9FF;
  --synergy-blue-dark: #0077B5;
  --synergy-blue-glow: rgba(0, 201, 255, 0.3);

  --synergy-gold: #FFD700;
  --synergy-gold-dark: #DAA520;
  --synergy-gold-glow: rgba(255, 215, 0, 0.3);

  --electric-amber: #FFC000;
  --electric-amber-glow: rgba(255, 192, 0, 0.35);

  --industrial-red: #FF3333;
  --industrial-red-glow: rgba(255, 51, 51, 0.35);

  /* Brand Gradient (Gold → Blue → Neon Volt: Human + AI = Result) */
  --gradient-brand: linear-gradient(90deg, var(--synergy-gold) 0%, var(--synergy-blue) 40%, var(--neon-volt) 100%);
  --synergy-gradient: linear-gradient(135deg, var(--synergy-blue), var(--synergy-gold));

  /* Tactical Borders */
  --border-industrial: #3A3E45;
  --border-dim: #252932;
  --border-subtle: var(--border-industrial, #3A3E45);
  --border-active: #4F5666;
  --border-glow-cyan: var(--synergy-blue-glow);
  --border-glow-green: var(--neon-volt-glow);
  --border-glow-amber: var(--electric-amber-glow);
  --border-glow-red: var(--industrial-red-glow);

  /* Signal Accents (Mapped to Elevenified Identity) */
  --cyan: var(--synergy-blue);
  --cyan-bright: #38bdf8;
  --cyan-glow: var(--synergy-blue-glow);
  --cyan-deep: rgba(0, 201, 255, 0.08);

  --green: var(--neon-volt);
  --green-bright: #44ff22;
  --green-glow: var(--neon-volt-glow);

  --amber: var(--electric-amber);
  --amber-bright: var(--synergy-gold);
  --amber-glow: var(--electric-amber-glow);

  --red: var(--industrial-red);
  --red-bright: #ff5555;
  --red-glow: var(--industrial-red-glow);

  /* Typography Colors */
  --foreground: #E8E8E8;
  --foreground-muted: #8A8D93;
  --text-primary: #F8FAFC;
  --text-secondary: #94A3B8;
  --text-muted: #64748B;
  --text-dim: #475569;

  /* Typography Fonts */
  --font-heading: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, Monaco, monospace;

  /* Elevation & Shadows */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.8);
  --shadow-cyan-glow: 0 0 20px var(--synergy-blue-glow);
  --shadow-green-glow: 0 0 20px var(--neon-volt-glow);
  --shadow-red-glow: 0 0 20px var(--industrial-red-glow);

  /* Layout Constants */
  --max-width: 1240px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* Transition Speeds */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}