:root{
  --bg:#f4f1ea;
  --surface:#e9e5dd;
  --text:#111;
  --muted:#716d66;
  --dark:#101010;
  --white:#fff;
  --border:rgba(17,17,17,.22);
  --border-strong:rgba(17,17,17,.5);
  --container:1440px;
  --container-wide:1600px;
  --gutter:48px;
  --grid-gap:24px;
  --s1:8px;--s2:16px;--s3:24px;--s4:32px;--s5:48px;--s6:64px;
  --s7:96px;--s8:128px;--s9:160px;--s10:192px;--s11:240px;--s12:256px;
  --display-xl:clamp(76px,11vw,180px);
  --display:clamp(58px,8vw,128px);
  --h1:clamp(46px,5vw,84px);
  --h2:clamp(34px,3.5vw,56px);
  --h3:clamp(24px,2vw,32px);
  --body:16px;
  --lead:20px;
  --small:14px;
  --caption:12px;
  --measure:60ch;
  --header:88px;
  --header-compact:72px;
  --button:56px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --fast:200ms;
  --normal:400ms;
  --slow:800ms;
  --z-header:100;
  --z-menu:200;
}
html[data-theme="dark"]{
  --bg:#0f0f0f;
  --surface:#181818;
  --text:#f5f2eb;
  --muted:#a7a29a;
  --dark:#f5f2eb;
  --white:#101010;
  --border:rgba(255,255,255,.22);
  --border-strong:rgba(255,255,255,.5);
}
@media (min-width:1600px){:root{--gutter:64px}}
@media (max-width:1199px){:root{--gutter:32px;--grid-gap:20px}}
@media (max-width:767px){:root{--gutter:20px;--grid-gap:12px;--header:72px;--button:52px}}