/* BUG-F0-86 -- Elevation scale.
 *
 * Layered, low-opacity shadows in the Linear / Vercel / Stripe idiom:
 * a tight contact shadow plus a soft ambient shadow that grows with the
 * elevation step, never a single heavy 2010s drop-shadow.
 *
 *   --elev-0  flat        no shadow
 *   --elev-1  hairline    resting cards, inputs, KPIs
 *   --elev-2  raised      hovered card, sticky bars
 *   --elev-3  overlay     dropdowns, popovers, user menu
 *   --elev-4  modal       dialog / sheet
 *   --elev-5  spotlight   command palette, the topmost surface
 *
 * Dark mode inverts the shadow colour to pure black (a slate-tinted
 * shadow is invisible on a dark surface) and deepens it, so the same
 * step still reads as "lifted" against `--bg-page`.
 *
 * This file is pulled in by the `@import` hub at the top of
 * `shell/shell.css`, so every page and the shell frame get it without a
 * per-page <link>. The `--elev-*` token NAMES are preserved from the
 * original shell.css ramp; `--elev-5` is the only addition.
 */

:root {
  --elev-0: none;
  --elev-1: 0 1px 2px rgba(16, 24, 40, 0.06);
  --elev-2: 0 1px 2px rgba(16, 24, 40, 0.06), 0 2px 4px rgba(16, 24, 40, 0.05);
  --elev-3: 0 2px 4px rgba(16, 24, 40, 0.06), 0 6px 16px rgba(16, 24, 40, 0.09);
  --elev-4: 0 4px 8px rgba(16, 24, 40, 0.08), 0 16px 32px rgba(16, 24, 40, 0.12);
  --elev-5: 0 8px 16px rgba(16, 24, 40, 0.10), 0 28px 56px rgba(16, 24, 40, 0.16);
}

/* `:root[data-theme="dark"]` (specificity 0,2,0) wins over a plain
 * `:root` regardless of source order, so the `@import` order of the
 * token files never matters. */
:root[data-theme="dark"] {
  --elev-0: none;
  --elev-1: 0 1px 2px rgba(0, 0, 0, 0.45);
  --elev-2: 0 1px 2px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.40);
  --elev-3: 0 2px 6px rgba(0, 0, 0, 0.55), 0 8px 20px rgba(0, 0, 0, 0.50);
  --elev-4: 0 6px 16px rgba(0, 0, 0, 0.60), 0 20px 44px rgba(0, 0, 0, 0.55);
  --elev-5: 0 12px 28px rgba(0, 0, 0, 0.65), 0 32px 64px rgba(0, 0, 0, 0.60);
}

/* ---------------------------------------------------------------- */
/* Utility classes                                                  */
/* ---------------------------------------------------------------- */

.bf-elev-0 { box-shadow: var(--elev-0); }
.bf-elev-1 { box-shadow: var(--elev-1); }
.bf-elev-2 { box-shadow: var(--elev-2); }
.bf-elev-3 { box-shadow: var(--elev-3); }
.bf-elev-4 { box-shadow: var(--elev-4); }
.bf-elev-5 { box-shadow: var(--elev-5); }