/* ═══════════════════════════════════════════════════════════════
   GIO Platform - Design System Variables
   Enterprise-grade CSS Custom Properties
   Version: 2.0.0
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ═══════════════════════════════════════════════════════════════
     COLOR SYSTEM
     ═══════════════════════════════════════════════════════════════ */
  
  /* Primary Palette */
  --navy:    #0a1628;
  --navy-2:  #0f2040;
  --navy-3:  #1a4480;
  
  /* Accent Colors */
  --azure:   #2563eb;
  --sky:     #3b82f6;
  --teal:    #0ea5e9;
  
  /* Semantic Colors */
  --success: #10b981;
  --warning: #f59e0b;
  --error:   #ef4444;
  --gold:    #e8b84b;
  
  /* Neutral Scale */
  --white:   #ffffff;
  --off-white:  #f8f9fc;
  --off-white-2: #f1f4f9;
  --ink:     #0a1628;
  --ink-2:   #1e3a5f;
  --muted:   #6b8cae;
  --muted-2: #94a9c0;
  
  /* ═══════════════════════════════════════════════════════════════
     TYPOGRAPHY SYSTEM
     ═══════════════════════════════════════════════════════════════ */
  --ff-display: 'Cormorant Garamond', Georgia, serif;
  --ff-body:    'Outfit', sans-serif;
  --ff-mono:    'DM Mono', monospace;
  --ff-hero:    'Inter', sans-serif;
  
  /* Font Sizes */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-lg:   17px;
  --text-xl:   22px;
  --text-2xl:  36px;
  --text-3xl:  clamp(38px, 4vw, 60px);
  --text-4xl:  clamp(54px, 6.5vw, 90px);
  
  /* Font Weights */
  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;
  
  /* Line Heights */
  --leading-tight: 1.04;
  --leading-snug:  1.1;
  --leading-normal: 1.7;
  --leading-relaxed: 1.8;
  
  /* Letter Spacing */
  --tracking-tight: -0.025em;
  --tracking-normal: 0.01em;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.08em;
  --tracking-widest: 0.1em;
  
  /* ═══════════════════════════════════════════════════════════════
     SPACING SYSTEM (8px base)
     ═══════════════════════════════════════════════════════════════ */
  --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 & GRID
     ═══════════════════════════════════════════════════════════════ */
  --container-max: 1200px;
  --section-padding-x: 56px;
  --section-padding-y: 120px;
  --nav-height: 80px;
  
  /* ═══════════════════════════════════════════════════════════════
     EFFECTS & SHADOWS
     ═══════════════════════════════════════════════════════════════ */
  --shadow-sm:   0 2px 12px rgba(10,22,40,0.08);
  --shadow-md:   0 4px 32px rgba(10,22,40,0.08);
  --shadow-lg:   0 12px 60px rgba(10,22,40,0.14);
  --shadow-xl:   0 20px 80px rgba(10,22,40,0.2);
  
  /* Border & Radius */
  --border-subtle: rgba(10,22,40,0.08);
  --border-medium: rgba(10,22,40,0.14);
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 100px;
  
  /* Blur */
  --blur-sm: blur(12px);
  --blur-md: blur(24px);
  
  /* ═══════════════════════════════════════════════════════════════
     ANIMATION TIMING
     ═══════════════════════════════════════════════════════════════ */
  --ease-out: cubic-bezier(0.2, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 0.15s;
  --duration-normal: 0.3s;
  --duration-slow: 0.5s;
  --duration-slower: 0.75s;
  
  /* ═══════════════════════════════════════════════════════════════
     Z-INDEX SCALE
     ═══════════════════════════════════════════════════════════════ */
  --z-cursor: 9999;
  --z-cursor-ring: 9998;
  --z-modal: 1000;
  --z-dropdown: 900;
  --z-sticky: 500;
  --z-nav: 200;
  --z-content: 1;
  --z-background: 0;
}

/* ═══════════════════════════════════════════════════════════════
   DARK MODE SUPPORT (Future)
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
  :root {
    /* Dark mode variables would go here */
  }
}

/* ═══════════════════════════════════════════════════════════════
   REDUCED MOTION
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0.01s;
    --duration-normal: 0.01s;
    --duration-slow: 0.01s;
  }
}