/* tokens-radius-shadow-motion-v1 — W-56-3 — Saadjie box-shadow tokens. */
/*
 * Planning: .archon/queued-builds/WAVE-56-design-tokens.md
 *
 * WHY a shadow scale (not ad-hoc box-shadow strings): elevation is a
 * design system invariant. Three steps map to three intent levels:
 *   --shadow-sm = "this element rests on the page" (cards, list rows)
 *   --shadow-md = "this element is interactive / raised" (buttons hover,
 *                  dropdown panels)
 *   --shadow-lg = "this element floats above the page" (modals, popovers)
 *
 * WHY shadows reference --color-shadow (a token): under
 * prefers-color-scheme: dark, white + 12% black looks anemic — the
 * dark-mode override in public/css/tokens/colors.css swaps the rgba()
 * to a pure black at ~45% opacity, which reads correctly on dark
 * surfaces. Hard-coding the shadow color here would defeat that.
 *
 * GOTCHA: shadows are NOT for showing focus state. Focus uses
 * --color-focus-ring + outline (see public/css/reset.css). Mixing the
 * two breaks the WCAG 2.4.7 focus-visible requirement on
 * forced-colors: active.
 *
 * CONSTRAINT: never stack two of these on one element. The shadow scale
 * is a ladder — pick one rung. Compounding shadows muddies the
 * elevation language and inflates paint cost on low-end Android.
 */

:root {
  /* ---------- Box-shadow scale ----------
     WHY two layers per shadow: a sharp ambient layer (0 1px) and a
     softer spread layer (0 Npx Mpx) — single-layer shadows feel
     "drawn on" rather than cast. The first layer survives compositing
     when GPUs round to integer pixels. */
  --shadow-none:    none;

  --shadow-xs:
    0 1px 2px var(--color-shadow);

  --shadow-sm:
    0 1px 2px var(--color-shadow),
    0 2px 4px var(--color-shadow);

  --shadow-md:
    0 2px 4px var(--color-shadow),
    0 4px 12px var(--color-shadow);

  --shadow-lg:
    0 4px 8px var(--color-shadow),
    0 12px 24px var(--color-shadow-strong);

  --shadow-xl:
    0 8px 16px var(--color-shadow),
    0 24px 48px var(--color-shadow-strong);

  /* ---------- Inset shadows ----------
     WHY: inset shadows live in their own band so components can stack
     a raised outer shadow + an inset (e.g. pressed-button state)
     without conflicting tokens. */
  --shadow-inset-sm:
    inset 0 1px 2px var(--color-shadow);
  --shadow-inset-md:
    inset 0 2px 4px var(--color-shadow);

  /* ---------- Focus + selection rings ----------
     WHY a token for the ring shadow (not just outline): some components
     (custom dropdowns, file pickers) replace outline entirely and need
     a box-shadow ring instead. Keeping the ring as a token means the
     focus colour stays in lockstep with --color-focus-ring across both
     paths. */
  --shadow-focus-ring:
    0 0 0 var(--focus-ring-width) var(--color-bg),
    0 0 0 calc(var(--focus-ring-width) + var(--focus-ring-offset)) var(--color-focus-ring);
}