:root{
/* Corners — the brand is square. Radius is functional, never decorative. */
--radius-none:0px;
--radius-xs:2px;
--radius-sm:4px;
--radius-md:6px;
--radius-pill:999px;

/* Borders */
--border-width:1px;
--border-width-strong:2px;
--border-width-hairline:1px;

/* Elevation — flat first. Shadows are neutral-warm and low-spread. */
--shadow-none:none;
--shadow-xs:0 1px 0 rgba(21,20,15,.06);
--shadow-sm:0 1px 2px rgba(21,20,15,.08),0 1px 1px rgba(21,20,15,.04);
--shadow-md:0 6px 16px rgba(21,20,15,.10);
--shadow-lg:0 18px 40px rgba(21,20,15,.14);
--shadow-inset:inset 0 1px 0 rgba(21,20,15,.05);
--shadow-focus:0 0 0 3px rgba(255,205,41,.55);

/* Effects */
--overlay-scrim:rgba(17,17,17,.62);
--protection-gradient:linear-gradient(180deg,rgba(0,0,0,.75) 0%,rgba(0,0,0,0) 70%); /* @kind color */
--blur-glass:saturate(140%) blur(14px); /* @kind other */
}