/**
 * ========================================
 * DESIGN TOKENS - 2025 EDITION
 * ========================================
 *
 * Centralized values for consistency
 * and ease of maintaining animations throughout the project
 */

:root {
  /* ==================== ANIMATION DURATIONS ==================== */

  /* Micro-interactions (buttons, icons, hover) */
  --duration-instant: 0.1s;      /* Instant reactions */
  --duration-fast: 0.2s;         /* Fast effects */
  --duration-base: 0.3s;         /* Standard transitions */
  --duration-moderate: 0.4s;     /* Medium effects */
  --duration-slow: 0.6s;         /* Slow appearances */
  --duration-slower: 0.8s;       /* Very slow */
  --duration-slowest: 1s;        /* Dramatic effects */

  /* ==================== EASING FUNCTIONS ==================== */

  /* Standard from Material Design 3.0 */
  --ease-linear: linear;
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.6, 1);

  /* Apple-style (smooth & natural) */
  --ease-apple: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-apple-quick: cubic-bezier(0.25, 0.1, 0.25, 1);

  /* Special */
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6);
  --ease-overshoot: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ==================== TRANSFORM VALUES ==================== */

  /* Lift distances (translateY) */
  --lift-xs: -2px;
  --lift-help: -3px;    /* For Help Center style cards */
  --lift-sm: -4px;
  --lift-md: -8px;
  --lift-lg: -12px;
  --lift-xl: -16px;

  /* Scale values */
  --scale-xs: 1.01;
  --scale-sm: 1.02;
  --scale-md: 1.05;
  --scale-lg: 1.1;
  --scale-xl: 1.15;

  /* Rotate values */
  --rotate-sm: 2deg;
  --rotate-md: 5deg;
  --rotate-lg: 10deg;

  /* ==================== SHADOWS ==================== */

  /* Elevated states */
  --shadow-xs: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-sm: 0 4px 8px rgba(0, 0, 0, 0.12);
  --shadow-md: 0 8px 16px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.18);
  --shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.2);
  --shadow-2xl: 0 24px 48px rgba(0, 0, 0, 0.25);

  /* Colored shadows (for premium effects) */
  --shadow-primary: 0 8px 24px rgba(102, 126, 234, 0.3);
  --shadow-secondary: 0 8px 24px rgba(240, 147, 251, 0.3);
  --shadow-success: 0 8px 24px rgba(6, 214, 160, 0.3);
  --shadow-warning: 0 8px 24px rgba(255, 154, 86, 0.3);

  /* ==================== BLUR VALUES ==================== */

  --blur-xs: 4px;
  --blur-sm: 8px;
  --blur-md: 12px;
  --blur-lg: 16px;
  --blur-xl: 24px;

  /* ==================== OPACITY VALUES ==================== */

  --opacity-disabled: 0.4;
  --opacity-muted: 0.6;
  --opacity-subtle: 0.8;
  --opacity-hover: 0.9;

  /* ==================== STAGGER DELAYS ==================== */

  /* For sequential element appearance */
  --stagger-1: 0.05s;
  --stagger-2: 0.1s;
  --stagger-3: 0.15s;
  --stagger-4: 0.2s;
  --stagger-5: 0.25s;

  /* ==================== Z-INDEX LAYERS ==================== */

  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;
  --z-notification: 800;
  --z-loader: 900;
  --z-top: 9999;

  /* ==================== BORDER RADIUS ==================== */

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* ==================== GRADIENT ANIMATIONS ==================== */

  --gradient-shift-speed: 8s;
  --shimmer-speed: 0.8s;     /* Fast shimmer like in Help Center */
  --pulse-speed: 2s;
}

/* ==================== ANIMATION LEVELS ==================== */

/* Used for conditional loading */
[data-animation-level="maximum"] {
  --enable-parallax: 1;
  --enable-floating-shapes: 1;
  --enable-scroll-animations: 1;
  --enable-micro-interactions: 1;
  --enable-gradient-shift: 1;
}

[data-animation-level="basic"] {
  --enable-parallax: 0;
  --enable-floating-shapes: 0;
  --enable-scroll-animations: 0.5;
  --enable-micro-interactions: 1;
  --enable-gradient-shift: 0;
}

[data-animation-level="minimal"] {
  --enable-parallax: 0;
  --enable-floating-shapes: 0;
  --enable-scroll-animations: 0;
  --enable-micro-interactions: 0.5;
  --enable-gradient-shift: 0;
}

/* ==================== REDUCED MOTION ==================== */

/* Respecting user preferences */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0.01s;
    --duration-fast: 0.01s;
    --duration-base: 0.01s;
    --duration-moderate: 0.01s;
    --duration-slow: 0.01s;
    --duration-slower: 0.01s;
    --duration-slowest: 0.01s;

    --enable-parallax: 0;
    --enable-floating-shapes: 0;
    --enable-scroll-animations: 0;
    --enable-gradient-shift: 0;
  }
}

/* ==================== PERFORMANCE HINTS ==================== */

/* For browsers: enable GPU acceleration */
.gpu-accelerate {
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

/* Hint to browser about future changes */
.will-animate {
  will-change: transform, opacity;
}

.will-animate-transform {
  will-change: transform;
}

.will-animate-opacity {
  will-change: opacity;
}

/* Clear will-change after animation */
.animation-done {
  will-change: auto;
}