/* ============================================
   GIGI FUTURE – Design Tokens (Spectrum 2 Inspired)
   Foundation for Modular Architecture & Accessibility
   ============================================ */

:root {
  /* --- 1. Foundation: Color Primitives (WCAG Compliant) --- */
  /* Dark Mode Base (Cool, Trustworthy Blue/Black) */
  --global-color-gray-50:  #f8fafc;
  --global-color-gray-100: #f1f5f9;
  --global-color-gray-200: #e2e8f0;
  --global-color-gray-300: #cbd5e1;
  --global-color-gray-400: #94a3b8;
  --global-color-gray-500: #64748b;
  --global-color-gray-600: #475569;
  --global-color-gray-700: #334155;
  --global-color-gray-800: #1e293b;
  --global-color-gray-900: #0f172a;
  --global-color-gray-950: #020617;
  
  /* Gigi Brand: High Velocity Cyan & Violet (Phonosemantic: Sharp, Fast) */
  --global-color-cyan-300: #67e8f9;
  --global-color-cyan-400: #22d3ee;
  --global-color-cyan-500: #06b6d4;
  --global-color-cyan-600: #0891b2;
  
  --global-color-violet-400: #c084fc;
  --global-color-violet-500: #a855f7;
  --global-color-violet-600: #9333ea;

  /* Semantic Feedback (Protanopia/Deuteranopia safe contrast) */
  --global-color-success: #10b981; /* Green */
  --global-color-warning: #f59e0b; /* Amber */
  --global-color-danger:  #ef4444; /* Red */
  --global-color-info:    #3b82f6; /* Blue */

  /* --- 2. Semantic Tokens (Theme Context) --- */
  
  /* Backgrounds: Separation of Navigation and Content */
  --alias-bg-page:        var(--global-color-gray-950);
  --alias-bg-surface-1:   var(--global-color-gray-900); /* Elevated Cards */
  --alias-bg-surface-2:   var(--global-color-gray-800); /* Higher Elevation (Mega Menu) */
  --alias-bg-glass:       rgba(15, 23, 42, 0.7);        /* Spectrum 2 Glass Pattern */
  
  /* Typography Colors (WCAG Contrast Ratios > 4.5:1) */
  --alias-text-primary:   var(--global-color-gray-50);
  --alias-text-secondary: var(--global-color-gray-300);
  --alias-text-tertiary:  var(--global-color-gray-400);
  --alias-text-brand:     var(--global-color-cyan-400);

  /* Interaction & Borders */
  --alias-border-subtle:  var(--global-color-gray-800);
  --alias-border-strong:  var(--global-color-gray-600);
  --alias-border-brand:   var(--global-color-cyan-500);
  
  --alias-border-focus:   var(--global-color-violet-400); /* A11y Focus Ring */

  /* --- 3. Typography (Aerodynamic & Sharp) --- */
  /* Using Inter for high readability (BFSG) and Space Grotesk for Tech-Vibe */
  --font-family-body:    'Inter', system-ui, sans-serif;
  --font-family-heading: 'Space Grotesk', system-ui, sans-serif;
  
  /* Fluid Scale */
  --font-size-xs:   0.75rem;  /* 12px */
  --font-size-sm:   0.875rem; /* 14px */
  --font-size-base: 1rem;     /* 16px */
  --font-size-lg:   1.125rem; /* 18px */
  --font-size-xl:   1.25rem;  /* 20px */
  --font-size-2xl:  1.5rem;   /* 24px */
  --font-size-3xl:  1.875rem; /* 30px */
  --font-size-4xl:  2.25rem;  /* 36px */
  --font-size-5xl:  clamp(2.5rem, 5vw, 4rem); /* Responsive Hero */

  /* --- 4. Spacing (4pt / 8pt Grid System - Spectrum 2) --- */
  --space-0:   0px;
  --space-1:   0.25rem; /* 4px */
  --space-2:   0.5rem;  /* 8px */
  --space-3:   0.75rem; /* 12px */
  --space-4:   1rem;    /* 16px */
  --space-6:   1.5rem;  /* 24px */
  --space-8:   2rem;    /* 32px */
  --space-12:  3rem;    /* 48px */
  --space-16:  4rem;    /* 64px */
  --space-24:  6rem;    /* 96px */

  /* --- 5. Elevation & Shadows (Cognitive Separation) --- */
  --elevation-1: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
  --elevation-2: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
  --elevation-3: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
  --glow-brand:  0 0 20px rgba(6, 182, 212, 0.3); /* Neon /i/ effect */

  /* --- 6. Interactivity & Motion (Fast, Fluid) --- */
  --motion-duration-fast:   150ms;
  --motion-duration-normal: 250ms;
  --motion-duration-slow:   400ms;
  --motion-easing-aerodynamic: cubic-bezier(0.2, 0.8, 0.2, 1); /* Sharp acceleration, smooth deceleration */

  /* --- 7. Fitts's Law Ergonomics --- */
  --touch-target-min: 48px; /* WCAG 2.2 / Apple standard for minimum hit area */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;
}