/**
 * CSS Variables / Design System
 * Voice AI Agent Admin Testing Dashboard
 *
 * This file contains all CSS custom properties (variables) for the application.
 * Import this file FIRST in all stylesheets.
 *
 * Updated: January 2026 - Modern UI/UX enhancements
 * - Fluid typography with clamp()
 * - Enhanced color palette with vibrant accents
 * - Advanced animations and micro-interactions
 * - Improved dark mode
 */

:root {
  /* ==========================================
   * COLOR PALETTE - Primary (True Greyscale - Jan 2026)
   * Professional neutral grey palette
   * ========================================== */
  --color-primary: #a3a3a3;
  --color-primary-hover: #d4d4d4;
  --color-primary-dark: #737373;
  --color-primary-light: #d4d4d4;
  --color-primary-gradient: linear-gradient(135deg, #737373 0%, #a3a3a3 100%);
  --color-primary-gradient-hover: linear-gradient(135deg, #525252 0%, #737373 100%);

  /* Accent color - purple kept for important actions only */
  --color-accent: #8b5cf6;
  --color-accent-hover: #7c3aed;
  --color-accent-glow: rgba(139, 92, 246, 0.4);

  /* ==========================================
   * COLOR PALETTE - True Neutral Greyscale
   * No blue tint - pure neutral greys
   * ========================================== */
  --grey-50: #fafafa;
  --grey-100: #f5f5f5;
  --grey-200: #e5e5e5;
  --grey-300: #d4d4d4;
  --grey-400: #a3a3a3;
  --grey-500: #737373;
  --grey-600: #525252;
  --grey-700: #404040;
  --grey-800: #262626;
  --grey-900: #171717;
  --grey-950: #0a0a0a;

  /* Legacy accent colors - kept for semantic use */
  --color-accent-cyan: #4DCAFA;
  --color-accent-cyan-hover: #3bb8e8;
  --color-accent-cyan-glow: rgba(77, 202, 250, 0.4);

  --color-accent-green: #62F6B5;
  --color-accent-green-hover: #4de4a3;
  --color-accent-green-glow: rgba(98, 246, 181, 0.4);

  --color-accent-orange: #E96B34;
  --color-accent-orange-hover: #d75d28;
  --color-accent-orange-glow: rgba(233, 107, 52, 0.4);

  --color-accent-terracotta: #d97757;
  --color-accent-terracotta-hover: #c76847;
  --color-accent-terracotta-glow: rgba(217, 119, 87, 0.4);

  --color-accent-purple: #a855f7;
  --color-accent-purple-hover: #9333ea;
  --color-accent-purple-glow: rgba(168, 85, 247, 0.4);

  /* ==========================================
   * COLOR PALETTE - Semantic
   * ========================================== */
  /* Success */
  --color-success: #10b981;
  --color-success-hover: #059669;
  --color-success-light: #d1fae5;
  --color-success-dark: #047857;

  /* Error */
  --color-error: #ef4444;
  --color-error-hover: #dc2626;
  --color-error-light: #fee2e2;
  --color-error-dark: #b91c1c;

  /* Warning */
  --color-warning: #f59e0b;
  --color-warning-hover: #d97706;
  --color-warning-light: #fef3c7;
  --color-warning-dark: #b45309;

  /* Info */
  --color-info: #3b82f6;
  --color-info-hover: #2563eb;
  --color-info-light: #dbeafe;
  --color-info-dark: #1d4ed8;

  /* ==========================================
   * COLOR PALETTE - Unified Dark Theme (True Neutral)
   * ========================================== */
  --color-white: #ffffff;
  --color-black: #000000;

  /* Text Colors - Dark theme defaults */
  --color-text-primary: #fafafa;
  --color-text-secondary: #d4d4d4;
  --color-text-muted: #a3a3a3;
  --color-text-disabled: #737373;
  --color-text-inverse: #171717;

  /* Background Colors - Dark theme (pure neutral greys) */
  --color-bg-primary: #0a0a0a;
  --color-bg-secondary: #141414;
  --color-bg-tertiary: #1a1a1a;
  --color-bg-hover: #262626;
  --color-bg-active: #333333;

  /* Border Colors - Dark theme (neutral) */
  --color-border: rgba(163, 163, 163, 0.15);
  --color-border-light: rgba(163, 163, 163, 0.1);
  --color-border-dark: rgba(163, 163, 163, 0.2);
  --color-border-focus: #a3a3a3;

  /* Short aliases for common variables */
  --color-bg: var(--color-bg-primary);
  --text-primary: var(--color-text-primary);
  --text-secondary: var(--color-text-secondary);
  --text-muted: var(--color-text-muted);
  --bg-primary: var(--color-bg-primary);
  --bg-secondary: var(--color-bg-secondary);
  --bg-tertiary: var(--color-bg-tertiary);
  --bg-hover: var(--color-bg-hover);
  --border-color: var(--color-border);
  --border-light: var(--color-border-light);
  --card-bg: var(--color-bg-secondary);
  --primary-color: var(--color-primary);
  --success-color: #10b981;
  --error-color: #ef4444;
  --warning-color: #f59e0b;

  /* ==========================================
   * COLOR PALETTE - Sidebar (Neutral)
   * ========================================== */
  --sidebar-bg: linear-gradient(180deg, #141414 0%, #0a0a0a 100%);
  --sidebar-text: #d4d4d4;
  --sidebar-text-muted: #a3a3a3;
  --sidebar-hover-bg: rgba(163, 163, 163, 0.08);
  --sidebar-active-bg: rgba(163, 163, 163, 0.12);
  --sidebar-active-text: #e5e5e5;
  --sidebar-border: rgba(163, 163, 163, 0.1);

  /* ==========================================
   * TYPOGRAPHY
   * ========================================== */
  --font-family-base: 'Noto Serif', Georgia, 'Times New Roman', serif;
  --font-family-heading: 'Noto Serif', Georgia, 'Times New Roman', serif;
  --font-family-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;

  /* Fluid Font Sizes - Responsive typography using clamp() */
  /* clamp(min, preferred, max) - scales smoothly between breakpoints */
  --font-size-xs: clamp(0.7rem, 0.65rem + 0.25vw, 0.75rem);      /* 11-12px */
  --font-size-sm: clamp(0.8rem, 0.75rem + 0.25vw, 0.875rem);     /* 13-14px */
  --font-size-base: clamp(0.938rem, 0.875rem + 0.3vw, 1.0625rem); /* 15-17px */
  --font-size-lg: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);    /* 17-19px */
  --font-size-xl: clamp(1.188rem, 1.1rem + 0.45vw, 1.375rem);    /* 19-22px */
  --font-size-2xl: clamp(1.375rem, 1.25rem + 0.6vw, 1.625rem);   /* 22-26px */
  --font-size-3xl: clamp(1.625rem, 1.4rem + 1vw, 2.125rem);      /* 26-34px */
  --font-size-4xl: clamp(2rem, 1.7rem + 1.5vw, 2.75rem);         /* 32-44px */
  --font-size-5xl: clamp(2.5rem, 2rem + 2.5vw, 3.5rem);          /* 40-56px - Hero size */
  --font-size-6xl: clamp(3rem, 2.5rem + 3vw, 4.5rem);            /* 48-72px - Display size */

  /* Static font sizes (for UI elements that shouldn't scale) */
  --font-size-static-xs: 0.75rem;
  --font-size-static-sm: 0.875rem;
  --font-size-static-base: 1rem;

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

  /* Line Heights */
  --line-height-tight: 1.2;
  --line-height-snug: 1.375;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  --line-height-loose: 1.75;

  /* Letter Spacing */
  --letter-spacing-tighter: -0.02em;
  --letter-spacing-tight: -0.01em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.025em;
  --letter-spacing-wider: 0.05em;
  --letter-spacing-widest: 0.1em;

  /* ==========================================
   * SPACING (8px base scale)
   * ========================================== */
  --spacing-0: 0;
  --spacing-1: 0.25rem;   /* 4px */
  --spacing-2: 0.5rem;    /* 8px */
  --spacing-3: 0.75rem;   /* 12px */
  --spacing-4: 1rem;      /* 16px */
  --spacing-5: 1.25rem;   /* 20px */
  --spacing-6: 1.5rem;    /* 24px */
  --spacing-8: 2rem;      /* 32px */
  --spacing-10: 2.5rem;   /* 40px */
  --spacing-12: 3rem;     /* 48px */
  --spacing-16: 4rem;     /* 64px */
  --spacing-20: 5rem;     /* 80px */
  --spacing-24: 6rem;     /* 96px */

  /* Semantic spacing aliases */
  --spacing-xs: var(--spacing-1);   /* 4px */
  --spacing-sm: var(--spacing-2);   /* 8px */
  --spacing-md: var(--spacing-4);   /* 16px */
  --spacing-lg: var(--spacing-6);   /* 24px */
  --spacing-xl: var(--spacing-8);   /* 32px */
  --spacing-2xl: var(--spacing-12); /* 48px */

  /* ==========================================
   * BORDER RADIUS (More generous for modern look)
   * ========================================== */
  --radius-none: 0;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-3xl: 28px;
  --radius-4xl: 36px;
  --radius-full: 9999px;

  /* Component-specific radius */
  --radius-button: var(--radius-lg);
  --radius-button-pill: var(--radius-full);
  --radius-card: var(--radius-xl);
  --radius-modal: var(--radius-2xl);
  --radius-input: var(--radius-md);
  --radius-badge: var(--radius-full);

  /* ==========================================
   * SHADOWS - Dark theme (deeper, more dramatic)
   * ========================================== */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.35), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.15);
  --shadow-focus: 0 0 0 3px rgba(163, 163, 163, 0.2);
  --shadow-focus-error: 0 0 0 3px rgba(239, 68, 68, 0.4);
  --shadow-focus-success: 0 0 0 3px rgba(16, 185, 129, 0.4);

  /* Glow Effects - subtle for neutral theme, accent for important elements */
  --glow-primary: 0 0 20px rgba(163, 163, 163, 0.15), 0 0 40px rgba(163, 163, 163, 0.08);
  --glow-primary-intense: 0 0 30px rgba(163, 163, 163, 0.25), 0 0 60px rgba(163, 163, 163, 0.12);
  --glow-accent: 0 0 25px rgba(139, 92, 246, 0.4), 0 0 50px rgba(139, 92, 246, 0.2);
  --glow-success: 0 0 25px rgba(16, 185, 129, 0.4), 0 0 50px rgba(16, 185, 129, 0.2);
  --glow-error: 0 0 25px rgba(239, 68, 68, 0.4), 0 0 50px rgba(239, 68, 68, 0.2);
  --glow-warning: 0 0 25px rgba(245, 158, 11, 0.4), 0 0 50px rgba(245, 158, 11, 0.2);
  --glow-cyan: 0 0 25px var(--color-accent-cyan-glow), 0 0 50px rgba(77, 202, 250, 0.2);
  --glow-orange: 0 0 25px var(--color-accent-orange-glow), 0 0 50px rgba(233, 107, 52, 0.2);

  /* Elevated shadows (for cards on hover) */
  --shadow-elevated: 0 16px 32px -8px rgba(0, 0, 0, 0.12), 0 6px 12px -4px rgba(0, 0, 0, 0.06);
  --shadow-elevated-xl: 0 24px 48px -12px rgba(0, 0, 0, 0.16), 0 8px 16px -6px rgba(0, 0, 0, 0.08);

  /* ==========================================
   * GLASSMORPHISM - True Neutral Dark Theme (Jan 2026)
   * Pure greyscale glass effect
   * ========================================== */
  /* Glass backgrounds - Pure neutral */
  --glass-bg: rgba(26, 26, 26, 0.6);
  --glass-bg-strong: rgba(26, 26, 26, 0.8);
  --glass-bg-subtle: rgba(26, 26, 26, 0.4);

  /* Glass borders - Neutral */
  --glass-border: rgba(163, 163, 163, 0.12);
  --glass-border-subtle: rgba(163, 163, 163, 0.06);
  --glass-border-accent: rgba(163, 163, 163, 0.25);

  /* Backdrop blur values */
  --glass-blur-sm: blur(16px);
  --glass-blur-md: blur(24px);
  --glass-blur-lg: blur(36px);
  --glass-blur-xl: blur(56px);

  /* Glass shadows - Dark theme (more pronounced) */
  --glass-shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.25), 0 1px 4px rgba(0, 0, 0, 0.15);
  --glass-shadow-md: 0 8px 32px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.2);
  --glass-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.35), 0 4px 16px rgba(0, 0, 0, 0.25);
  --glass-shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.3);

  /* Neumorphic shadows - Dark theme */
  --neu-shadow-raised: 6px 6px 16px rgba(0, 0, 0, 0.4), -6px -6px 16px rgba(255, 255, 255, 0.02);
  --neu-shadow-raised-hover: 8px 8px 20px rgba(0, 0, 0, 0.5), -8px -8px 20px rgba(255, 255, 255, 0.03);

  /* Neumorphic shadows (concave/inset) - Dark theme */
  --neu-shadow-inset: inset 4px 4px 12px rgba(0, 0, 0, 0.3), inset -4px -4px 12px rgba(255, 255, 255, 0.01);
  --neu-shadow-inset-deep: inset 6px 6px 16px rgba(0, 0, 0, 0.4), inset -6px -6px 16px rgba(255, 255, 255, 0.02);

  /* Glass shine gradient overlay - Subtle */
  --glass-shine: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 50%, rgba(255, 255, 255, 0) 100%);

  /* Page background gradient - Pure neutral dark */
  --page-bg-gradient: linear-gradient(180deg, #0a0a0a 0%, #141414 100%);

  /* Accent gradient (soft neutral version) */
  --accent-gradient-soft: linear-gradient(135deg, rgba(163, 163, 163, 0.08) 0%, rgba(115, 115, 115, 0.05) 100%);

  /* ==========================================
   * TRANSITIONS & EASING (Modern cubic-bezier curves)
   * ========================================== */
  /* Easing functions */
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);

  /* Duration values */
  --duration-instant: 100ms;
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-moderate: 300ms;
  --duration-slow: 400ms;
  --duration-slower: 500ms;

  /* Transition presets */
  --transition-fast: 150ms var(--ease-out);
  --transition-base: 200ms var(--ease-in-out);
  --transition-slow: 300ms var(--ease-in-out);
  --transition-slower: 500ms var(--ease-in-out);

  /* Specific Transitions */
  --transition-colors: color 200ms var(--ease-in-out), background-color 200ms var(--ease-in-out), border-color 200ms var(--ease-in-out);
  --transition-transform: transform 200ms var(--ease-out);
  --transition-opacity: opacity 200ms var(--ease-in-out);
  --transition-shadow: box-shadow 200ms var(--ease-in-out);
  --transition-all: all 200ms var(--ease-in-out);

  /* Interactive element transitions */
  --transition-button: all 200ms var(--ease-out), transform 150ms var(--ease-bounce);
  --transition-card: transform 300ms var(--ease-out), box-shadow 300ms var(--ease-in-out);
  --transition-link: color 150ms var(--ease-out), text-decoration-color 150ms var(--ease-out);
  --transition-input: border-color 200ms var(--ease-in-out), box-shadow 200ms var(--ease-in-out);

  /* ==========================================
   * Z-INDEX SCALE
   * ========================================== */
  --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-max: 9999;

  /* ==========================================
   * LAYOUT
   * ========================================== */
  --sidebar-width: 260px;
  --sidebar-collapsed-width: 70px;
  --header-height: 70px;
  --content-max-width: 1400px;
  --container-padding: var(--spacing-6);

  /* Breakpoints (for reference - use in media queries) */
  /* --breakpoint-sm: 640px; */
  /* --breakpoint-md: 768px; */
  /* --breakpoint-lg: 1024px; */
  /* --breakpoint-xl: 1280px; */
  /* --breakpoint-2xl: 1536px; */

  /* ==========================================
   * FORM ELEMENTS (Larger touch targets)
   * ========================================== */
  --input-height: 44px;
  --input-height-sm: 36px;
  --input-height-lg: 52px;
  --input-height-xl: 56px;
  --input-padding-x: var(--spacing-4);
  --input-padding-y: var(--spacing-3);
  --input-border-width: 1px;
  --input-border-radius: var(--radius-input);
  --input-bg: var(--color-white);
  --input-border: var(--color-border);
  --input-border-focus: var(--color-primary);
  --input-text: var(--color-text-primary);
  --input-placeholder: var(--color-text-muted);

  /* ==========================================
   * BUTTONS (Enhanced with modern styles)
   * ========================================== */
  --btn-height: 44px;
  --btn-height-sm: 36px;
  --btn-height-lg: 52px;
  --btn-height-xl: 56px;
  --btn-padding-x: var(--spacing-5);
  --btn-padding-x-lg: var(--spacing-8);
  --btn-padding-y: var(--spacing-3);
  --btn-border-radius: var(--radius-button);
  --btn-font-weight: var(--font-weight-semibold);

  /* Button scale on hover */
  --btn-hover-scale: 1.02;
  --btn-active-scale: 0.98;

  /* ==========================================
   * CARDS (Enhanced with hover effects)
   * ========================================== */
  --card-bg: var(--color-white);
  --card-border: var(--color-border);
  --card-border-width: 1px;
  --card-border-radius: var(--radius-card);
  --card-shadow: var(--shadow-sm);
  --card-shadow-hover: var(--shadow-elevated);
  --card-padding: var(--spacing-6);

  /* ==========================================
   * TABLES
   * ========================================== */
  --table-header-bg: var(--color-bg-secondary);
  --table-row-hover: var(--color-bg-tertiary);
  --table-border: var(--color-border);
  --table-cell-padding: var(--spacing-3) var(--spacing-4);

  /* ==========================================
   * BADGES / TAGS
   * ========================================== */
  --badge-padding: var(--spacing-1) var(--spacing-2);
  --badge-border-radius: var(--radius-full);
  --badge-font-size: var(--font-size-xs);
  --badge-font-weight: var(--font-weight-medium);

  /* ==========================================
   * ALERTS / NOTIFICATIONS
   * ========================================== */
  --alert-padding: var(--spacing-4);
  --alert-border-radius: var(--radius-lg);
  --alert-border-width: 1px;

  /* ==========================================
   * MODAL - Dark theme defaults
   * ========================================== */
  --modal-backdrop-bg: rgba(0, 0, 0, 0.7);
  --modal-bg: var(--color-bg-secondary);
  --modal-border-radius: var(--radius-2xl);
  --modal-shadow: var(--shadow-2xl);
  --modal-width-sm: 400px;
  --modal-width-md: 500px;
  --modal-width-lg: 700px;
  --modal-width-xl: 900px;

  /* ==========================================
   * TOAST - Dark theme defaults
   * ========================================== */
  --toast-bg: var(--color-bg-secondary);
  --toast-border-radius: var(--radius-lg);
  --toast-shadow: var(--shadow-lg);
  --toast-max-width: 400px;
  --toast-padding: var(--spacing-4);
}

/* ==========================================
 * UNIFIED DARK UI - January 2026
 * Dark theme is now the default in :root
 * No light/dark toggle - single premium dark theme
 * ========================================== */

/* Legacy selector support for backwards compatibility */
[data-theme="dark"] {
  /* Already using dark theme by default, no overrides needed */
}

/* ==========================================
 * ANIMATION KEYFRAMES (Enhanced modern animations)
 * ========================================== */

/* Fade animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Scale animations */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes scaleInBounce {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  70% {
    transform: scale(1.02);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes popIn {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  40% {
    transform: scale(1.05);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Slide animations */
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Loading and feedback animations */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(163, 163, 163, 0.3);
  }
  50% {
    box-shadow: 0 0 20px 10px rgba(163, 163, 163, 0.15);
  }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* Attention animations */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}

@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-3deg); }
  75% { transform: rotate(3deg); }
}

/* Gradient animation */
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Float animation (for decorative elements) */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* ==========================================
 * ANIMATION UTILITY CLASSES
 * ========================================== */
.animate-fade-in {
  animation: fadeIn 0.3s var(--ease-out) forwards;
}

.animate-fade-in-up {
  animation: fadeInUp 0.4s var(--ease-out) forwards;
}

.animate-fade-in-down {
  animation: fadeInDown 0.4s var(--ease-out) forwards;
}

.animate-scale-in {
  animation: scaleIn 0.2s var(--ease-out) forwards;
}

.animate-scale-in-bounce {
  animation: scaleInBounce 0.4s var(--ease-out) forwards;
}

.animate-pop-in {
  animation: popIn 0.3s var(--ease-bounce) forwards;
}

.animate-slide-in-left {
  animation: slideInLeft 0.3s var(--ease-out) forwards;
}

.animate-slide-in-right {
  animation: slideInRight 0.3s var(--ease-out) forwards;
}

.animate-slide-up {
  animation: slideUp 0.4s var(--ease-out) forwards;
}

.animate-pulse {
  animation: pulse 2s var(--ease-in-out) infinite;
}

.animate-pulse-glow {
  animation: pulseGlow 2s var(--ease-in-out) infinite;
}

.animate-spin {
  animation: spin 1s linear infinite;
}

.animate-bounce {
  animation: bounce 1s var(--ease-in-out) infinite;
}

.animate-shake {
  animation: shake 0.5s var(--ease-in-out);
}

.animate-wiggle {
  animation: wiggle 0.5s var(--ease-in-out);
}

.animate-float {
  animation: float 3s var(--ease-in-out) infinite;
}

.animate-gradient {
  background-size: 200% 200%;
  animation: gradientShift 3s ease infinite;
}

/* ==========================================
 * STAGGER DELAY UTILITIES (For sequential animations)
 * ========================================== */
.stagger-1 { animation-delay: 0.05s; }
.stagger-2 { animation-delay: 0.1s; }
.stagger-3 { animation-delay: 0.15s; }
.stagger-4 { animation-delay: 0.2s; }
.stagger-5 { animation-delay: 0.25s; }
.stagger-6 { animation-delay: 0.3s; }
.stagger-7 { animation-delay: 0.35s; }
.stagger-8 { animation-delay: 0.4s; }
.stagger-9 { animation-delay: 0.45s; }
.stagger-10 { animation-delay: 0.5s; }

/* Legacy aliases */
.delay-1 { animation-delay: 0.05s; }
.delay-2 { animation-delay: 0.1s; }
.delay-3 { animation-delay: 0.15s; }
.delay-4 { animation-delay: 0.2s; }
.delay-5 { animation-delay: 0.25s; }

/* Animation initial states (use with stagger) */
.animate-initial-hidden {
  opacity: 0;
}

.animate-initial-below {
  opacity: 0;
  transform: translateY(20px);
}

.animate-initial-left {
  opacity: 0;
  transform: translateX(-20px);
}

.animate-initial-right {
  opacity: 0;
  transform: translateX(20px);
}

.animate-initial-scale {
  opacity: 0;
  transform: scale(0.95);
}

/* ==========================================
 * REDUCED MOTION SUPPORT
 * ========================================== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-base: 0ms;
    --transition-slow: 0ms;
    --transition-slower: 0ms;
    --transition-colors: none;
    --transition-transform: none;
    --transition-opacity: none;
    --transition-shadow: none;
    --transition-all: none;
  }

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