:root{
  /* Breakpoints — mobile-first; the app kit stops at sm, the site starts at md */
  --bp-sm:600px; /* @kind other */
  --bp-md:900px; /* @kind other */
  --bp-lg:1200px; /* @kind other */
  --bp-xl:1440px; /* @kind other */

  /* Stacking order — never author a raw z-index */
  --z-base:0; /* @kind other */
  --z-raised:1; /* @kind other */
  --z-sticky:10; /* @kind other */
  --z-nav:20; /* @kind other */
  --z-scrim:50; /* @kind other */
  --z-sheet:60; /* @kind other */
  --z-toast:70; /* @kind other */
  --z-tooltip:80; /* @kind other */

  /* Focus — one ring for the whole system, copper on light and dark */
  --focus-ring-width:2px; /* @kind spacing */
  --focus-ring-offset:2px; /* @kind spacing */
  --focus-ring-color:var(--accent);
  --focus-ring:0 0 0 var(--focus-ring-width) var(--focus-ring-color);

  /* Opacity */
  --opacity-disabled:.45; /* @kind other */
  --opacity-muted:.7; /* @kind other */
  --opacity-scrim:.55; /* @kind other */
  --opacity-hairline:.12; /* @kind other */
}
:where(a,button,[role=button],input,select,textarea,[tabindex]):focus-visible{
  outline:var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset:var(--focus-ring-offset);
}