:root{
  /* 8px base */
  --space-0:0;
  --space-half:4px;
  --space-1:8px;
  --space-2:16px;
  --space-3:24px;
  --space-4:32px;
  --space-5:40px;
  --space-6:48px;
  --space-7:64px;
  --space-8:80px;
  --space-9:96px;
  --space-10:120px;
  --space-11:160px;
  --space-12:200px;
  --space-13:240px;

  /* Semantic */
  --section-y:clamp(96px,11vw,200px);/* @kind spacing */
  --section-y-lg:clamp(120px,14vw,240px);/* @kind spacing */
  --stack-sm:var(--space-2);
  --stack-md:var(--space-4);
  --stack-lg:var(--space-7);

  /* Grid */
  --grid-max:1440px;
  --grid-content:1320px;
  --grid-columns:12;/* @kind other */
  --grid-gutter:24px;
  --grid-margin:clamp(20px,5vw,64px);

  /* Borders */
  --border-width:1px;
  --border-width-emphasis:2px;

  /* Radius — architectural */
  --radius-0:0px;
  --radius-1:2px;
  --radius-2:4px;
  --radius-3:8px;
  --radius-button:0px;
  --radius-image:0px;

  /* Elevation — used sparingly */
  --shadow-none:none;
  --shadow-soft:0 10px 30px rgba(32,23,18,0.08);
  --shadow-overlay:0 24px 60px rgba(32,23,18,0.14);

  /* Component sizes */
  --nav-height:88px;
  --nav-height-compact:64px;
  --button-height-sm:40px;
  --button-height-md:52px;
  --button-height-lg:60px;
  --field-height:48px;
  --z-nav:50;/* @kind other */
  --z-overlay:80;/* @kind other */
  --z-cursor:100;/* @kind other */
}
@media (max-width:1023px){:root{
  --grid-columns:8;/* @kind other */
  --grid-gutter:20px;
  --nav-height:72px;
}}
@media (max-width:639px){:root{
  --grid-columns:4;/* @kind other */
  --grid-gutter:16px;
  --nav-height:64px;
}}