/* Elevation: shadows, floating controls, fields, focus rings and the layering (z-index) scale. */
:root{
  --shadow-card:0 1px 2px rgba(21,25,24,0.04),0 2px 12px rgba(21,25,24,0.05);
  --shadow-raised:0 1px 2px rgba(21,25,24,0.05),0 8px 24px rgba(21,25,24,0.08);
  --shadow-overlay:0 2px 4px rgba(21,25,24,0.06),0 16px 48px rgba(21,25,24,0.14);
  /* Elevation scale: 0 flat · 1 resting · 2 raised · 3 overlay · 4 modal */
  --elevation-0:none;
  --elevation-1:var(--shadow-card);
  --elevation-2:var(--shadow-raised);
  --elevation-3:var(--shadow-overlay);
  --elevation-4:0 4px 8px rgba(21,25,24,0.08),0 24px 64px rgba(21,25,24,0.20);
  --shadow-modal:var(--elevation-4);
  /* Floating buttons: borderless, lifted off the ground by shadow alone */
  --shadow-float:0 1px 2px rgba(21,25,24,0.08),0 3px 10px rgba(21,25,24,0.08);
  --shadow-float-hover:0 2px 4px rgba(21,25,24,0.08),0 8px 20px rgba(21,25,24,0.12);
  --shadow-float-press:0 1px 2px rgba(21,25,24,0.10);
  --shadow-float-primary:0 1px 2px rgba(23,63,56,0.22),0 4px 12px rgba(23,63,56,0.20);
  --shadow-float-primary-hover:0 2px 4px rgba(23,63,56,0.22),0 10px 24px rgba(23,63,56,0.26);
  --shadow-float-primary-press:0 1px 2px rgba(23,63,56,0.28);
  /* Fields: borderless, lifted by shadow; focus adds the lacquer ring on top */
  --shadow-field:var(--shadow-float);
  --shadow-field-hover:var(--shadow-float-hover);
  --shadow-field-focus:0 0 0 2px var(--color-bg-surface),0 0 0 4px var(--color-focus-ring),var(--shadow-float);
  --shadow-field-error:inset 0 0 0 1px var(--color-status-error),var(--shadow-float);
  /* Layering scale (M86). One scale for the page; every overlay reads a token, never a literal.
     Floating layers portal to the nearest layer host (document.body, or the open dialog/drawer/panel),
     so a nested menu stacks inside its host and a later dialog always covers an earlier popover. */
  --z-base:0; /* @kind other */
  --z-sticky:10; /* @kind other */ /* sticky nav, table headers, rails */
  --z-dropdown:40; /* @kind other */ /* dropdown listboxes, date/time panels */
  --z-popover:var(--z-dropdown); /* @kind other */ /* menus, popovers, hover cards, cell menus: same layer as dropdowns (M85) */
  --z-drawer:60; /* @kind other */ /* side and bottom drawers, with their scrim */
  --z-modal:70; /* @kind other */ /* dialogs, command menu, picker sheet, with their scrim */
  --z-toast:80; /* @kind other */ /* toasts, snackbars */
  --z-tooltip:90; /* @kind other */ /* tooltips: transient, never interactive, always on top */
  /* Inline layers: stacking inside one component only. All sit below --z-sticky so they never compete with page layers. */
  --z-inline-raised:1; /* @kind other */ /* label above its own sliding thumb, sticky table header cell */
  --z-inline-sticky:2; /* @kind other */ /* sticky section heading inside a scrolling list; scroller arrows */
  --z-inline-sticky-top:3; /* @kind other */ /* a sticky control above a sticky heading */
  --z-inline-cover:4; /* @kind other */ /* a panel that covers its own list (year picker) */
  --inset-rule:inset 0 0 0 1px var(--color-border-default);
  --focus-ring:0 0 0 2px var(--color-bg-surface),0 0 0 4px var(--color-focus-ring);
  --focus-ring-photo:0 0 0 2px var(--lt-white),0 0 0 4px var(--lt-lacquer-700),0 0 0 6px var(--lt-white); /* controls on photography only */
}