/* =====================================================================
   3XS DESIGNS — DESIGN TOKENS
   Every color, spacing value, type size and easing curve used anywhere on
   the site lives here. Component CSS (main.css) references these only.
   ===================================================================== */
:root{
  /* color — warm neutrals, never pure white or black */
  --bg:#f5f2ed;             /* warm architectural off-white */
  --bg-dark:#1a1a1a;        /* deep charcoal — contrast sections */
  --bg-media:#e4dfd6;       /* ground behind images while they load */
  --ink:#1a1a1a;            /* text on light */
  --ink-inverse:#f5f2ed;    /* text on dark */
  --ink-soft:#3f3d3a;       /* long-form body on light */
  --ink-soft-inverse:#cfc9c0;
  --muted:#6b6b6b;          /* metadata, captions */
  --muted-inverse:#a39e96;
  --accent:#b8956a;         /* warm bronze */
  --accent-hover:#c8a67a;
  --accent-2:#8a9a8a;       /* sage — the Sustainability pillar */
  --line:rgba(26,26,26,.12);
  --line-inverse:rgba(245,242,237,.14);
  --header-bg:rgba(245,242,237,.9);
  --scrim:rgba(26,26,26,.55);

  /* placeholder tints (per-element overrides via --ph-a / --ph-b) */
  --ph-a-default:#d9d3c9;
  --ph-b-default:#b9ad9c;
  --ph-grid:rgba(26,26,26,.05);
  --ph-rule:rgba(26,26,26,.18);
  --ph-label:rgba(26,26,26,.55);

  /* type */
  --font-display:"Space Grotesk","Neue Montreal","Helvetica Neue",Arial,sans-serif;
  --font-body:"Inter","Helvetica Neue",Arial,sans-serif;
  --text-body:18px;
  --text-body-mobile:17px;
  --text-lead:19px;
  --text-small:14px;
  --text-caption:13px;
  --text-label:12px;
  --text-micro:11px;
  --leading-body:1.7;
  --tracking-display:-.02em;
  --tracking-label:.12em;
  --tracking-micro:.14em;
  --h1:clamp(3rem,8vw,10rem);
  --h1-work:clamp(2.75rem,7vw,8rem);
  --h1-project:clamp(2.5rem,6vw,7rem);
  --h2:clamp(1.5rem,3vw,3.5rem);
  --h2-pillars:clamp(2rem,5vw,5.5rem);
  --h2-cta:clamp(2rem,5vw,5rem);
  --h3:clamp(1.5rem,2.4vw,2.25rem);
  --h3-step:clamp(1.6rem,2.6vw,2.6rem);
  --tagline:clamp(2.5rem,6vw,8rem);
  --menu-link:clamp(2rem,5vw,4rem);
  --stat:clamp(2rem,3.6vw,3.5rem);
  --stat-small:clamp(1.4rem,2vw,2rem);
  --step-num:clamp(3rem,6vw,6rem);
  --row-name:clamp(1.4rem,2.6vw,2.6rem);
  --card-title:clamp(1.15rem,1.6vw,1.5rem);
  --next-name:clamp(2.5rem,7vw,8rem);
  --logo-mark:30px;
  --logo-mark-mobile:26px;

  /* spacing — architectural modular scale */
  --s-1:4px;--s-2:8px;--s-3:16px;--s-4:24px;--s-5:32px;--s-6:48px;--s-7:64px;--s-8:96px;--s-9:128px;
  --section-y:min(12vh,140px);
  --block-y:clamp(48px,8vh,96px);
  --steps-gap:clamp(64px,12vh,160px);
  --container:1280px;
  --gutter:24px;
  --gutter-featured:48px;
  --pad-x:clamp(20px,4vw,48px);
  --header-y:22px;
  --header-y-mobile:18px;
  --header-offset:80px;
  --touch:48px;
  --sticky-top:18vh;

  /* motion */
  --ease:cubic-bezier(.25,.46,.45,.94);
  --dur-fast:.3s;
  --dur:.6s;
  --dur-slow:1s;
  --dur-transition:.6s;

  /* layers */
  --z-toolbar:30;
  --z-menu:40;
  --z-header:50;
  --z-progress:60;
  --z-thumb:20;
  --z-transition:900;
  --z-cursor:1000;
}