/* ==========================================================================
   WISTERRA DESIGN SYSTEM - VARIABLE TOKENS
   Theme: Executive Consulting Premium (Korn Ferry x McKinsey)
   ========================================================================== */

:root {
  /* Colors - HEX Code Bases (Enterprise Refinement) */
  --primary-emerald: #0A5C55;          /* Muted, high-ticket deep emerald */
  --primary-emerald-hover: #084943;
  --primary-emerald-light: rgba(10, 92, 85, 0.04);
  --primary-emerald-glow: rgba(10, 92, 85, 0.08);
  
  --secondary-navy: #0B1120;           /* Slate Dark Navy */
  --secondary-navy-hover: #0F172A;
  --secondary-navy-dark: #030712;
  --secondary-navy-light: #1E293B;
  
  --accent-gold: #C5A059;              /* Elegant Warm Bronze-Gold */
  --accent-gold-hover: #B08B46;
  --accent-gold-light: rgba(197, 160, 89, 0.08);
  --accent-gold-glow: rgba(197, 160, 89, 0.12);
  
  --neutral-white: #FFFFFF;
  --neutral-bg-light: #F9F9F8;         /* High-ticket Warm off-white background */
  --neutral-bg-card: #FFFFFF;
  --neutral-text-dark: #121824;        /* Deep readable dark gray-navy */
  --neutral-text-gray: #4A5262;        /* Premium body text slate */
  --neutral-text-light: #8E98A8;       /* Subtle text slate */
  
  /* HSL Versions for dynamic layering */
  --emerald-hsl: 174, 80%, 20%;
  --navy-hsl: 222, 47%, 8%;
  --gold-hsl: 41, 51%, 56%;
  
  /* Razor-thin Borders (Visual noise reduction by 50%) */
  --border-glass-light: rgba(18, 24, 36, 0.06);
  --border-glass-dark: rgba(10, 92, 85, 0.06);
  --border-hairline: 1px solid rgba(18, 24, 36, 0.06);
  --border-gold-subtle: 1px solid rgba(197, 160, 89, 0.15);
  
  /* Typography Configuration (Korn Ferry Inspired) */
  --font-primary: "Manrope", "Inter", system-ui, -apple-system, sans-serif;
  
  /* Typography Hierarchy Sizing */
  --font-size-hero: 3.5rem;      /* 56px */
  --font-size-h2: 2.5rem;        /* 40px */
  --font-size-h3: 1.5rem;        /* 24px */
  --font-size-body: 1rem;        /* 16px */
  --font-size-small: 0.875rem;   /* 14px */
  
  /* Size & Spacing Scale (Generous Whitespace) */
  --space-xxs: 0.25rem;  /* 4px */
  --space-xs: 0.5rem;    /* 8px */
  --space-sm: 0.75rem;   /* 12px */
  --space-md: 1rem;      /* 16px */
  --space-lg: 1.5rem;    /* 24px */
  --space-xl: 2rem;      /* 32px */
  --space-2xl: 3.5rem;   /* 56px */
  --space-3xl: 5rem;     /* 80px */
  --space-4xl: 7.5rem;   /* 120px */
  
  /* Border Radii (Muted soft corners) */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-full: 9999px;
  
  /* Box Shadows (Subtle, clean ambient slate - 50% noise reduction) */
  --shadow-sm: 0 1px 2px rgba(18, 24, 36, 0.01);
  --shadow-md: 0 4px 20px -2px rgba(18, 24, 36, 0.03);
  --shadow-lg: 0 8px 30px -4px rgba(18, 24, 36, 0.04);
  --shadow-xl: 0 16px 40px -8px rgba(18, 24, 36, 0.05);
  --shadow-premium: 0 20px 50px -10px rgba(18, 24, 36, 0.06);
  --shadow-gold-soft: none;            /* Removed aggressive startup glows */
  --shadow-emerald-soft: none;
  
  /* Blurs */
  --blur-glass: blur(12px);
  --blur-glass-heavy: blur(20px);
  
  /* Transitions */
  --transition-fast: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  --transition-smooth: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  
  /* Z-Index Hierarchy */
  --z-negative: -1;
  --z-base: 1;
  --z-sticky: 100;
  --z-drawer: 200;
  --z-modal: 300;
  --z-toast: 400;
}