/* ============================================================
   FlowSpace — Shadow & elevation tokens
   Use the lowest shadow that achieves the hierarchy goal.
   ============================================================ */

:root {
  --shadow-none: none;
  --shadow-xs:   0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm:   0 1px 3px 0 rgba(0, 0, 0, 0.08),
                 0 1px 2px -1px rgba(0, 0, 0, 0.06);
  --shadow-md:   0 4px 6px -1px rgba(0, 0, 0, 0.08),
                 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg:   0 10px 15px -3px rgba(0, 0, 0, 0.08),
                 0 4px 6px -4px rgba(0, 0, 0, 0.04);
  --shadow-xl:   0 20px 25px -5px rgba(0, 0, 0, 0.08),
                 0 8px 10px -6px rgba(0, 0, 0, 0.04);
  --shadow-2xl:  0 25px 50px -12px rgba(0, 0, 0, 0.18);
  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);

  /* Brand-tinted shadows — primary CTAs, highlighted cards */
  --shadow-brand-sm: 0 4px 12px rgba(79, 70, 229, 0.15);
  --shadow-brand-md: 0 8px 24px rgba(79, 70, 229, 0.20);
  --shadow-brand-lg: 0 16px 40px rgba(79, 70, 229, 0.25);

  /* Component-level shadows */
  --shadow-card:     var(--shadow-sm);
  --shadow-modal:    var(--shadow-2xl);
  --shadow-dropdown: var(--shadow-lg);
  --shadow-tooltip:  var(--shadow-md);
}