:root{
  /* 4px base step */
  --space-0:0;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-8:32px;
  --space-10:40px;
  --space-12:48px;
  --space-16:64px;
  --space-20:80px;
  --space-24:96px;
  --space-32:128px;
  --space-40:160px;

  /* Semantic rhythm */
  --gap-inline:var(--space-3);
  --gap-stack:var(--space-4);
  --gap-card:var(--space-6);
  --gap-grid:var(--space-8);
  --pad-card:var(--space-6);
  --pad-card-lg:var(--space-10);
  --pad-section:var(--space-24);
  --pad-section-tight:var(--space-16);
  --pad-gutter:var(--space-8);

  /* Layout */
  --container-max:1200px;
  --container-wide:1440px;
  --container-text:720px;
  --grid-columns:12; /* @kind other */
  --header-height:76px;

  /* Radii — cards 8-16px (brand rule); pills for actions; circles for people */
  --radius-none:0;
  --radius-xs:4px;
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:16px;
  --radius-pill:999px;
  --radius-circle:50%;

  /* Borders */
  --border-width-hairline:1px; /* @kind spacing */
  --border-width-accent:3px; /* @kind spacing */   /* line accents: 2-4px */
  --border-width-rule:4px; /* @kind spacing */

  /* Shadows — restrained; navy-tinted, never black */
  --shadow-none:none;
  --shadow-xs:0 1px 2px rgba(28,53,92,.06);
  --shadow-sm:0 2px 6px rgba(28,53,92,.07);
  --shadow-md:0 8px 20px rgba(28,53,92,.09);
  --shadow-lg:0 18px 44px rgba(28,53,92,.13);
  --shadow-focus:0 0 0 3px rgba(7,177,179,.38);
  --shadow-inset-hairline:inset 0 0 0 1px rgba(28,53,92,.08);

  /* Motion — calm fades and short rises, no bounce */
  --ease-standard:cubic-bezier(.4,0,.2,1); /* @kind other */
  --ease-out:cubic-bezier(.16,.84,.44,1); /* @kind other */
  --ease-in:cubic-bezier(.4,0,1,1); /* @kind other */
  --duration-fast:120ms; /* @kind other */
  --duration-base:200ms; /* @kind other */
  --duration-slow:320ms; /* @kind other */
  --duration-reveal:600ms; /* @kind other */
  --transition-control:background-color var(--duration-base) var(--ease-standard),color var(--duration-base) var(--ease-standard),border-color var(--duration-base) var(--ease-standard),box-shadow var(--duration-base) var(--ease-standard); /* @kind other */

  /* Blur — only behind sticky chrome over photography */
  --blur-chrome:saturate(140%) blur(14px); /* @kind other */
  --z-header:100; /* @kind other */
  --z-overlay:200; /* @kind other */
  --z-dialog:300; /* @kind other */
}