:root{
/* Shadows are tinted with the brand blue, never neutral black. */
--shadow-xs:0 1px 2px rgba(0,29,58,.06);
--shadow-sm:0 1px 3px rgba(0,29,58,.08),0 1px 2px rgba(0,29,58,.04);
--shadow-md:0 4px 12px rgba(0,29,58,.09),0 1px 3px rgba(0,29,58,.05);
--shadow-lg:0 12px 32px rgba(0,29,58,.12),0 2px 8px rgba(0,29,58,.06);
--shadow-xl:0 28px 64px rgba(0,29,58,.18),0 4px 12px rgba(0,29,58,.08);
--shadow-inset-top:inset 0 1px 0 rgba(255,255,255,.14);
--shadow-inset-hairline:inset 0 0 0 1px var(--border-subtle);
--shadow-accent:0 8px 24px rgba(194,18,31,.24);
--shadow-brand:0 8px 24px rgba(2,83,164,.22);

/* z-index scale */
--z-base:0; /* @kind other */
--z-raised:10; /* @kind other */
--z-sticky:100; /* @kind other */
--z-header:200; /* @kind other */
--z-drawer:300; /* @kind other */
--z-overlay:400; /* @kind other */
--z-modal:500; /* @kind other */
--z-toast:600; /* @kind other */
--z-tooltip:700; /* @kind other */

/* grain / texture overlay — 2% noise, used at low opacity over photography */
--texture-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.38'/%3E%3C/svg%3E"); /* @kind other */
}