/* ================================
   EFFECT TOKENS
   Shadows, borders, radii, transitions
   ================================ */

:root {
  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 14px;
  --radius-2xl: 18px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.35);
  --shadow-xl: 0 12px 30px rgba(0, 0, 0, 0.55);
  --shadow-2xl: 0 20px 60px rgba(0, 0, 0, 0.7), 0 8px 20px rgba(0, 0, 0, 0.5);

  /* Elevated Shadows */
  --shadow-elevated: 0 12px 28px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  --shadow-elevated-hover: 0 16px 40px rgba(0, 0, 0, 0.6), 0 4px 10px rgba(0, 0, 0, 0.35);

  /* Glass Effect Shadows */
  --shadow-glass: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
  --shadow-glass-hover: inset 0 0 0 1px rgba(120, 220, 160, 0.2);

  /* Glow Effects */
  --glow-sm: 0 0 8px rgba(120, 220, 160, 0.2);
  --glow-md: 0 4px 12px rgba(29, 209, 161, 0.15);
  --glow-lg: 0 6px 20px rgba(29, 209, 161, 0.3);

  /* Blur Effects */
  --blur-sm: blur(8px);
  --blur-md: blur(10px);
  --blur-lg: blur(14px);
  --blur-xl: blur(20px);

  /* Backdrop Filter */
  --backdrop-glass: blur(14px) saturate(150%);
  --backdrop-glass-strong: blur(20px) saturate(150%);

  /* Transitions */
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* Transform Values */
  --lift-sm: translateY(-2px);
  --lift-md: translateY(-3px);
  --lift-lg: translateY(-4px);
  --scale-hover: scale(1.02);
  --scale-press: scale(0.98);

  /* Z-Index Layers */
  --z-base: 1;
  --z-dropdown: 10;
  --z-sticky: 100;
  --z-fixed: 500;
  --z-modal-backdrop: 900;
  --z-modal: 1000;
  --z-tooltip: 1100;
}