/* ==========================================================================
   DESIGN TOKENS — EFFETS VISUELS
   Glassmorphism chaud · Ombres douces · Transitions
   ========================================================================== */

:root {
  /* ---- Glassmorphism ---- */
  --glass-blur:            blur(16px);
  --glass-blur-heavy:      blur(24px);
  --glass-blur-light:      blur(8px);
  --glass-bg:              var(--color-bg-surface);
  --glass-border:          1px solid hsla(0, 0%, 100%, 0.3);
  --glass-border-subtle:   1px solid hsla(0, 0%, 100%, 0.15);

  /* ---- Skeuomorphisme léger (ombres prune/terracotta) ---- */
  --shadow-xs:             0 1px 2px hsla(330, 41%, 25%, 0.04);
  --shadow-sm:             0 2px 4px hsla(330, 41%, 25%, 0.05),
                           0 1px 2px hsla(330, 41%, 25%, 0.03);
  --shadow-md:             0 4px 12px hsla(330, 41%, 25%, 0.06),
                           0 2px 4px hsla(330, 41%, 25%, 0.04);
  --shadow-lg:             0 10px 30px -8px hsla(330, 41%, 25%, 0.10),
                           0 4px 6px hsla(330, 41%, 25%, 0.04);
  --shadow-xl:             0 20px 50px -12px hsla(330, 41%, 25%, 0.15),
                           0 8px 16px hsla(330, 41%, 25%, 0.06);

  /* Surfaces skeuomorphes (cartes, boutons) */
  --shadow-skeuo-card:     0 10px 30px -10px hsla(330, 41%, 25%, 0.08),
                           inset 0 1px 1px hsla(0, 0%, 100%, 0.5);
  --shadow-skeuo-button:   0 4px 6px hsla(330, 41%, 25%, 0.06),
                           0 1px 3px hsla(330, 41%, 25%, 0.08),
                           inset 0 1px 0 hsla(0, 0%, 100%, 0.4);
  --shadow-skeuo-pressed:  inset 0 2px 4px hsla(330, 41%, 25%, 0.15);

  /* Glow effect (accent hover sur Bento cards) */
  --shadow-glow-primary:   0 0 30px hsla(17, 72%, 56%, 0.15),
                           0 0 60px hsla(17, 72%, 56%, 0.05);
  --shadow-glow-secondary: 0 0 30px hsla(323, 33%, 67%, 0.15),
                           0 0 60px hsla(323, 33%, 67%, 0.05);

  /* ---- Transitions ---- */
  --ease-out-expo:         cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quad:         cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-spring:           cubic-bezier(0.34, 1.56, 0.64, 1);

  --transition-fast:       150ms var(--ease-out-quad);
  --transition-base:       250ms var(--ease-out-expo);
  --transition-smooth:     350ms var(--ease-out-expo);
  --transition-slow:       500ms var(--ease-out-expo);

  /* Durées d'animation */
  --duration-fast:         150ms;
  --duration-base:         250ms;
  --duration-smooth:       350ms;
  --duration-slow:         500ms;
  --duration-entrance:     600ms;
}

/* Dark mode : ombres plus profondes et chaudes */
[data-theme="dark"] {
  --shadow-sm:             0 2px 4px hsla(335, 30%, 5%, 0.2),
                           0 1px 2px hsla(335, 30%, 5%, 0.15);
  --shadow-md:             0 4px 12px hsla(335, 30%, 5%, 0.25),
                           0 2px 4px hsla(335, 30%, 5%, 0.15);
  --shadow-lg:             0 10px 30px -8px hsla(335, 30%, 5%, 0.35),
                           0 4px 6px hsla(335, 30%, 5%, 0.15);
  --shadow-xl:             0 20px 50px -12px hsla(335, 30%, 5%, 0.45),
                           0 8px 16px hsla(335, 30%, 5%, 0.2);
  --shadow-skeuo-card:     0 10px 30px -10px hsla(335, 30%, 5%, 0.3),
                           inset 0 1px 1px hsla(20, 80%, 95%, 0.08);
  --shadow-skeuo-button:   0 4px 6px hsla(335, 30%, 5%, 0.2),
                           0 1px 3px hsla(335, 30%, 5%, 0.15),
                           inset 0 1px 0 hsla(20, 80%, 95%, 0.1);
  --glass-border:          1px solid hsla(20, 80%, 95%, 0.1);
  --glass-border-subtle:   1px solid hsla(20, 80%, 95%, 0.05);
}