:root {
  /* Brand */
  --brand-charcoal:     #2C3333;
  --brand-deep-slate:   #2E4F4F;
  --brand-vibrant-teal: #0E8388;
  --brand-mint-mist:    #CBE4DE;

  /* Surfaces */
  --surface-page:    #F4F7F6;
  --surface-card:    #FFFFFF;
  --surface-border:  #E1E8E6;

  /* Functional */
  --functional-success: #0E8388;
  --functional-warning: #D08F1F;
  --functional-danger:  #C0392B;

  /* Type scale (Inter) */
  --type-display-lg: 64px / 1.0625;   /* hero headline */
  --type-h1:        40px / 1.1;
  --type-h2:        32px / 1.25;
  --type-h3:        24px / 1.333;
  --type-body-lg:   20px / 1.4;
  --type-body-md:   16px / 1.5;
  --type-body-sm:   14px / 1.43;
  --type-label-sm:  12px / 1.333;     /* uppercase tracked */
  --type-mono-md:   16px / 1.25;      /* JetBrains Mono — money & IDs */

  /* Spacing */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
}

:root {
  /* Derived: muted secondary text on light surfaces. Not in §4 — picked
     to clear WCAG AA (≥4.5:1) against both #FFFFFF and --surface-page
     while staying close to the Figma's intended slate-gray tone. */
  --text-muted: #5A6E6E;

  /* Derived: a darker companion to --brand-vibrant-teal, used only as
     small label text on tinted (mint mist) or surface-page backgrounds
     where the locked #0E8388 token cannot meet AA. Visually within
     design-noise of the brand teal but reads at ≥4.5:1 against
     #CBE4DE and #F4F7F6. Not in §4. */
  --text-on-tinted: #075F62;

  /* Derived: a darker companion to --functional-warning for the same
     reason. Used only as small label text on warning-tinted pill
     backgrounds. Not in §4. */
  --text-warn-strong: #7A4F0A;

  /* Derived radii — match the Figma. */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* Layout */
  --content-max: 1280px;
  --gutter-desktop: 80px;
  --gutter-mobile:  20px;
}