/* Reckon elevation. Shadows are deliberately faint (5% black) — depth in this
   system comes from the 1px hairline highlight, not from drop shadows.
   Every raised control carries: a border, a soft shadow, and a hairline —
   an inset top highlight in light mode, an inset bottom highlight in dark. */
:root{
  --shadow-xs:0 1px 2px 0 rgb(0 0 0/5%);
  --shadow-sm:0 1px 3px 0 rgb(0 0 0/5%),0 1px 2px -1px rgb(0 0 0/5%);
  --shadow-md:0 4px 6px -1px rgb(0 0 0/5%),0 2px 4px -2px rgb(0 0 0/5%);
  --shadow-lg:0 10px 15px -3px rgb(0 0 0/5%),0 4px 6px -4px rgb(0 0 0/5%);

  /* hairline — applied to a ::before inset layer, not to the element itself */
  --hairline:0 1px rgb(0 0 0/4%);
  --hairline-strong:0 1px rgb(0 0 0/6%);
  /* filled controls get a light rim inside the top edge */
  --inset-highlight:inset 0 1px rgb(255 255 255/16%);
  --inset-pressed:inset 0 1px rgb(0 0 0/8%);

  --ring-width:3px;
  --ring-color:color-mix(in srgb,var(--ring) 24%,transparent);
  --backdrop:rgb(0 0 0/32%);
  --backdrop-blur:4px;
}
.dark{
  --hairline:0 -1px rgb(255 255 255/6%);
  --hairline-strong:0 -1px rgb(255 255 255/8%);
  --ring-color:color-mix(in srgb,var(--ring) 48%,transparent);
}
