/* Blue Spring — spacing, layout, radius, elevation, motion */
:root{
--space-0:0;
--space-1:4px;
--space-2:8px;
--space-3:12px;
--space-4:16px;
--space-5:24px;
--space-6:32px;
--space-7:48px;
--space-8:64px;
--space-9:96px;
--space-10:144px;

--container-max:1280px;
--container-text:680px;
--gutter:24px;
--page-margin:clamp(20px,5vw,72px);
--header-height:72px;

/* Corners: nearly square. Elegance comes from proportion, not rounding. */
--radius-0:0;
--radius-1:2px;
--radius-2:4px;
--radius-3:8px;
--radius-pill:999px;

/* Borders */
--border-hairline:1px solid var(--line-hairline);
--border-strong:1px solid var(--line-strong);
--border-on-ink:1px solid var(--line-on-ink);

/* Elevation: soft, warm, low. Used sparingly (menus, dialogs). */
--shadow-0:none;
--shadow-1:0 1px 2px rgba(19,32,46,0.06),0 1px 1px rgba(19,32,46,0.04);
--shadow-2:0 8px 24px -8px rgba(19,32,46,0.18),0 2px 6px rgba(19,32,46,0.06);
--shadow-3:0 24px 60px -16px rgba(10,19,28,0.35),0 4px 12px rgba(10,19,28,0.08);
--shadow-focus:0 0 0 3px rgba(0,80,216,0.3);

/* Photography protection */
--scrim-bottom:linear-gradient(180deg,rgba(10,19,28,0) 40%,rgba(10,19,28,0.78) 100%); /* @kind color */
--scrim-left:linear-gradient(90deg,rgba(10,19,28,0.82) 0%,rgba(10,19,28,0.2) 60%,rgba(10,19,28,0) 100%); /* @kind color */

/* Motion: slow, poured, never bouncy */
--ease-pour:cubic-bezier(0.22,0.61,0.36,1); /* @kind other */
--ease-standard:cubic-bezier(0.4,0,0.2,1); /* @kind other */
--duration-fast:140ms; /* @kind other */
--duration-base:240ms; /* @kind other */
--duration-slow:480ms; /* @kind other */
--duration-reveal:900ms; /* @kind other */

--z-header:50; /* @kind other */
--z-overlay:90; /* @kind other */
--z-dialog:100; /* @kind other */
--z-toast:110; /* @kind other */
}