:root{
--radius-none:0px;--radius-xs:4px;--radius-sm:8px;--radius-md:14px;--radius-lg:20px;--radius-xl:32px;--radius-full:9999px;
--radius-card:14px;--radius-input:9999px;--radius-button:9999px;
/* Bottom sheets and full-screen mobile surfaces: top corners only. */
--radius-sheet:20px;
/* Panels lose radius when they go edge-to-edge on mobile. */
--radius-panel:20px;

--border-width:1px; /* @kind other */
--border-width-focus:2px; /* @kind other */

/* ELEVATION — four tiers, all Trail-Night tinted, never pure black.
   0 flat is the default for almost everything; 1 is the brand's one shadow. */
--elevation-0:none;
--elevation-1:rgba(20,35,33,.02) 0 0 0 1px,rgba(20,35,33,.04) 0 2px 6px 0,rgba(20,35,33,.10) 0 4px 8px 0;
--elevation-2:rgba(20,35,33,.02) 0 0 0 1px,rgba(20,35,33,.06) 0 2px 6px 0,rgba(20,35,33,.12) 0 12px 28px -4px;
--elevation-3:rgba(20,35,33,.08) 0 -1px 0 0,rgba(20,35,33,.10) 0 -4px 16px -4px;

/* Aliases by use, so a component never picks a tier by number alone. */
--shadow-none:var(--elevation-0);
--shadow-float:var(--elevation-1); /* card hover, search bar at rest, dropdowns */
--shadow-sheet:var(--elevation-2); /* modals, bottom sheets, full-screen overlays */
--shadow-dock:var(--elevation-3); /* sticky bottom bars — casts upward */

--scrim-modal:rgba(20,35,33,.5);

/* LAYERING — one scale, so nothing invents a z-index. */
--z-nav:40; /* @kind other */
--z-tabbar:70; /* @kind other */
--z-dock:70; /* @kind other */
--z-scrim:80; /* @kind other */
--z-sheet:81; /* @kind other */
--z-modal:81; /* @kind other */
--z-menu:90; /* @kind other */

--duration-fast:var(--motion-fast); /* @kind other */
--duration-base:var(--motion-base); /* @kind other */
--duration-slow:var(--motion-slow); /* @kind other */
--transition-base:all var(--motion-base) var(--ease-standard); /* @kind other */
}
@media (max-width:767px){:root{--radius-panel:0px}}