/* ==========================================
   EFFECTS (Shadows, Transitions, Animations)
   ========================================== */

:root {
  /* Box Shadows (modern, softer multi-layer) */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 8px 18px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 18px 36px rgba(0, 0, 0, 0.12), 0 6px 14px rgba(0, 0, 0, 0.06);
  --shadow-xl: 0 28px 60px rgba(0, 0, 0, 0.16), 0 12px 24px rgba(0, 0, 0, 0.08);
  --shadow-2xl: 0 48px 110px rgba(0, 0, 0, 0.22);
  --shadow-inner: inset 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-ring: 0 0 0 3px rgba(var(--color-accent-rgb), 0.18);

  /* Transitions */
  --transition-fast: 120ms var(--ease-out);
  --transition-base: 180ms var(--ease-out);
  --transition-slow: 260ms var(--ease-out);
  --transition-slower: 420ms var(--ease-out);

  /* Transition Properties */
  --transition: all var(--transition-base);
  --transition-colors: color var(--transition-base), background-color var(--transition-base), border-color var(--transition-base);
  --transition-transform: transform var(--transition-base);
  --transition-opacity: opacity var(--transition-base);

  /* Animation Durations */
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --duration-slow: 260ms;
  --duration-slower: 420ms;

  /* Easing Functions */
  --ease-in: cubic-bezier(0.32, 0, 0.67, 0);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

[data-theme='dark'] {
  /* Dark Theme - Deeper Shadows with less haze */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 10px 22px rgba(0, 0, 0, 0.45), 0 3px 10px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 22px 44px rgba(0, 0, 0, 0.55), 0 8px 18px rgba(0, 0, 0, 0.35);
  --shadow-xl: 0 34px 72px rgba(0, 0, 0, 0.65), 0 14px 28px rgba(0, 0, 0, 0.4);
  --shadow-2xl: 0 60px 130px rgba(0, 0, 0, 0.75);
}