:root{
/* Corners: square by default. The one signature curve is the diagonal-cut panel. */
--radius-none:0px;
--radius-sm:2px;
--radius-md:4px;
--radius-lg:8px;
--radius-cut:22px;      /* rounded corner of the diagonal black panel */
--radius-pill:999px;

--border-width:1px;
--border-width-thick:2px;
--rule-heavy:3px;

--shadow-none:none;
--shadow-sm:0 1px 2px rgba(0,0,0,.08);
--shadow-md:0 4px 14px rgba(0,0,0,.10);
--shadow-lg:0 18px 40px rgba(0,0,0,.16);
--shadow-focus:0 0 0 3px rgba(87,0,255,.35);

--ease-out:cubic-bezier(.2,.7,.3,1); /* @kind other */
--ease-in-out:cubic-bezier(.65,0,.35,1); /* @kind other */
--dur-fast:120ms; /* @kind other */
--dur-base:180ms; /* @kind other */
--dur-slow:320ms; /* @kind other */

/* Brand shape: the diagonal cut. Angle matches the emblem's stripe shear. */
--cut-angle:18deg; /* @kind other */
--cut-size:34px;
--clip-cut-br:polygon(0 0,100% 0,100% calc(100% - var(--cut-size)),calc(100% - var(--cut-size)) 100%,0 100%);
--clip-cut-tr:polygon(0 0,calc(100% - var(--cut-size)) 0,100% var(--cut-size),100% 100%,0 100%);
--skew-brand:skewX(-12deg); /* @kind other */
}