:root {
  /* Brand — a richer orange ramp built from #fe7735. Most surfaces stay
     white/--color-bg; these are for accents, CTAs and small highlights,
     not for painting whole sections orange. */
  --color-primary: #fe7735;
  --color-primary-deep: #e25f1f;
  --color-primary-mid: #f88947;
  --color-primary-light: #ff985f;
  --color-primary-soft: #ffb278;
  --color-primary-tint: #fff1e8;

  --color-bg: #fafafa;
  --color-surface: #ffffff;

  --color-text: #1a1a1a;
  --color-text-muted: #60606a;

  --color-border: #e6e6e9;

  --color-dark: #141319;

  /* Semantic aliases so components never reference raw brand colors */
  --color-link: var(--color-primary-deep);
  --color-focus-ring: var(--color-primary-deep);
  --gradient-brand: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-mid) 55%, var(--color-primary-deep) 100%);

  /* Typography */
  --font-sans:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-md: 1.125rem;
  --font-size-lg: 1.375rem;
  --font-size-xl: 1.75rem;
  /* Fluid so H1 has real desktop presence (up to 48px) without growing
     unwrapped-word-length problems on small screens (floors at 36px,
     same as the old fixed size). */
  --font-size-2xl: clamp(2.25rem, 1.9rem + 1.5vw, 3rem);
  --line-height-tight: 1.25;
  --line-height-base: 1.6;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* Section-level vertical rhythm. Fluid so large sections breathe more
     on wide desktop screens without feeling sparse on mobile — this is
     the single source of truth for spacing between major sections
     sitewide (`.section`, `.section--tight`, and the homepage sections
     that manage their own padding like the dark hero and provider band).
     Don't hand-patch a section's margin/padding; adjust these instead. */
  --space-section-y: clamp(56px, 8vw, 96px);
  --space-section-y-sm: clamp(40px, 6vw, 72px);
  /* Gap between a section's heading/intro copy and the grid, card row or
     timeline that follows it. */
  --space-block-gap: clamp(20px, 3vw, 32px);

  /* Layout */
  --container-max: 1440px;
  --prose-max: 72ch;
  /* The single shared content width used sitewide for page bodies —
     Homepage section copy/cards and internal-page content (page.njk,
     which the Register/Login/etc. pages all use) both size against this
     one token, so nothing looks arbitrarily narrower than anything else
     on the same page. Wide enough to use the desktop container well,
     short of the full container edge so it never reads as a stretched,
     edge-to-edge paragraph. `--prose-max` (72ch) stays available for the
     rare case that's genuinely narrower by design (e.g. hero copy sitting
     beside a visual panel). */
  --prose-wide-max: 1200px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  /* Elevation kept deliberately restrained */
  --shadow-sm: 0 1px 2px rgba(20, 19, 25, 0.06);
  --shadow-md: 0 4px 16px rgba(20, 19, 25, 0.08);

  --transition-fast: 150ms ease;
}