:root {
  /* Brand colours */
  --color-teal:        #3D9898;
  --color-teal-dark:   #2C7070;
  --color-teal-light:  #55B5B5;
  --color-charcoal:    #2E2E2E;
  --color-amber:       #E8A020;
  --color-white:       #FFFFFF;
  --color-off-white:   #F5F5F5;
  --color-grey-light:  #E8E8E8;
  --color-grey-mid:    #888888;
  --color-grey-dark:   #555555;

  /* Spacing scale */
  --space-xs:   0.25rem;
  --space-sm:   0.5rem;
  --space-md:   1rem;
  --space-lg:   1.5rem;
  --space-xl:   2rem;
  --space-2xl:  3rem;
  --space-3xl:  4rem;
  --space-4xl:  6rem;

  /* Typography */
  --font-sans:   'Segoe UI', system-ui, -apple-system, Helvetica, Arial, sans-serif;
  --font-serif:  Georgia, 'Times New Roman', serif;

  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-md:    1.125rem;
  --text-lg:    1.25rem;
  --text-xl:    1.5rem;
  --text-2xl:   2rem;
  --text-3xl:   2.5rem;
  --text-4xl:   3.25rem;

  /* Borders & radius */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-full: 9999px;
  --border:      1px solid var(--color-grey-light);

  /* Shadows */
  --shadow-sm:   0 1px 4px rgba(0,0,0,0.10);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.12);
  --shadow-lg:   0 8px 32px rgba(0,0,0,0.16);

  /* Layout */
  --container-max: 1180px;
  --container-pad: var(--space-lg);
  --nav-height:    72px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
}