/* Borders, elevation, motion, focus, z-index. */
:root{
--border-width:1px;--border-width-strong:1.5px;
/* Elevation — used sparingly; prefer borders + surface contrast */
--shadow-xs:0 1px 2px rgba(14,16,18,.06);
--shadow-sm:0 1px 2px rgba(14,16,18,.04),0 4px 12px -4px rgba(14,16,18,.08);
--shadow-md:0 2px 4px rgba(14,16,18,.04),0 12px 32px -12px rgba(14,16,18,.16);
--shadow-lg:0 4px 8px rgba(14,16,18,.04),0 24px 56px -16px rgba(14,16,18,.24);
/* Focus — 2px ring with 2px gap, always visible on :focus-visible */
--focus-ring:0 0 0 2px var(--bg-page),0 0 0 4px var(--focus-ring-color);
/* Motion */
--dur-instant:80ms /* @kind other */;--dur-fast:140ms /* @kind other */;--dur-base:220ms /* @kind other */;--dur-slow:360ms /* @kind other */;--dur-deliberate:560ms /* @kind other */;
--ease-standard:cubic-bezier(.2,0,0,1) /* @kind other */;--ease-enter:cubic-bezier(0,0,.2,1) /* @kind other */;--ease-exit:cubic-bezier(.4,0,1,1) /* @kind other */;--ease-emphasis:cubic-bezier(.3,0,0,1) /* @kind other */;
/* Layers */
--z-base:0 /* @kind other */;--z-sticky:100 /* @kind other */;--z-header:200 /* @kind other */;--z-dropdown:300 /* @kind other */;--z-overlay:400 /* @kind other */;--z-dialog:500 /* @kind other */;--z-toast:600 /* @kind other */;--z-tooltip:700 /* @kind other */;
/* Icon */
--icon-stroke:1.75 /* @kind other */;--icon-s:16px /* @kind spacing */;--icon-m:20px /* @kind spacing */;--icon-l:24px /* @kind spacing */;
}
[data-theme="dark"]{
--shadow-xs:0 1px 2px rgba(0,0,0,.4);
--shadow-sm:0 1px 2px rgba(0,0,0,.3),0 4px 12px -4px rgba(0,0,0,.4);
--shadow-md:0 2px 4px rgba(0,0,0,.3),0 12px 32px -12px rgba(0,0,0,.6);
--shadow-lg:0 4px 8px rgba(0,0,0,.3),0 24px 56px -16px rgba(0,0,0,.7);
}
@media (prefers-reduced-motion:reduce){:root{--dur-instant:0ms /* @kind other */;--dur-fast:0ms /* @kind other */;--dur-base:0ms /* @kind other */;--dur-slow:0ms /* @kind other */;--dur-deliberate:0ms /* @kind other */}}