:root{
/* Radii — softened, never pill-shaped except on chips and avatars */
--radius-xs:3px;--radius-sm:6px;--radius-md:10px;--radius-lg:14px;--radius-xl:20px;--radius-2xl:28px;--radius-pill:999px;--radius-card:var(--radius-lg);--radius-control:var(--radius-md);--radius-image:var(--radius-lg);

/* Borders */
--border-width:1px;--border-width-strong:2px;--focus-ring:0 0 0 3px var(--willow-300),0 0 0 4px var(--willow-700);

/* Shadows — low, warm, like late-afternoon porch light. Never blue-grey. */
--shadow-xs:0 1px 1px rgba(29,27,23,.05);
--shadow-sm:0 1px 2px rgba(29,27,23,.07),0 1px 3px rgba(29,27,23,.05);
--shadow-md:0 2px 4px rgba(29,27,23,.06),0 6px 14px rgba(29,27,23,.08);
--shadow-lg:0 4px 8px rgba(29,27,23,.06),0 16px 32px rgba(29,27,23,.11);
--shadow-inset:inset 0 1px 2px rgba(29,27,23,.08);

/* Protection gradient for text over photography */
--scrim-bottom:linear-gradient(to top,rgba(23,60,32,.86) 0%,rgba(23,60,32,.5) 42%,rgba(23,60,32,0) 100%); /* @kind color */
--scrim-flat:rgba(23,60,32,.55);

/* Motion — short, eased, no bounce */
--ease-out:cubic-bezier(.22,.61,.36,1); /* @kind other */
--ease-in-out:cubic-bezier(.42,0,.58,1); /* @kind other */
--dur-fast:120ms; /* @kind other */
--dur-base:180ms; /* @kind other */
--dur-slow:280ms; /* @kind other */
--dur-photo:420ms; /* @kind other */
--transition-control:background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out);
}