/**
 * ============================================
 * AI Agency Framework — GLOBAL DESIGN TOKENS
 * ============================================
 * Agency: $500K Motion Design Practice
 * System: Cinematic AI Authority Platform
 * Version: 1.0.0
 * --------------------------------------------
 * STRICT TOKEN COMPLIANCE REQUIRED
 * ============================================
 */

/* ============================================
   1. CORE PALETTE
   ============================================ */
:root {
  /* Primary: Deep Space Black */
  --color-space-50:  #1A1A24;
  --color-space-100: #15151E;
  --color-space-200: #111118;
  --color-space-300: #0E0E15;
  --color-space-400: #0B0B12;  /* Base dark background */
  --color-space-500: #0A0A0F;  /* Primary brand dark */
  --color-space-600: #08080C;
  --color-space-700: #06060A;
  --color-space-800: #040407;
  --color-space-900: #020203;

  /* Accent: Electric Cyan */
  --color-cyan-50:  #E6FFFF;
  --color-cyan-100: #B3FFFF;
  --color-cyan-200: #80FFFF;
  --color-cyan-300: #4DF0FF;
  --color-cyan-400: #1AE5FF;
  --color-cyan-500: #00F0FF;  /* Primary accent */
  --color-cyan-600: #00C4D4;
  --color-cyan-700: #0099A6;
  --color-cyan-800: #006D77;
  --color-cyan-900: #004249;

  /* Secondary: Warm Ivory */
  --color-ivory-50:  #FFFFFF;
  --color-ivory-100: #FFFDF9;
  --color-ivory-200: #FAF8F5;  /* Base light background */
  --color-ivory-300: #F5F0EA;
  --color-ivory-400: #EBE5DC;
  --color-ivory-500: #D9D0C3;
  --color-ivory-600: #B8AB99;
  --color-ivory-700: #968671;
  --color-ivory-800: #746956;
  --color-ivory-900: #524A3A;

  /* Semantic: Status Colors */
  --color-success: #00E5A0;
  --color-warning: #FFB800;
  --color-error: #FF3366;
  --color-info: #4488FF;

  /* Neural Gradient Stops (for advanced effects) */
  --gradient-neural-1: #00F0FF;
  --gradient-neural-2: #7B61FF;
  --gradient-neural-3: #FF61DC;
  --gradient-heat-1: #FF3366;
  --gradient-heat-2: #FFB800;
  --gradient-heat-3: #00F0FF;
}

/* ============================================
   2. THEME SYSTEM (Dark/Light)
   ============================================ */

/* Dark Mode (Default) */
:root {
  /* Background */
  --bg-primary: var(--color-space-500);
  --bg-secondary: var(--color-space-400);
  --bg-tertiary: var(--color-space-300);
  --bg-elevated: var(--color-space-200);
  --bg-overlay: rgba(10, 10, 15, 0.85);

  /* Surface (for cards, panels) */
  --surface-default: rgba(26, 26, 36, 0.6);
  --surface-hover: rgba(26, 26, 36, 0.8);
  --surface-active: rgba(0, 240, 255, 0.08);
  --surface-glass: rgba(26, 26, 36, 0.4);

  /* Text */
  --text-primary: var(--color-ivory-200);
  --text-secondary: var(--color-ivory-500);
  --text-tertiary: var(--color-ivory-600);
  --text-muted: var(--color-ivory-800);
  --text-inverse: var(--color-space-500);

  /* Border */
  --border-default: rgba(250, 248, 245, 0.08);
  --border-hover: rgba(0, 240, 255, 0.3);
  --border-active: rgba(0, 240, 255, 0.6);
  --border-glow: rgba(0, 240, 255, 0.15);

  /* Accent */
  --accent-primary: var(--color-cyan-500);
  --accent-secondary: var(--color-cyan-600);
  --accent-glow: rgba(0, 240, 255, 0.4);
  --accent-gradient: linear-gradient(135deg, var(--color-cyan-500), var(--gradient-neural-2));
}

/* Light Mode */
[data-theme="light"] {
  /* Background */
  --bg-primary: var(--color-ivory-200);
  --bg-secondary: var(--color-ivory-300);
  --bg-tertiary: var(--color-ivory-400);
  --bg-elevated: var(--color-ivory-100);
  --bg-overlay: rgba(250, 248, 245, 0.9);

  /* Surface */
  --surface-default: rgba(255, 255, 255, 0.7);
  --surface-hover: rgba(255, 255, 255, 0.9);
  --surface-active: rgba(0, 240, 255, 0.06);
  --surface-glass: rgba(255, 255, 255, 0.5);

  /* Text */
  --text-primary: var(--color-space-500);
  --text-secondary: var(--color-space-200);
  --text-tertiary: var(--color-ivory-800);
  --text-muted: var(--color-ivory-600);
  --text-inverse: var(--color-ivory-200);

  /* Border */
  --border-default: rgba(10, 10, 15, 0.08);
  --border-hover: rgba(0, 240, 255, 0.5);
  --border-active: rgba(0, 240, 255, 0.8);
  --border-glow: rgba(0, 240, 255, 0.2);

  /* Accent */
  --accent-primary: var(--color-cyan-600);
  --accent-secondary: var(--color-cyan-700);
  --accent-glow: rgba(0, 240, 255, 0.3);
  --accent-gradient: linear-gradient(135deg, var(--color-cyan-600), var(--gradient-neural-2));
}

/* ============================================
   3. TYPOGRAPHY SCALE
   ============================================ */
:root {
  /* Font Families */
  --font-headline: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  /* Font Weights */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Type Scale — Major Third (1.25x) */
  --text-xs: clamp(0.64rem, 0.7vw, 0.75rem);    /* 10-12px */
  --text-sm: clamp(0.8rem, 0.85vw, 0.875rem);    /* 12-14px */
  --text-base: clamp(1rem, 1vw, 1.125rem);        /* 16-18px */
  --text-lg: clamp(1.25rem, 1.25vw, 1.5rem);      /* 20-24px */
  --text-xl: clamp(1.563rem, 1.75vw, 2rem);       /* 25-32px */
  --text-2xl: clamp(1.953rem, 2.5vw, 2.75rem);    /* 31-44px */
  --text-3xl: clamp(2.441rem, 3.5vw, 3.5rem);     /* 39-56px */
  --text-4xl: clamp(3.052rem, 5vw, 5rem);         /* 49-80px */
  --text-5xl: clamp(3.815rem, 7vw, 7rem);         /* 61-112px */
  --text-6xl: clamp(4.768rem, 9vw, 9rem);         /* 76-144px */
  --text-display: clamp(5.96rem, 12vw, 12rem);    /* 95-192px */

  /* Line Heights */
  --leading-none: 1;
  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;
  --leading-loose: 2;

  /* Letter Spacing */
  --tracking-tighter: -0.05em;
  --tracking-tight: -0.025em;
  --tracking-normal: 0em;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;
}

/* ============================================
   4. SPACING SCALE (4px Base Grid)
   ============================================ */
:root {
  --space-0: 0px;
  --space-px: 1px;
  --space-0-5: 2px;
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-2-5: 10px;
  --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;
  --space-40: 160px;
  --space-48: 192px;
  --space-64: 256px;
  --space-80: 320px;

  /* Section Spacing */
  --section-py: clamp(80px, 12vh, 160px);
  --section-px: clamp(24px, 4vw, 64px);
  --content-max-width: 1280px;
  --content-narrow: 720px;
  --content-wide: 1440px;

  /* Minimum viewport height sections */
  --section-min-height: 100vh;
}

/* ============================================
   5. RADIUS & SHAPES
   ============================================ */
:root {
  --radius-none: 0px;
  --radius-sm: 2px;        /* Sharp, premium feel */
  --radius-base: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;   /* Pill shape */

  /* Component-specific */
  --button-radius: var(--radius-full);
  --card-radius: var(--radius-sm);
  --input-radius: var(--radius-sm);
  --badge-radius: var(--radius-full);
  --avatar-radius: var(--radius-full);
}

/* ============================================
   6. SHADOWS & DEPTH
   ============================================ */
:root {
  /* Dark Mode Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-base: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.7);
  --shadow-xl: 0 24px 72px rgba(0, 0, 0, 0.8);

  /* Glow Effects (Cyan) */
  --glow-sm: 0 0 8px var(--accent-glow);
  --glow-md: 0 0 16px var(--accent-glow), 0 0 32px rgba(0, 240, 255, 0.2);
  --glow-lg: 0 0 24px var(--accent-glow), 0 0 48px rgba(0, 240, 255, 0.15), 0 0 96px rgba(0, 240, 255, 0.08);
  --glow-inner: inset 0 0 20px rgba(0, 240, 255, 0.1);

  /* Layered Shadows */
  --shadow-elevated: var(--shadow-md), var(--glow-sm);
  --shadow-floating: var(--shadow-lg), var(--glow-md);
}

[data-theme="light"] {
  --shadow-sm: 0 1px 2px rgba(10, 10, 15, 0.08);
  --shadow-base: 0 4px 12px rgba(10, 10, 15, 0.1);
  --shadow-md: 0 8px 24px rgba(10, 10, 15, 0.12);
  --shadow-lg: 0 16px 48px rgba(10, 10, 15, 0.15);
  --shadow-xl: 0 24px 72px rgba(10, 10, 15, 0.18);
}

/* ============================================
   7. MOTION TOKENS
   ============================================ */
:root {
  /* Custom Easing Functions */
  --ease-cinematic: cubic-bezier(0.16, 1, 0.3, 1);     /* Primary entrance */
  --ease-dramatic: cubic-bezier(0.87, 0, 0.13, 1);     /* High impact */
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);         /* Subtle transitions */
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Playful */
  --ease-expo-out: cubic-bezier(0.16, 1, 0.3, 1);      /* Fast start, smooth land */
  --ease-expo-in: cubic-bezier(0.7, 0, 0.84, 0);       /* Smooth start, fast end */
  --ease-power4: cubic-bezier(0.76, 0, 0.24, 1);       /* Strong deceleration */
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Springy */

  /* Duration Scale */
  --duration-instant: 0.1s;
  --duration-fast: 0.2s;
  --duration-normal: 0.3s;
  --duration-medium: 0.6s;     /* Base duration */
  --duration-slow: 0.8s;       /* Page transitions */
  --duration-dramatic: 1.2s;   /* Hero reveals */
  --duration-epic: 2s;         /* Cinematic sequences */

  /* Stagger Increments */
  --stagger-tight: 0.03s;
  --stagger-base: 0.06s;
  --stagger-normal: 0.1s;      /* Base stagger */
  --stagger-relaxed: 0.15s;
  --stagger-dramatic: 0.2s;

  /* Delay Presets */
  --delay-none: 0s;
  --delay-short: 0.1s;
  --delay-medium: 0.3s;
  --delay-long: 0.6s;

  /* Scroll Settings */
  --scroll-lerp: 1.2;
  --scroll-wheel-factor: 1;
  --scroll-touch-factor: 2;
  --scroll-wheel-multiplier: 0.8;
}

/* ============================================
   8. Z-INDEX SCALE
   ============================================ */
:root {
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;
  --z-toast: 800;
  --z-overlay: 900;
  --z-progress: 950;
  --z-max: 9999;
}

/* ============================================
   9. BLUR & BACKDROP FILTERS
   ============================================ */
:root {
  --blur-sm: blur(4px);
  --blur-base: blur(8px);
  --blur-md: blur(12px);
  --blur-lg: blur(20px);      /* Glassmorphism standard */
  --blur-xl: blur(40px);
  --backdrop-blur: saturate(180%) blur(20px);
  --backdrop-heavy: saturate(150%) blur(40px);
}

/* ============================================
   10. GRID & LAYOUT
   ============================================ */
:root {
  --grid-columns: 12;
  --grid-gap: var(--space-6);
  --container-padding: var(--section-px);
  --header-height: 72px;
  --header-height-scrolled: 64px;
}

/* ============================================
   11. REDUCED MOTION FALLBACKS
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0s;
    --duration-fast: 0s;
    --duration-normal: 0s;
    --duration-medium: 0s;
    --duration-slow: 0s;
    --duration-dramatic: 0s;
    --duration-epic: 0s;
    --stagger-tight: 0s;
    --stagger-base: 0s;
    --stagger-normal: 0s;
    --stagger-relaxed: 0s;
    --stagger-dramatic: 0s;
    --scroll-lerp: 0;
    --ease-cinematic: linear;
    --ease-dramatic: linear;
    --ease-smooth: linear;
    --ease-expo-out: linear;
    --ease-expo-in: linear;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================
   12. REDUCED TRANSPARENCY
   ============================================ */
@media (prefers-reduced-transparency: reduce) {
  :root {
    --surface-glass: var(--bg-secondary);
    --blur-lg: none;
    --backdrop-blur: none;
  }
}