/* ==========================================================================
   TAVRICON DESIGN SYSTEM — ROYAL COBALT & NEON CYAN AURORA VARIABLES
   Brand: TAVRICON — GROWTH. PERFORMANCE. INTELLIGENCE.
   Visual Direction: Royal Velvet Void + Electric Cobalt + Hyper Cyan + Imperial Violet
   ========================================================================== */

:root {
  /* Surface / Background Hierarchy */
  --bg-void: #030712;         /* Ultra-deep velvet cosmic void */
  --bg-surface-1: #070E22;    /* Deep royal velvet card background */
  --bg-surface-2: #0D1938;    /* Elevated surface, dropdowns, inputs */
  --bg-surface-3: #14244E;    /* Interactive card hover */
  --bg-surface-subtle: rgba(7, 14, 34, 0.78);

  /* Primary Royal Accents — Electric Royal Cobalt & Deep Sapphire */
  --royal-primary: #2563EB;   /* Stately Electric Royal Cobalt */
  --royal-light: #3B82F6;     /* Luminous Cobalt Blue */
  --royal-bright: #60A5FA;    /* Sky Sapphire Specular */
  --royal-deep: #1D4ED8;      /* Stately Royal Navy */
  --royal-dark: #1E3A8A;      /* Midnight Sapphire Depth */
  --royal-glow: rgba(37, 99, 235, 0.45);
  --royal-glow-strong: rgba(59, 130, 246, 0.7);
  --royal-subtle: rgba(37, 99, 235, 0.12);
  --royal-border: rgba(59, 130, 246, 0.3);
  --royal-border-hover: rgba(0, 242, 254, 0.75);

  /* High-Energy Specular / Hook Accent — Luminous Neon Cyan */
  --cyan-primary: #00F2FE;    /* Signature Hyper Neon Cyan */
  --cyan-light: #38BDF8;      /* Luminous Azure Cyan */
  --cyan-bright: #E0F2FE;     /* Crystalline Diamond Specular */
  --cyan-dark: #0284C7;       /* Deep Cyan Accent */
  --cyan-glow: rgba(0, 242, 254, 0.45);
  --cyan-glow-strong: rgba(0, 242, 254, 0.75);
  --cyan-subtle: rgba(0, 242, 254, 0.12);
  --cyan-border: rgba(0, 242, 254, 0.32);

  /* Secondary Royal Accent — Imperial Violet & Electric Indigo */
  --violet-accent: #8B5CF6;   /* Imperial Violet Glow */
  --violet-deep: #6366F1;     /* Electric Indigo */
  --violet-glow: rgba(139, 92, 246, 0.4);

  /* Dynamic Aurora Gradients */
  --aurora-gradient: linear-gradient(135deg, #00F2FE 0%, #3B82F6 45%, #8B5CF6 100%);
  --aurora-gradient-hover: linear-gradient(135deg, #FFFFFF 0%, #00F2FE 30%, #3B82F6 70%, #A855F7 100%);
  --royal-gradient: linear-gradient(135deg, #00F2FE 0%, #2563EB 50%, #1D4ED8 100%);
  --royal-gradient-hover: linear-gradient(135deg, #FFFFFF 0%, #38BDF8 35%, #2563EB 75%, #1D4ED8 100%);
  --mesh-cyan-royal: radial-gradient(circle at 50% 0%, rgba(0, 242, 254, 0.18) 0%, rgba(37, 99, 235, 0.12) 35%, rgba(3, 7, 18, 0) 70%);

  /* Backwards-Compatibility Aliases (Maps all legacy classes instantly to Royal/Cyan) */
  --gold-primary: #00F2FE;
  --gold-light: #38BDF8;
  --gold-bright: #E0F2FE;
  --gold-dark: #2563EB;
  --gold-deep: #1D4ED8;
  --gold-glow: rgba(0, 242, 254, 0.4);
  --gold-glow-strong: rgba(0, 242, 254, 0.75);
  --gold-subtle: rgba(0, 242, 254, 0.12);
  --gold-border: rgba(0, 242, 254, 0.32);
  --gold-border-hover: rgba(56, 189, 248, 0.8);
  --gold-gradient: var(--aurora-gradient);
  --gold-gradient-hover: var(--aurora-gradient-hover);

  /* Neutral & Text Hierarchy */
  --text-primary: #FFFFFF;    /* Pure crisp diamond white (100%) */
  --text-secondary: #E2E8F0;  /* Platinum slate secondary (92%) */
  --text-muted: #94A3B8;      /* Cool slate metadata (65%) */
  --text-faint: #64748B;      /* Inactive & subtle labels (45%) */

  /* Borders & Hairlines */
  --border-subtle: rgba(56, 189, 248, 0.12);
  --border-glass: rgba(56, 189, 248, 0.22);
  --border-active: rgba(0, 242, 254, 0.65);
  --border-royal: rgba(37, 99, 235, 0.45);

  /* Glassmorphism */
  --glass-bg: rgba(7, 14, 34, 0.76);
  --glass-bg-elevated: rgba(13, 25, 56, 0.88);
  --glass-blur: blur(20px);
  --glass-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.65);

  /* Typography Families */
  --font-heading: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Typography Scale */
  --text-display: clamp(1.85rem, 5.2vw + 0.6rem, 4.85rem);
  --text-h1: clamp(1.65rem, 3.5vw + 0.4rem, 3.3rem);
  --text-h2: clamp(1.4rem, 2.5vw + 0.25rem, 2.35rem);
  --text-h3: clamp(1.2rem, 1.8vw + 0.2rem, 1.65rem);
  --text-h4: clamp(1.05rem, 1.2vw + 0.15rem, 1.35rem);
  --text-lead: clamp(1.0rem, 1vw + 0.5rem, 1.25rem);
  --text-body: 1rem;
  --text-sm: 0.875rem;
  --text-xs: 0.75rem;

  /* Spacing Rhythm (8dp System) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* Layout Boundaries */
  --container-width: 1280px;
  --container-narrow: 980px;
  --container-fluid: 100%;
  --header-height: 80px;
  --header-compact-height: 68px;

  /* Border Radii */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Transitions & Motion */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 400ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-bounce: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Shadows & Illuminations */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.7);
  --shadow-royal: 0 0 35px rgba(37, 99, 235, 0.45);
  --shadow-cyan: 0 0 35px rgba(0, 242, 254, 0.45);
  --shadow-gold: var(--shadow-cyan);

  /* Z-Index Hierarchy */
  --z-negative: -1;
  --z-base: 1;
  --z-card: 10;
  --z-dropdown: 100;
  --z-sticky: 500;
  --z-drawer: 900;
  --z-modal: 1000;
  --z-reveal: 9999;
}