:root {
  /* Brand */
  --brand-primary: #017186;      /* Teal */
  --brand-primary-soft: #0a9db8; /* Soft teal */
  --brand-secondary: #ffc638;
  --brand-tint: #e7f3ff;
  --brand-whitespace: #ffffff;

  /* Accent */
  --color-ui-green: #acf4a1;
  --color-ui-yellow: #ffc800;
  --color-cta-yellow: #fed609;   /* Un-tokenized CTA button yellow used in nav/buttons */
  --color-cta-yellow-border: #a08600;

  /* Surfaces */
  --white: #ffffff;
  --black: #1a1a1a;
  --grey: #f7f7fb;

  /* Text */
  --text-color: #2c3d43;
  --text-white: #ffffff;

  /* Border */
  --color-border-default: #edebe9;

  /* Radius */
  --radius-small: 8px;
  --radius-medium: 16px;

  /* Font sizes */
  --font-size-heading1: 44px;
  --font-size-heading2: 40px;
  --font-size-heading3: 28px;
  --font-size-p-large: 24px;
  --font-size-p-medium: 18px;
  --font-size-p-big: 20px;
  --font-size-p-small: 16px;
  --font-size-p-tiny: 12px;

  /* Spacing — content gaps */
  --spacing-contentgap-4static: 4px;
  --spacing-contentgap-8static: 8px;
  --spacing-contentgap-tiny: 12px;
  --spacing-contentgap-small: 20px;
  --spacing-contentgap-medium: 32px;
  --spacing-contentgap-big: 48px;
  --spacing-contentgap-large: 60px;

  /* Spacing — section padding */
  --spacing-sectionpadding-tiny: 12px;
  --spacing-sectionpadding-small: 20px;
  --spacing-sectionpadding-medium: 40px;
  --spacing-sectionpadding-big: 60px;

  /* Container */
  --container-max-width: 1440px;
  --container-spacing-sides-narrow: 160px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  background: var(--white);
  color: var(--text-color);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

button {
  font-family: inherit;
  cursor: pointer;
}

/* Typography scale */
.text-display     { font-size: var(--font-size-heading1); font-weight: 800; line-height: 1.1; }
.text-heading-1   { font-size: var(--font-size-heading1); font-weight: 700; line-height: 1.15; }
.text-heading-2   { font-size: var(--font-size-heading2); font-weight: 700; line-height: 1.2; }
.text-heading-3   { font-size: var(--font-size-heading3); font-weight: 700; line-height: 1.3; }
.text-body-lg     { font-size: var(--font-size-p-large); font-weight: 400; line-height: 1.6; }
.text-body        { font-size: var(--font-size-p-medium); font-weight: 400; line-height: 1.6; }
.text-body-sm     { font-size: var(--font-size-p-small); font-weight: 400; line-height: 1.6; }
.text-caption     { font-size: var(--font-size-p-tiny); font-weight: 500; line-height: 1.5; }