/* ==========================================================================
   Design Tokens
   Shared semantic values for the static Mathenge Inc. site.
   Breakpoints used by current CSS: 56em primary, plus Webflow legacy 991px/767px.
   ========================================================================== */

:root {
  /* Colors derived from the current site. */
  --color-bg-page: #f5f3ed;
  --color-bg-page-alt: #fbfbfa;
  --color-bg-surface: #fffdf8;
  --color-surface-transparent: transparent;
  --color-text-primary: #171715;
  --color-text-secondary: rgba(23, 23, 21, 0.78);
  --color-text-muted: rgba(23, 23, 21, 0.68);
  --color-text-faint: rgba(23, 23, 21, 0.52);
  --color-border-subtle: rgba(0, 0, 0, 0.08);
  --color-border-muted: rgba(23, 23, 21, 0.1);
  --color-border-strong: rgba(0, 0, 0, 0.16);
  --color-brand-accent: #d97757;
  --color-brand-accent-soft: rgba(204, 120, 92, 0.4);
  --color-success: #245946;
  --color-error: #9f2419;

  /* Typography. */
  --font-size-display-xs: clamp(1.125rem, 1.0867rem + 0.1633vw, 1.25rem);
  --font-size-display-s: clamp(1.25rem, 1.1735rem + 0.3265vw, 1.5rem);
  --font-size-display-m: clamp(1.75rem, 1.6735rem + 0.3265vw, 2rem);
  --font-size-display-l: clamp(2rem, 1.6939rem + 1.3061vw, 3rem);
  --font-size-display-xl: clamp(2.5rem, 2.0408rem + 1.9592vw, 4rem);
  --font-size-display-xxl: clamp(3rem, 2.3878rem + 2.6122vw, 5rem);
  --font-size-body-s: clamp(1rem, 0.9617rem + 0.1633vw, 1.125rem);
  --font-size-body-m: clamp(1.125rem, 1.0867rem + 0.1633vw, 1.25rem);
  --font-size-body-l: clamp(1.375rem, 1.3367rem + 0.1633vw, 1.5rem);
  --font-size-detail: clamp(0.6875rem, 0.6684rem + 0.0816vw, 0.75rem);
  --font-size-monospace: clamp(0.875rem, 0.5306rem + 1.4694vw, 2rem);

  /* Transitional aliases for existing Webflow-exported custom properties. */
  ---font-size--display-xs: var(--font-size-display-xs);
  ---font-size--display-s: var(--font-size-display-s);
  ---font-size--display-m: var(--font-size-display-m);
  ---font-size--display-l: var(--font-size-display-l);
  ---font-size--display-xl: var(--font-size-display-xl);
  ---font-size--display-xxl: var(--font-size-display-xxl);
  ---font-size--paragraph-s: var(--font-size-body-s);
  ---font-size--paragraph-m: var(--font-size-body-m);
  ---font-size--paragraph-l: var(--font-size-body-l);
  ---font-size--detail-xs: var(--font-size-detail);
  ---font-size--monospace: var(--font-size-monospace);

  /* Spacing. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  /* Existing fluid spacing scale. */
  --site--margin: clamp(2rem, 1.0816326530612246rem + 3.9183673469387754vw, 5rem);
  --site--width: 1440px;
  --site--column-count: 12;
  --site--gutter: 1.5rem;
  --size--2rem: clamp(1.75rem, 1.6734693877551021rem + 0.326530612244898vw, 2rem);
  --size--2-5rem: clamp(2rem, 1.846938775510204rem + 0.653061224489796vw, 2.5rem);
  --size--3rem: clamp(2.25rem, 2.020408163265306rem + 0.9795918367346939vw, 3rem);
  --size--3-5rem: clamp(2.375rem, 2.0306122448979593rem + 1.4693877551020407vw, 3.5rem);
  --size--4rem: clamp(2.5rem, 2.0408163265306123rem + 1.9591836734693877vw, 4rem);
  --size--4-5rem: clamp(2.75rem, 2.2142857142857144rem + 2.2857142857142856vw, 4.5rem);
  --size--5rem: clamp(3rem, 2.3877551020408165rem + 2.612244897959184vw, 5rem);
  --size--5-5rem: clamp(3.25rem, 2.561224489795918rem + 2.9387755102040813vw, 5.5rem);
  --size--6rem: clamp(3.5rem, 2.7346938775510203rem + 3.2653061224489797vw, 6rem);
  --size--6-5rem: clamp(3.75rem, 2.9081632653061225rem + 3.5918367346938775vw, 6.5rem);
  --size--7rem: clamp(4rem, 3.0816326530612246rem + 3.9183673469387754vw, 7rem);
  --size--7-5rem: clamp(4.25rem, 3.2551020408163267rem + 4.244897959183674vw, 7.5rem);
  --size--8rem: clamp(4.5rem, 3.4285714285714284rem + 4.571428571428571vw, 8rem);
  --size--8-5rem: clamp(4.75rem, 3.6020408163265305rem + 4.8979591836734695vw, 8.5rem);
  --size--9rem: clamp(5rem, 3.7755102040816326rem + 5.224489795918368vw, 9rem);
  --size--9-5rem: clamp(5.25rem, 3.9489795918367347rem + 5.551020408163265vw, 9.5rem);
  --size--10rem: clamp(5.5rem, 4.122448979591836rem + 5.877551020408163vw, 10rem);
  --size--11rem: clamp(5.75rem, 4.142857142857143rem + 6.857142857142858vw, 11rem);
  --size--12rem: clamp(6rem, 4.163265306122449rem + 7.836734693877551vw, 12rem);
  --size--13rem: clamp(6.5rem, 4.510204081632653rem + 8.489795918367347vw, 13rem);
  --size--14rem: clamp(7rem, 4.857142857142857rem + 9.142857142857142vw, 14rem);
  --size--15rem: clamp(7.5rem, 5.204081632653061rem + 9.795918367346939vw, 15rem);

  /* Radius, shadows, and z-index. */
  --radius-xs: 3px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --radius-round: 50%;
  --shadow-popover: 0 24px 48px rgba(0, 0, 0, 0.08);
  --shadow-card-subtle: 0 4px 20px rgba(0, 0, 0, 0.02);
  --shadow-card-soft: 0 2.5rem 5rem rgba(23, 23, 21, 0.08);
  --z-base: 0;
  --z-raised: 1;
  --z-overlay: 4;
  --z-popover: 10;
  --z-modal: 50;

  /* Navigation layout values used by the shared nav fragment. */
  --nav--height: 4.25rem;
  --nav--banner-height: 2.75rem;
}