/*
 * JDS — Elevation tokens.
 *
 * New foundation layer (2026-07-24) — previously missing entirely; flagged
 * as an open item since repo-cutover.md decision #3. Pulled from Figma's
 * local Effect Styles (figma.getLocalEffectStylesAsync) and cross-checked
 * against live usage on real components (Card hover, Dropdown, Modal,
 * Drawer, Toast, Combobox menu, Tooltip all reference these exact style
 * IDs) — these are the shipping values, not a draft.
 *
 * KNOWN CONFLICT, flagged not silently resolved: the Figma "Elevation"
 * foundation page also carries a "Design token" table naming a DIFFERENT,
 * differently-valued system (`jds-elevation-float-0..3`,
 * `jds-elevation-raise-top/bottom`) — e.g. float-1 documents an alpha of
 * 0.8 where every sibling row uses 0.08 (looks like a typo). Checked live
 * component usage (Card/Dropdown/Modal/Drawer/Toast/Combobox/Tooltip) —
 * none reference float/raise; all reference the elevation-surface-*/
 * elevation-edge-* effect styles below. Treating the effect styles as
 * source of truth (they're what's bound to real components); the
 * float/raise table reads as stale/unshipped documentation — needs a
 * human decision on whether to update or delete that table. 🔵
 *
 * Naming: kept 1:1 with the Figma effect style names (no jds- prefix
 * in Figma's own names for these, unlike Motion's jds-motion-* — not
 * renamed here either, per the 1:1 rule).
 */

:root {
  /* ---- Focus ring (inner shadow, not a surface elevation) ---- */
  --jds-focus-border: inset 0 0 0 2px var(--jds-blue-500);

  /* ---- Surface elevation (drop shadows, increasing "float" height) ---- */
  --jds-elevation-surface-1: 0 0 2px rgba(14, 14, 14, 0.16);
  --jds-elevation-surface-2:
    0 2px 4px rgba(14, 14, 14, 0.08),
    0 0 2px rgba(14, 14, 14, 0.16);
  --jds-elevation-surface-3:
    0 4px 8px rgba(14, 14, 14, 0.08),
    0 0 2px rgba(14, 14, 14, 0.16);
  --jds-elevation-surface-4:
    0 8px 16px rgba(14, 14, 14, 0.08),
    0 0 2px rgba(14, 14, 14, 0.16);
  --jds-elevation-surface-5:
    0 16px 32px rgba(14, 14, 14, 0.08),
    0 0 2px rgba(14, 14, 14, 0.16);

  /* ---- Edge shadows (directional — e.g. a sticky header/footer edge) ---- */
  --jds-elevation-edge-top: 0 -2px 4px rgba(14, 14, 14, 0.08);
  --jds-elevation-edge-bottom: 0 2px 4px rgba(14, 14, 14, 0.08);
}

/*
 * Verified live usage (2026-07-24 audit):
 *   elevation-surface-3 → Dropdown, Modal, Drawer, Combobox menu, Tooltip wrapper-number
 *   elevation-surface-4 → Toast, Tooltip
 *   elevation-surface-5 → Card (hover/instance)
 *   focus-border         → Card (focus state), Combobox input
 * surface-1/2 and edge-top/edge-bottom exist as styles but weren't found
 * bound to any of the 7 components spot-checked — real tokens, just not
 * yet consumed; kept for completeness (Figma is the source of truth even
 * for as-yet-unused styles).
 */