/* ============================================================
   SHADOWS & MOTION — Suggest Design System
   Shadows are whisper-soft and neutral (never colored except
   for the brand-glow used on primary CTAs). Motion is quick
   and gentle — short fades + ease-out, no bounce.
   ============================================================ */

:root {
  --shadow-xs:   0 1px 2px rgba(24, 24, 27, 0.05);
  --shadow-sm:   0 1px 3px rgba(24, 24, 27, 0.06), 0 1px 2px rgba(24, 24, 27, 0.04);
  --shadow-card: 0 1px 2px rgba(24, 24, 27, 0.04), 0 4px 12px rgba(24, 24, 27, 0.04);
  --shadow-md:   0 6px 20px rgba(24, 24, 27, 0.07);
  --shadow-lg:   0 16px 40px rgba(24, 24, 27, 0.10);
  --shadow-pop:  0 12px 32px rgba(24, 24, 27, 0.16);  /* tooltips, menus, dark promo */

  /* Brand glow for primary CTAs */
  --shadow-brand: 0 6px 16px rgba(243, 95, 39, 0.28);

  /* Inset used on subtle track fills */
  --shadow-inset: inset 0 0 0 1px rgba(24, 24, 27, 0.05);

  /* ---- Motion ---- */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1);    /* @kind other */
  --ease-in-out:cubic-bezier(0.45, 0, 0.25, 1);       /* @kind other */
  --dur-fast:   120ms;  /* @kind other */
  --dur-base:   180ms;  /* @kind other */
  --dur-slow:   280ms;  /* @kind other */
  --transition-base: all var(--dur-base) var(--ease-out); /* @kind other */
}