/* =========================================================================
   Pocket Company — Elevation / Shadow Tokens
   Cool, ink-tinted shadows (rgba of the ink #12151C) — never neutral black.

   The products are FLAT: cards rely on a 1px --border-subtle plus xs/sm at
   most. Reserve md and above for overlays (dropdowns, dialogs, toasts) and
   the brand glow for marketing emphasis, not for in-product buttons.
   ========================================================================= */

:root {
  --shadow-xs:  0 1px 2px rgba(18, 21, 28, 0.05);
  --shadow-sm:  0 1px 3px rgba(18, 21, 28, 0.06), 0 1px 2px rgba(18, 21, 28, 0.03);
  --shadow-md:  0 4px 12px rgba(18, 21, 28, 0.07), 0 2px 4px rgba(18, 21, 28, 0.03);
  --shadow-lg:  0 12px 28px rgba(18, 21, 28, 0.09), 0 4px 10px rgba(18, 21, 28, 0.04);
  --shadow-xl:  0 24px 50px rgba(18, 21, 28, 0.12), 0 8px 16px rgba(18, 21, 28, 0.05);
  --shadow-2xl: 0 36px 80px rgba(18, 21, 28, 0.16);

  /* Brand glow — marketing hero / slide emphasis. Not for product buttons. */
  --shadow-brand:    0 8px 22px rgba(76, 94, 240, 0.20);
  --shadow-brand-sm: 0 2px 8px rgba(76, 94, 240, 0.14);

  /* Inset / sunken */
  --shadow-inset: inset 0 1px 2px rgba(18, 21, 28, 0.06);

  /* Ring used for focus (pairs with --focus-ring in colors.css) */
  --ring-offset: 0 0 0 2px var(--white);
}