/* === CSS CUSTOM PROPERTIES === */
/* Animation & Transition Variables */
:root {
  /* Timing Functions - Professional Easing Curves */
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); /* Smooth in-out */
  --ease-in: cubic-bezier(0.4, 0, 1, 1); /* Ease in */
  --ease-out: cubic-bezier(0, 0, 0.2, 1); /* Ease out */
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Bouncy effect */
  --ease-sharp: cubic-bezier(0.4, 0, 0.6, 1); /* Sharp transition */
  --ease-elastic: cubic-bezier(0.68, -0.25, 0.265, 1.25); /* Elastic effect */

  /* Duration Variables - Consistent Timing */
  --transition-instant: 50ms;
  --transition-fast: 150ms;
  --transition-base: 200ms;
  --transition-slow: 300ms;
  --transition-slower: 400ms;
  --transition-slowest: 600ms;

  /* Animation Durations */
  --animation-fast: 250ms;
  --animation-base: 400ms;
  --animation-slow: 600ms;
  --animation-slower: 800ms;

  /* Delays for Staggered Animations */
  --delay-1: 50ms;
  --delay-2: 100ms;
  --delay-3: 150ms;
  --delay-4: 200ms;
  --delay-5: 250ms;

  /* Z-index Layers - Consistent Stacking */
  --z-negative: -1;
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-overlay: 400;
  --z-header: 1000;
  --z-modal-backdrop: 1100;
  --z-modal: 1200;
  --z-popover: 1300;
  --z-tooltip: 1400;
  --z-notification: 1500;

  /* Border Radius - Consistent Roundness */
  --radius-sm: 4px;
  --radius-base: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* Shadows - Professional Depth */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-base: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.14);
  --shadow-2xl: 0 28px 60px rgba(0, 0, 0, 0.16);

  /* Accent Shadows */
  --shadow-accent-sm: 0 4px 14px rgba(0, 102, 204, 0.15);
  --shadow-accent-base: 0 8px 24px rgba(0, 102, 204, 0.2);
  --shadow-accent-lg: 0 12px 36px rgba(0, 102, 204, 0.25);

  /* Focus Ring */
  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;
  --focus-ring-color: rgba(0, 102, 204, 0.4);

  /* Blur Effects */
  --blur-sm: 4px;
  --blur-base: 8px;
  --blur-md: 12px;
  --blur-lg: 16px;
  --blur-xl: 24px;

  /* Grid & Spacing */
  --grid-gap-sm: 0.75rem;
  --grid-gap-base: 1rem;
  --grid-gap-md: 1.5rem;
  --grid-gap-lg: 2rem;
  --grid-gap-xl: 3rem;

  /* Typography */
  --font-size-base: 1.25rem; /* 20px */
}