:root{
/* Radii — smooth, product-soft; pills for chips and CTAs */
--radius-xs:4px; /* @kind radius */
--radius-sm:8px; /* @kind radius */
--radius-md:12px; /* @kind radius */
--radius-lg:18px; /* @kind radius */
--radius-xl:28px; /* @kind radius */
--radius-pill:999px; /* @kind radius */
--radius-blob:48% 52% 42% 58%/56% 44% 56% 44%; /* @kind radius */
/* Elevation on near-black: shadow does little, glow does the work */
--shadow-1:0 1px 2px rgba(0,0,0,.5); /* @kind shadow */
--shadow-2:0 8px 24px -8px rgba(0,0,0,.7); /* @kind shadow */
--shadow-3:0 24px 64px -20px rgba(0,0,0,.8); /* @kind shadow */
--shadow-inset-top:inset 0 1px 0 rgba(255,255,255,.12); /* @kind shadow */
--shadow-inset-bevel:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(0,0,0,.35); /* @kind shadow */
/* Glows — same hue as the thing that emits them */
--glow-cyan:0 0 32px -6px color-mix(in oklab,var(--spectrum-cyan) 55%,transparent); /* @kind color */
--glow-indigo:0 0 40px -8px color-mix(in oklab,var(--spectrum-indigo) 60%,transparent); /* @kind color */
--glow-magenta:0 0 40px -8px color-mix(in oklab,var(--spectrum-magenta) 55%,transparent); /* @kind color */
--glow-accent:0 10px 40px -12px color-mix(in oklab,var(--accent-400) 75%,transparent); /* @kind color */
--glow-text:0 0 40px color-mix(in oklab,var(--spectrum-indigo) 40%,transparent); /* @kind color */
/* Blur / transparency */
--blur-glass:14px; /* @kind other */
--blur-nav:18px; /* @kind other */
--blur-bloom:60px; /* @kind other */
--alpha-hover:.08; /* @kind other */
--alpha-press:.14; /* @kind other */
/* Texture */
--grain-opacity:.05; /* @kind other */
--grain-opacity-poster:.09; /* @kind other */
--scanline-opacity:.06; /* @kind other */
--grain-url:url("../assets/grain.png"); /* @kind other */
--focus-ring:0 0 0 2px var(--ink-900),0 0 0 4px var(--accent-300); /* @kind shadow */
}