/* ============================================================
   Shadows, focus, blur — Unified Color System.
   Depth is NEUTRAL slate-tinted now (rgba(15,23,42,…) /
   rgba(2,6,23,…)) — the old cyan/blue-tinted shadows are retired.
   ============================================================ */
:root {
  /* Elevation (from the palette doc) */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12);

  /* Component shadows observed on the v2 pages */
  --shadow-nav: 0 1px 2px rgba(2, 6, 23, 0.16), 0 8px 24px -12px rgba(2, 6, 23, 0.28);
  --shadow-cta: 0 8px 24px -10px rgba(2, 6, 23, 0.5);
  --shadow-cta-hover: 0 10px 22px -8px rgba(2, 6, 23, 0.55);
  --shadow-frame: 0 24px 60px rgba(15, 23, 42, 0.12);

  /* Frosted nav — the ONE glass surface that remains */
  --nav-bg: rgba(255, 255, 255, 0.72);
  --nav-border: var(--color-neutral-200);
  --nav-blur: blur(18px) saturate(150%); /* @kind other */

  /* Framed live-demo mockups (hero product cards) */
  --shadow-mock: 0 1px 2px rgba(2, 6, 23, 0.18), 0 24px 48px -20px rgba(2, 6, 23, 0.4);
  --shadow-toast: 0 18px 40px -18px rgba(2, 6, 23, 0.55);

  /* Overlays */
  --overlay-modal: rgba(15, 23, 42, 0.45);
  --overlay-used: rgba(15, 23, 42, 0.15); /* consumed-portion wash on a filled bar */
  --blur-sm: 4px; /* @kind other */

  /* Focus — accent outline, 2px offset (v2), plus the soft ring */
  --focus-outline: 2px solid var(--accent); /* @kind other */
  --focus-offset: 2px; /* @kind other */
}
[data-theme="dark"] {
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);
  --nav-bg: rgba(15, 23, 42, 0.62);
  --nav-border: var(--color-neutral-700);
  --overlay-modal: rgba(2, 6, 23, 0.6);
  --overlay-used: rgba(248, 250, 252, 0.22);
}