/* ==========================================================================
   Compresso — Shadow & elevation tokens
   Soft, diffuse, low-opacity "clay" shadows — never harsh. Two families:
   neutral elevation (slate-tinted) and accent glow (teal-tinted) for the
   primary CTA and hero surfaces. Dark theme swaps to deeper, softer casts.
   ========================================================================== */

:root {
  /* Neutral elevation */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 6px 16px -6px rgba(15, 23, 42, 0.10), 0 2px 6px -2px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 16px 36px -12px rgba(15, 23, 42, 0.14), 0 6px 14px -8px rgba(15, 23, 42, 0.08);
  --shadow-xl: 0 30px 64px -18px rgba(15, 23, 42, 0.20), 0 10px 22px -12px rgba(15, 23, 42, 0.10);
  --shadow-2xl: 0 48px 96px -24px rgba(15, 23, 42, 0.28);

  /* Accent (teal) glow — CTA hover, hero device */
  --shadow-accent:    0 14px 34px -12px rgba(15, 181, 174, 0.45);
  --shadow-accent-lg: 0 26px 60px -18px rgba(15, 181, 174, 0.50);

  /* Inset well (sliders tracks, code blocks) */
  --shadow-inset: inset 0 1px 2px rgba(15, 23, 42, 0.08);

  /* Focus ring (pair with outline-offset) */
  --ring: 0 0 0 4px var(--color-ring);
}

:root[data-theme="dark"] {
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 6px 18px -6px rgba(0, 0, 0, 0.55), 0 2px 6px -2px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 18px 40px -12px rgba(0, 0, 0, 0.6), 0 6px 14px -8px rgba(0, 0, 0, 0.45);
  --shadow-xl: 0 32px 70px -18px rgba(0, 0, 0, 0.68);
  --shadow-2xl: 0 52px 100px -24px rgba(0, 0, 0, 0.75);

  --shadow-accent:    0 14px 34px -12px rgba(35, 195, 187, 0.42);
  --shadow-accent-lg: 0 26px 60px -18px rgba(35, 195, 187, 0.46);

  --shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.5);
}