/* ==========================================================================
   Design Tokens — shared homepage design system
   Issue #1740 (tokens), #1742 (typography scale), #1741 (section spacing)

   Loaded BEFORE homepage-refresh.css and pricing-tiers.css so both custom
   stylesheets can resolve these variables. This file is hand-authored and is
   NOT part of the Webflow export manifest, so Webflow re-exports never
   overwrite it (same durability contract as homepage-refresh.css /
   pricing-tiers.css).

   Every consumer uses the `var(--token, <fallback>)` form with the fallback
   equal to the token value, so the custom stylesheets still render correctly
   on the handful of pages that link them without this file.
   ========================================================================== */

:root {
  /* --- Brand palette (5 core colours) ------------------------------------ */
  --color-black: #000; /* hard borders + Memphis drop-shadows */
  --color-white: #fff; /* on-dark text / button labels        */
  --color-ink: #1e1f28; /* near-black heading + border ink      */
  --color-safe: #4b9a42; /* green — safe state / primary CTA     */
  --color-bg: #f1efe5; /* warm paper background / card fill    */

  /* --- Neutral support colours (kept 1:1 to avoid visual regression) ----- */
  --color-muted: #666; /* secondary text                       */
  --color-muted-strong: #444; /* stronger secondary text              */
  --color-muted-soft: #888; /* faint captions (pricing)             */
  --color-text-hover: #333; /* toggle hover text (pricing)          */
  --color-surface-2: #e8e5da; /* inset toggle track (pricing)         */

  /* --- Typography scale (6 steps) — issue #1742 -------------------------- */
  --font-xs: 0.85rem;
  --font-sm: 0.95rem;
  --font-base: 1rem;
  --font-lg: 1.25rem;
  --font-xl: 1.75rem;
  --font-2xl: 2.5rem;

  /* Matching line-heights (tightens as size grows) */
  --line-xs: 1.4;
  --line-sm: 1.5;
  --line-base: 1.6;
  --line-lg: 1.5;
  --line-xl: 1.3;
  --line-2xl: 1.2;

  /* --- Section spacing scale (7 steps) — issues #1740 / #1741 ------------ */
  --space-xs: 0.5rem; /*  8px */
  --space-sm: 0.75rem; /* 12px */
  --space-md: 1rem; /* 16px */
  --space-lg: 1.5rem; /* 24px */
  --space-xl: 2rem; /* 32px */
  --space-2xl: 3rem; /* 48px — compact section rhythm */
  --space-3xl: 5rem; /* 80px — general large gap      */

  /* --- Radii (3 steps) --------------------------------------------------- */
  --radius-sm: 8px;
  --radius-md: 15px;
  --radius-lg: 2rem; /* pills / toggles */

  /* --- Shadows (3 steps) — hard offset Memphis style, no blur ------------ */
  --shadow-sm: 2px 2px 0 var(--color-black);
  --shadow-md: 4px 4px 0 var(--color-black);
  --shadow-lg: 6px 6px 0 var(--color-black);
}