:root{
  /* --- warm neutral ramp (the paper the brand is printed on) --- */
  --warm-950:#1A1817;
  --warm-900:#272423;
  --warm-800:#3A3634;
  --warm-700:#514C49;
  --warm-600:#6F6965;
  --warm-500:#918B86;
  --warm-400:#B6B0AB;
  --warm-300:#D3CEC9;
  --warm-200:#E8E4E0;
  --warm-100:#F3F1EE;
  --warm-50:#FAF9F7;
  --warm-0:#FFFFFF;

  /* --- clay: the primary accent, used for action and emphasis --- */
  --clay-700:#5E2F2A;
  --clay-600:#77413A;
  --clay-500:#90534A;
  --clay-400:#A96F66;
  --clay-300:#C79E98;
  --clay-200:#E1C7C3;
  --clay-100:#F4EAE8;

  /* --- apricot: highlight, hand-marked emphasis --- */
  --apricot-600:#8A7638;
  --apricot-500:#B09948;
  --apricot-300:#D3C48C;
  --apricot-200:#E6DCBC;
  --apricot-100:#F6F2E4;

  /* --- sage: growth, green city --- */
  --sage-700:#3B4636;
  --sage-600:#4E5A47;
  --sage-500:#66735C;
  --sage-300:#A3AD98;
  --sage-200:#C8CFC0;
  --sage-100:#EAEDE6;

  /* --- lagoon: water, links, cool relief --- */
  --lagoon-700:#1D4340;
  --lagoon-600:#27564F;
  --lagoon-500:#356A62;
  --lagoon-300:#8FB3AE;
  --lagoon-200:#BFD2CE;
  --lagoon-100:#E6EEEC;

  /* --- semantic: text --- */
  --text-strong:var(--warm-900);
  --text-body:var(--warm-800);
  --text-muted:var(--warm-600);
  --text-faint:var(--warm-500);
  --text-invert:var(--warm-50);
  --text-invert-muted:var(--warm-300);
  --text-accent:var(--clay-600);

  /* --- semantic: surfaces (the band system) --- */
  --surface-page:var(--warm-50);
  --surface-raised:var(--warm-0);
  --surface-sand:var(--warm-100);
  --surface-sand-soft:var(--warm-50);
  --surface-deep:var(--warm-900);
  --surface-deep-soft:var(--warm-800);
  --surface-clay:var(--clay-500);
  --surface-sage:var(--sage-100);
  --surface-lagoon:var(--lagoon-100);
  --surface-photo:var(--warm-300);

  /* --- semantic: lines & interaction --- */
  --border-hairline:color-mix(in oklab, var(--warm-800) 18%, transparent);
  --border-soft:color-mix(in oklab, var(--warm-800) 30%, transparent);
  --border-strong:var(--warm-800);
  --border-invert:color-mix(in oklab, var(--warm-50) 55%, transparent);

  --accent-primary:var(--clay-500);
  --accent-primary-hover:var(--clay-600);
  --accent-primary-press:var(--clay-700);
  --accent-warm:var(--apricot-500);
  --accent-leaf:var(--sage-500);
  --accent-cool:var(--lagoon-500);

  --link:var(--lagoon-600);
  --link-hover:var(--clay-600);
  --link-invert:var(--lagoon-300);
  --focus-ring:var(--apricot-500);

  /* --- semantic: state --- */
  --state-disabled-fg:var(--warm-500);
  --state-disabled-bg:var(--warm-100);
  --overlay-scrim:color-mix(in oklab, var(--warm-950) 62%, transparent);
}
:root{
  --font-display:"Archivo Narrow","Archivo Narrow Fallback",Helvetica Neue,sans-serif;
  --font-body:"Source Serif 4",Georgia,"Times New Roman",serif;
  --font-mono:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* display — condensed, uppercase, tight. Section titles and heroes. */
  --type-display-1:clamp(3rem,7.4vw,6.5rem);
  --type-display-2:clamp(2.4rem,5vw,4.25rem);
  --type-display-3:clamp(1.9rem,3vw,2.75rem);
  --type-display-4:1.5rem;
  --leading-display:0.94;
  --tracking-display:-0.005em;
  --weight-display:700;

  /* body — serif, generous, long-form friendly */
  --type-lede:clamp(1.125rem,1.5vw,1.375rem);
  --type-body:1.0625rem;
  --type-body-sm:0.9375rem;
  --type-caption:0.8125rem;
  --leading-body:1.62;
  --leading-tight:1.35;

  /* mono — eyebrows, meta, buttons, tags */
  --type-eyebrow:0.75rem;
  --type-mono:0.875rem;
  --tracking-eyebrow:0.14em;
  --tracking-button:0.09em;
  --leading-mono:1.5;
}
:root{
  --space-0:0;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:44px;
  --space-8:60px;
  --space-9:80px;
  --space-10:110px;
  --space-11:150px;

  --gutter:24px;
  --gutter-lg:40px;
  --container-wide:1440px;
  --container:1180px;
  --container-text:680px;
  --band-padding-y:clamp(56px,7.5vw,120px);
  --band-padding-x:clamp(20px,4vw,64px);
}
:root{
  /* soft shapes: nothing in Bandhab has a hard 0px corner except full-bleed photography */
  --radius-xs:4px;
  --radius-sm:8px;
  --radius-md:14px;
  --radius-lg:22px;
  --radius-xl:32px;
  --radius-pill:999px;
  --radius-photo:18px;

  --border-width:1px;
  --border-width-strong:1.5px;

  /* warm-tinted shadows only — never neutral grey */
  --shadow-sm:0 1px 2px color-mix(in oklab,var(--warm-900) 8%,transparent);
  --shadow-md:0 6px 18px -6px color-mix(in oklab,var(--warm-900) 18%,transparent);
  --shadow-lg:0 18px 44px -18px color-mix(in oklab,var(--warm-900) 26%,transparent);
  --shadow-lift:0 12px 28px -12px color-mix(in oklab,var(--clay-700) 24%,transparent);
  --shadow-inset-hairline:inset 0 0 0 1px var(--border-hairline);

  --motion-fast:140ms; /* @kind other */
  --motion-base:220ms; /* @kind other */
  --motion-slow:420ms; /* @kind other */
  --ease-out:cubic-bezier(.2,.7,.3,1); /* @kind other */
  --ease-soft:cubic-bezier(.4,.14,.3,1); /* @kind other */
}