/* QuantQS design tokens.
   ---------------------------------------------------------------------------
   Reference resolution is 1920x1200. Every rem value in this codebase was
   derived at that width, where the root font-size resolves to exactly 16px —
   so `1rem` == `16px` on the reference display and the numbers below read as
   (px / 16).

   Why rem and not px, em or vw:
     rem  - relative to the root only, so it never compounds through nesting
            the way em does, and it still scales with the reader's browser
            font-size setting (WCAG 1.4.4).
     vw   - deliberately avoided for type. A phone is ~20% of 1920, so pure
            viewport scaling would render 16px body copy at ~3px and would
            ignore user font-size preferences entirely.
     px   - kept ONLY for hairlines (1px borders, which must stay aligned to
            the device pixel grid or they blur) and for the pill radius
            sentinel, which is a "fully round" flag rather than a measurement.

   Media queries elsewhere in this file are written in rem too. Note that rem
   inside a media query always resolves against the *initial* root font-size
   (the browser default, or whatever the user has set) and is unaffected by the
   fluid `html` rule below — which is what we want: breakpoints should respond
   to the reader's text-size preference, not to our own scaling curve. */

:root {
  /* ---- fluid root -------------------------------------------------------
     Solved so the curve passes through exactly 16px at the 1920 reference:
       0.82rem (13.12px) + 0.15vw  ->  13.12 + 2.88 = 16.00px @ 1920
     Floors at 14px so phone copy stays legible, caps at 20px so the layout
     does not balloon on a 4K panel. The rem term is what preserves zoom and
     user font-size settings; a bare vw expression would break both. */
  --root-size: clamp(0.875rem, 0.82rem + 0.15vw, 1.25rem);

  /* ---- type scale -------------------------------------------------------
     Consolidated from the 22 distinct sizes the site had accumulated. The
     old half-pixel steps (12.5, 13.5, 14.5, 15.5, 16.5) were snapped to the
     nearest step; max drift is 0.5px at the reference size. */
  --text-3xs: 0.6875rem; /* 11 */
  --text-2xs: 0.75rem; /* 12 */
  --text-xs: 0.8125rem; /* 13 */
  --text-sm: 0.875rem; /* 14 */
  --text-md: 0.9375rem; /* 15 - body default */
  --text-lg: 1rem; /* 16 */
  --text-xl: 1.125rem; /* 18 */
  --text-2xl: 1.25rem; /* 20 */
  --text-3xl: 1.375rem; /* 22 */
  --text-4xl: 1.625rem; /* 26 */

  /* ---- display type -----------------------------------------------------
     Headings scale faster than body copy, so they carry their own fluid
     curve rather than sitting on the type scale. min == the mobile size,
     max == the 1920 size. */
  --display-sm: clamp(1.25rem, 2.4vw, 1.6875rem); /* 20 -> 27 */
  --display-md: clamp(1.375rem, 2.8vw, 2rem); /* 22 -> 32 */
  --display-lg: clamp(1.625rem, 3vw, 2.375rem); /* 26 -> 38 */
  --display-xl: clamp(1.75rem, 3.4vw, 2.625rem); /* 28 -> 42 */
  --display-2xl: clamp(1.75rem, 3.4vw, 2.75rem); /* 28 -> 44 */
  /* Hero also yields to viewport *height* so it cannot crowd out the copy
     beneath it on a short landscape phone. */
  --display-hero: min(clamp(2.125rem, 4vw, 3.25rem), 7.5vh);

  /* ---- line heights ---- */
  --leading-tight: 1.08;
  --leading-snug: 1.1;
  --leading-heading: 1.05;
  --leading-normal: 1.4;
  --leading-body: 1.65;
  --leading-relaxed: 1.7;

  /* ---- letter spacing ---- */
  --tracking-tighter: -0.03em;
  --tracking-tight: -0.025em;
  --tracking-snug: -0.02em;
  --tracking-slight: -0.01em;
  --tracking-wide: 0.06em;
  --tracking-wider: 0.08em;
  --tracking-widest: 0.14em;

  /* ---- space scale (4px grid at the reference size) ---- */
  --space-0-5: 0.125rem; /* 2 */
  --space-1: 0.25rem; /* 4 */
  --space-1-5: 0.375rem; /* 6 */
  --space-2: 0.5rem; /* 8 */
  --space-2-5: 0.625rem; /* 10 */
  --space-3: 0.75rem; /* 12 */
  --space-3-5: 0.875rem; /* 14 */
  --space-4: 1rem; /* 16 */
  --space-4-5: 1.125rem; /* 18 */
  --space-5: 1.25rem; /* 20 */
  --space-5-5: 1.375rem; /* 22 */
  --space-6: 1.5rem; /* 24 */
  --space-6-5: 1.625rem; /* 26 */
  --space-7: 1.75rem; /* 28 */
  --space-8: 2rem; /* 32 */
  --space-9: 2.25rem; /* 36 */
  --space-10: 2.5rem; /* 40 */
  --space-11: 2.75rem; /* 44 */
  --space-14: 3.5rem; /* 56 */
  --space-16: 4rem; /* 64 */
  --space-18: 4.5rem; /* 72 */
  --space-20: 5rem; /* 80 */
  --space-24: 6rem; /* 96 */

  /* ---- fluid rhythm -----------------------------------------------------
     Page gutter and section padding compress harder than the type scale,
     because horizontal room is the scarcest thing on a phone. */
  --gutter: clamp(1.25rem, 5vw, 3.5rem);
  --section-y: clamp(3.5rem, 9vh, 6rem);
  --section-y-lg: clamp(3.5rem, 9vh, 6.25rem);
  --section-y-sm: clamp(2.5rem, 6vh, 4rem);
  --card-pad: clamp(1.5rem, 3vw, 2.25rem);
  --panel-pad: clamp(1.75rem, 4vw, 3.25rem);
  --grid-gap: clamp(2rem, 5vw, 4.5rem);

  /* ---- containers ---- */
  --wrap: 77.5rem; /* 1240 */
  --wrap-narrow: 72.5rem; /* 1160 */
  --wrap-text: 47.5rem; /* 760 */
  --wrap-form: 40rem; /* 640 */
  --hero-copy: 30rem; /* 480 */

  /* ---- radii ---- */
  --radius-xs: 0.5rem; /* 8 */
  --radius-sm: 0.5625rem; /* 9 */
  --radius-md: 0.75rem; /* 12 */
  --radius-lg: 0.875rem; /* 14 */
  --radius-xl: 1.125rem; /* 18 */
  --radius-2xl: 1.25rem; /* 20 */
  --radius-3xl: 1.375rem; /* 22 */
  --radius-pill: 999px; /* sentinel, not a measurement - keep in px */

  /* ---- borders ----------------------------------------------------------
     Hairlines stay in px on purpose: a sub-pixel border renders blurry, and
     a border that scales with the type is not a border, it is a frame. */
  --hairline: 1px;
  --hairline-strong: 1.5px;

  /* ---- shell metrics ----------------------------------------------------
     One nav height for the whole site. The home page used 72px and every
     other page 64px, which left the mobile menu (pinned at 72px) with a gap
     on subpages. */
  --nav-h: 4.5rem; /* 72 */
  --scroll-offset: 5.5rem; /* 88 - anchor landing clearance */

  /* ---- colour ---- */
  --c-bg: #f7f6f2;
  --c-surface: #ffffff;
  --c-surface-alt: #efede6;
  --c-surface-sunk: #f2f1eb;
  --c-ink: #16262a;
  --c-muted: #5d6e71;
  --c-muted-strong: #4a5a5d;
  --c-faint: #8a9699;
  --c-placeholder: #9a9384;

  --c-brand: #0e5748;
  --c-brand-dark: #0a453a;
  --c-brand-deep: #0d3f36;
  --c-brand-tint: #e7f1ec;
  --c-brand-wash: #f2f8f4;
  --c-brand-wash-alt: #f2f6f2;
  --c-brand-light: #9fd6be;
  --c-brand-pale: #bcd9cc;
  --c-brand-paler: #d6e8df;
  --c-brand-line: #cfe0d6;
  --c-brand-track: #eef2ee;

  --c-line: #e6e3da;
  --c-line-strong: #dcd9ce;

  --c-error-bg: #f8e5dc;
  --c-error-ink: #8c3b14;
  --c-warn-ink: #b4552a;

  /* ---- elevation ---- */
  --shadow-card: 0 0.875rem 2.125rem rgba(22, 38, 42, 0.09);
  --shadow-card-lg: 0 1.125rem 2.75rem rgba(22, 38, 42, 0.1);
  --shadow-panel: 0 1.875rem 5rem rgba(0, 0, 0, 0.28);
  --shadow-btn: 0 0.625rem 1.625rem rgba(14, 87, 72, 0.22);

  /* ---- motion ---- */
  --ease: 0.2s;
  --ease-slow: 0.25s;
  --ease-reveal: 0.6s;

  /* ---- fonts ---- */
  --font-body: 'Manrope', system-ui, -apple-system, sans-serif;
  --font-display: 'Sora', system-ui, -apple-system, sans-serif;
}