/* ==========================================================================
   AI IMPACT INDIA 2026 — PRODUCTION DESIGN SYSTEM TOKENS
   Core Tokens: Colors, Typography, Spacing, Elevation, Glassmorphism, Radii
   ========================================================================== */

:root {
  /* ==========================================
     1. COLOR PALETTE
     ========================================== */
  /* Deep Tech Dark Surfaces (Phase 5.5 Layered Theme) */
  --ai-dark: #0A0D1B;               /* Deep Space: Primary dark background */
  --ai-dark-elevated: #10152E;      /* Secondary dark background / subtle sections */
  --ai-surface: #141933;            /* Elevated Surface: Cards, panels, modals */
  --ai-surface-elevated: #1B2144;   /* Higher elevation: Active states, dropdowns */
  --ai-surface-subtle: #0E1224;     /* Inset panels, recessed inputs */
  --ai-topbar-bg: #0D1127;          /* Sleek Technical Utility Top Bar */
  --ai-header-surface: #141933;     /* Elevated Header Surface */
  --ai-header-surface-glass: rgba(20, 25, 51, 0.95);
  --ai-header-border: rgba(42, 45, 125, 0.55);
  --ai-header-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);

  /* Official Brand Colors */
  --ai-brand-navy: #2A2D7D;         /* Brand Navy: Core technology anchor */
  --ai-brand-navy-light: #3D41A4;   /* Lighter Navy for hover states */
  --ai-brand-navy-dark: #1E2059;    /* Deep Navy */
  --ai-brand-navy-glow: rgba(42, 45, 125, 0.45);

  /* Primary Accent: Electric Mint & Official Brand Green */
  --ai-accent-mint: #00D285;        /* Electric Mint: Modern AI, high tech, action */
  --ai-accent-mint-light: #33DE9D;  /* Mint hover highlight */
  --ai-accent-mint-dark: #00A668;   /* Mint active / pressed */
  --ai-accent-mint-glow: rgba(0, 210, 133, 0.30);
  --ai-accent-mint-subtle: rgba(0, 210, 133, 0.09);
  --ai-brand-green: #00A651;        /* Official Brand Green from logo arrow & 'impact' */

  /* Secondary Accent: Solar Orange */
  --ai-accent-orange: #F69438;      /* Solar Orange: Primary CTAs, urgent markers */
  --ai-accent-orange-light: #F8AB5F;/* Orange hover */
  --ai-accent-orange-dark: #D67A24; /* Orange active / pressed */
  --ai-accent-orange-glow: rgba(246, 148, 56, 0.30);
  --ai-accent-orange-subtle: rgba(246, 148, 56, 0.09);

  /* Light / Elevated Neutral Surfaces (for Visual Rhythm) */
  --ai-surface-light: #F8FAFC;      /* Light surface for high-contrast logistics & rhythm */
  --ai-surface-light-card: #FFFFFF; /* Crisp white card surface */
  --ai-text-light-dark: #0F172A;    /* Slate 900: High-contrast text on light surfaces */
  --ai-text-light-muted: #475569;   /* Slate 600: Secondary text on light surfaces */
  --ai-border-light: #E2E8F0;       /* Border for light cards */

  /* Text Hierarchy (Dark Mode Default) */
  --ai-text-primary: #FFFFFF;       /* High-emphasis headers & prominent text */
  --ai-text-secondary: #94A3B8;     /* Slate 400: High-readability body copy */
  --ai-text-muted: #64748B;         /* Slate 500: Secondary captions, meta info */
  --ai-text-subtle: #475569;        /* Slate 600: Inactive / disabled markers */
  --ai-text-inverse: #0B0E1E;       /* Inverted text on bright buttons (Mint/White) */

  /* Borders & Dividers */
  --ai-border: rgba(255, 255, 255, 0.08);       /* Default card/section border */
  --ai-border-medium: rgba(255, 255, 255, 0.14);/* Interactive default border */
  --ai-border-bright: rgba(255, 255, 255, 0.25);/* Hover border */
  --ai-border-mint: rgba(0, 210, 133, 0.35);     /* Mint focused/active border */
  --ai-border-orange: rgba(246, 148, 56, 0.35);  /* Orange focused/active border */

  /* Glassmorphism & Translucency */
  --ai-glass-surface: rgba(20, 25, 51, 0.72);
  --ai-glass-card: rgba(20, 25, 51, 0.60);
  --ai-glass-nav: rgba(11, 14, 30, 0.88);
  --ai-glass-blur: blur(16px);
  --ai-glass-border: rgba(255, 255, 255, 0.10);

  /* Status Indicators */
  --ai-success: #00D285;
  --ai-warning: #F69438;
  --ai-error: #EF4444;
  --ai-info: #38BDF8;
  --ai-overlay: rgba(11, 14, 30, 0.82);

  /* ==========================================
     2. TYPOGRAPHY SYSTEM
     ========================================== */
  /* Type Families */
  --font-primary: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Font Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Fluid Typography Scale (using modern clamp) */
  --text-display: clamp(2.5rem, 5.5vw + 0.75rem, 4.5rem);
  --text-h1: clamp(2.15rem, 4vw + 0.5rem, 3.5rem);
  --text-h2: clamp(1.75rem, 3vw + 0.35rem, 2.5rem);
  --text-h3: clamp(1.35rem, 2vw + 0.25rem, 1.85rem);
  --text-h4: clamp(1.15rem, 1.2vw + 0.15rem, 1.4rem);
  --text-h5: 1.125rem;
  --text-h6: 1rem;

  --text-body-lg: clamp(1.0625rem, 0.5vw + 0.95rem, 1.25rem);
  --text-body: 1rem;
  --text-body-sm: 0.875rem;
  --text-meta: 0.8125rem;
  --text-xs: 0.75rem;

  /* Line Heights */
  --leading-none: 1;
  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  /* Letter Spacing */
  --tracking-tight: -0.03em;
  --tracking-snug: -0.015em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.08em;
  --tracking-widest: 0.14em;

  /* ==========================================
     3. SPACING SYSTEM
     ========================================== */
  --space-3xs: 0.125rem;  /* 2px */
  --space-2xs: 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: 3rem;      /* 48px */
  --space-3xl: 4rem;      /* 64px */
  --space-4xl: 5.5rem;    /* 88px */
  --space-5xl: 7.5rem;    /* 120px */

  /* Section Spacing */
  --section-padding: clamp(4.5rem, 8vw, 7.5rem);
  --section-padding-sm: clamp(3rem, 5vw, 4.5rem);

  /* Container & Grid Scale */
  --container-max: 1320px;
  --container-padding: clamp(1rem, 3vw, 2rem);
  --grid-gap: clamp(1rem, 2vw, 1.75rem);
  --grid-gap-lg: clamp(1.5rem, 3vw, 2.5rem);

  /* ==========================================
     4. RADII & SHADOWS
     ========================================== */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-2xl: 30px;
  --radius-full: 9999px;

  /* Elevation Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.48);
  --shadow-xl: 0 20px 52px rgba(0, 0, 0, 0.6);
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.28);
  --shadow-card-hover: 0 12px 36px rgba(0, 0, 0, 0.5), 0 0 20px var(--ai-accent-mint-subtle);

  /* Controlled Glow Shadows */
  --shadow-glow-mint: 0 0 24px var(--ai-accent-mint-glow);
  --shadow-glow-orange: 0 0 24px var(--ai-accent-orange-glow);
  --shadow-glow-navy: 0 0 35px var(--ai-brand-navy-glow);

  /* ==========================================
     5. TRANSITIONS & TIMING
     ========================================== */
  --transition-fast: 150ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-base: 250ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: 350ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-bounce: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ==========================================
     6. Z-INDEX LAYERING
     ========================================== */
  --z-background: -1;
  --z-normal: 1;
  --z-elevated: 10;
  --z-sticky: 100;
  --z-header: 500;
  --z-dropdown: 600;
  --z-modal: 900;
  --z-floating-cta: 950;
  --z-toast: 1000;

  /* ==========================================
     7. BACKWARD COMPATIBILITY MAPPING
     Ensures existing sub-pages render properly
     ========================================== */
  --color-primary: var(--ai-brand-navy);
  --color-primary-light: var(--ai-brand-navy-light);
  --color-secondary: var(--ai-surface);
  --color-accent: var(--ai-accent-mint);
  --color-white: #FFFFFF;
  --color-off-white: var(--ai-surface);
  --color-light-gray: var(--ai-surface-subtle);
  --color-gray: var(--ai-border);
  --color-text: var(--ai-text-primary);
  --color-text-light: var(--ai-text-secondary);
  --color-text-dark: var(--ai-text-primary);
  --color-border: var(--ai-border);
  --color-border-light: var(--ai-border);
  --ai-brand-orange: var(--ai-accent-orange);
  --ai-navy-dark: var(--ai-brand-navy-dark);
  --ai-navy-light: var(--ai-brand-navy-light);
  --ai-dark-soft: var(--ai-surface);
  --ai-container: var(--container-max);
}

/* Base dark container defaults */
.section-dark {
  --color-text: var(--ai-text-primary);
  --color-text-light: var(--ai-text-secondary);
  --color-border: var(--ai-border);
  background-color: var(--ai-dark);
}