/* ═════════════════════════════════════════════════════════════════
   DESIGN TOKENS — CSS custom properties
   Colors, fonts, type scale, and spacing pulled from Landing page-1.svg.
   Breakpoints: mobile ≤767 / iPad 768–1024 / desktop ≥1025.
   ═════════════════════════════════════════════════════════════════ */

:root {
	--cream:       #F5F3EF;
	--ink:         #1A1A1A;
	--ink-soft:    rgba(26,26,26,0.75);
	--ink-muted:   rgba(26,26,26,0.55);
	--rule:        rgba(26,26,26,0.1);
	--green:       #0B6623;
	--orange:      #FF4F00;
	--white:       #FFFFFF;

	--f-sans:  'Urbanist', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--f-serif: 'Merriweather', Georgia, 'Times New Roman', serif;

	--container-x: clamp(20px, 4vw, 60px);
	/* Vertical rhythm between major page sections. Drives `.section`'s
	   top+bottom padding and any inner spacers that want to echo it
	   (e.g. the caps-grid header margin). 48px floor → 100px ceiling. */
	--section-y:   clamp(48px, 6vw, 60px);

	/* SVG-derived type scale (1440 design). clamp() for responsive. */
	--fs-display-xl: clamp(52px, 7.8vw, 112px);   /* hero caps */
	--fs-display-it: clamp(48px, 8.3vw, 120px);   /* italic tail */
	--fs-h2:         clamp(44px, 7.8vw, 112px);
	--fs-h2-it:      clamp(40px, 8.3vw, 120px);
	--fs-h3:         clamp(32px, 5.6vw, 104px);
	--fs-stat:       clamp(40px, 7.2vw, 104px);
	--fs-lg:         clamp(22px, 2vw, 26px);
	--fs-xl-label:   clamp(26px, 2.9vw, 42px);
	--fs-body:       clamp(16px, 1.8056vw, 26px);
	--fs-lead:       clamp(18px, 1.8056vw, 26px);
	--fs-eyebrow:    20px;
	--fs-proof:      clamp(14px, 1.3vw, 20px);
	--fs-nav:        clamp(15px, 1.4vw, 20px);

	/* Card/feature typography — shared between the home page (numbers,
	   caps, situations, implementation blocks) AND the product pages
	   (BAO/CAO step cards, capability cards, agent cards). `--fs-card-title`
	   is the smaller of the H-scales (it sits inside cards; for full-bleed
	   section headlines use `--fs-h2` / `--fs-h3` / `--fs-xl-label`
	   instead). Both land at exactly 42 / 22 px at the 1440 design width. */
	--fs-card-title: clamp(28px, 2.9167vw, 42px);
	--fs-card-body:  clamp(14px, 1.5278vw, 22px);
	/* Bigger-than-title token for the ghosted digits in BAO/CAO agent
	   cards (44 px at 1440). */
	--fs-card-title-lg: clamp(30px, 3.056vw, 44px);
	/* 38 px at 1440 — the accent number inside capability cards. */
	--fs-card-num:      clamp(24px, 2.639vw, 38px);

	/* Product-page (BAO/CAO) typography — tighter scale than the home
	   page. Organised into 4 families:
	   - stat-* : big numeric displays
	   - label-*: eyebrow/label text (often uppercase)
	   - body-* : body copy at various densities
	   - kicker : small all-caps label under tight letter-spacing
	   - subhead: in-card H3 equivalent (journey step / agent / cap titles)
	   - serif-lede: italic serif sub-lines
	   `--fs-label` is the big product-page eyebrow above section titles;
	   the other label-* are smaller in-card/hero labels. */
	--fs-subhead:    clamp(22px, 2vw, 30px);
	--fs-body-sm:    clamp(14px, 1.806vw, 26px);
	--fs-body-xs:    clamp(14px, 1.05vw, 17px);
	--fs-body-md:    clamp(15px, 1.2vw, 19px);
	--fs-label:      clamp(20px, 1.6vw, 26px);
	--fs-label-lg:   clamp(18px, 1.6vw, 24px);
	--fs-label-md:   clamp(18px, 1.5vw, 22px);
	--fs-stat-xl:    clamp(40px, 14vw, 180px);
	--fs-stat-md:    clamp(28px, 3vw, 48px);
	--fs-stat-sm:    clamp(24px, 2vw, 32px);
	--fs-kicker:     clamp(13px, 1.05vw, 16px);
	--fs-serif-lede: clamp(16px, 1.3vw, 20px);
}