/* ==========================================================================
   JAIKAAL GLOBAL — CSS VARIABLES & DESIGN TOKENS
   Strictly adheres to website.md design system rules
   ========================================================================== */

:root {
  /* Brand Colors */
  --color-primary: #059669;            /* Primary Emerald 600 */
  --color-primary-hover: #047857;      /* Emerald 700 */
  --color-primary-light: #ECFDF5;      /* Emerald 50 Subtle Background */
  --color-primary-subtle: #F0FDF4;     /* Light Green Tint */
  --color-primary-glow: rgba(5, 150, 105, 0.25);

  --color-emerald-400: #34D399;
  --color-emerald-500: #10B981;
  --color-emerald-600: #059669;
  --color-emerald-700: #047857;
  --color-emerald-800: #065F46;
  --color-emerald-900: #064E3B;
  --color-emerald-950: #022C22;

  --color-secondary: #0D3B2E;          /* Forest Deep Green */
  --color-secondary-dark: #072018;     /* Very Deep Forest */
  
  --color-accent-gold: #D4AF37;        /* Premium Gold */
  --color-accent-amber: #F59E0B;       /* Warm Amber */
  --color-accent-blue: #2563EB;        /* Trust Blue */
  --color-accent-purple: #7E22CE;      /* Purple Accent */

  /* Neutral Colors */
  --color-dark: #111827;               /* Neutral Dark (Gray 900) */
  --color-dark-surface: #020617;       /* Dark Slate 950 (Footer & Dark Surfaces) */
  --color-slate-950: #020617;
  --color-slate-900: #0F172A;
  --color-slate-800: #1E293B;
  --color-slate-700: #334155;
  --color-slate-600: #475569;
  --color-slate-500: #64748B;          /* Muted Paragraphs & Subtitles */
  --color-slate-400: #94A3B8;
  --color-slate-300: #CBD5E1;
  --color-slate-200: #E2E8F0;          /* Borders & Dividers */
  --color-slate-100: #F1F5F9;          /* Light Section Background */
  --color-slate-50: #F8FAFC;           /* Ultra Light BG */
  --color-white: #FFFFFF;

  /* Typography */
  --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Font Sizes (Fluid Mobile-Friendly Scale) */
  --text-xs: clamp(0.725rem, 1vw, 0.785rem);
  --text-sm: clamp(0.8rem, 1.2vw, 0.875rem);
  --text-base: clamp(0.875rem, 1.5vw, 1rem);
  --text-lg: clamp(0.95rem, 1.8vw, 1.125rem);
  --text-xl: clamp(1.05rem, 2vw, 1.25rem);
  --text-2xl: clamp(1.2rem, 2.5vw, 1.45rem);
  --text-3xl: clamp(1.35rem, 3vw, 1.75rem);
  --text-4xl: clamp(1.55rem, 3.5vw, 2.25rem);
  --text-5xl: clamp(1.75rem, 4vw, 2.75rem);
  --text-hero: clamp(1.85rem, 5vw, 3.5rem);

  /* Spacing Scale (Fluid) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: clamp(1.5rem, 3vw, 2rem);
  --space-10: clamp(1.75rem, 3.5vw, 2.5rem);
  --space-12: clamp(2rem, 4vw, 3rem);
  --space-16: clamp(2.5rem, 5vw, 4rem);
  --space-20: clamp(3rem, 6vw, 5rem);
  --space-24: clamp(3.5rem, 7vw, 6rem);

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

  /* Shadows (Elevated & Soft) */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 2px 4px rgba(11, 19, 37, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03);
  --shadow-md: 0 4px 12px rgba(11, 19, 37, 0.07), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 10px 25px rgba(11, 19, 37, 0.09), 0 4px 10px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 40px rgba(11, 19, 37, 0.12), 0 8px 16px rgba(0, 0, 0, 0.06);
  --shadow-glass: 0 8px 32px 0 rgba(0, 0, 0, 0.15);
  --shadow-glow: 0 0 25px rgba(0, 168, 107, 0.35);

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* Container & Max Widths */
  --container-max: 1240px;
  --container-wide: 1360px;
  --container-padding: clamp(1rem, 4vw, 2rem);

  /* Z-Index Layers */
  --z-negative: -1;
  --z-base: 1;
  --z-card: 10;
  --z-sticky: 100;
  --z-header: 500;
  --z-modal-backdrop: 900;
  --z-modal: 1000;
  --z-toast: 1100;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-base: 0ms;
    --transition-slow: 0ms;
    --transition-spring: 0ms;
  }
}