:root {
  /* Colours — primary */
  --color-teal:         #18CAC9;
  --color-black:        #000000;
  --color-white:        #FFFFFF;

  /* Colours — brand palette */
  --color-navy:         #142544;
  --color-navy-deep:    #002D5C;
  --color-purple:       #6D43D9;
  --color-coral:        #EB5C63;

  /* Colours — backgrounds */
  --color-bg-hero:      #F3F4F5;
  --color-bg-services:  #FAFAFA;
  --color-bg-dark:      #142544;
  --gradient-cta:       linear-gradient(-55deg, #EB5C63 0%, #142544 100%);

  /* Colours — UI */
  --color-placeholder:  #D9D9D9;
  --color-divider:      #CBCBCB;
  --color-text:         #000000;
  --color-text-muted:   #666666;
  --color-body-light:   #666666;  /* alias for text-muted */
  --color-border:       #BBBBBB;

  /* Typography */
  --font-primary:   'Poppins', sans-serif;
  --font-secondary: 'Open Sans', sans-serif;
  --font-serif:     'Poppins', sans-serif;
  --fw-light:       300;
  --fw-regular:     400;
  --fw-medium:      500;
  --fw-semibold:    600;
  --fw-bold:        700;

  /* Font sizes */
  --fs-xs:    0.75rem;   /* 12px */
  --fs-sm:    0.875rem;  /* 14px */
  --fs-base:  1rem;      /* 16px */
  --fs-md:    1.125rem;  /* 18px */
  --fs-lg:    1.25rem;   /* 20px */
  --fs-xl:    1.5rem;    /* 24px */
  --fs-2xl:   2rem;      /* 32px */
  --fs-3xl:   2.5rem;    /* 40px */
  --fs-4xl:   3rem;      /* 48px */
  --fs-hero:  3.75rem;   /* 60px */

  /* Line heights */
  --lh-tight:   1.2;
  --lh-snug:    1.35;
  --lh-normal:  1.6;
  --lh-relaxed: 1.75;

  /* Spacing */
  --space-xs:   0.5rem;    /* 8px */
  --space-sm:   1rem;      /* 16px */
  --space-md:   1.5rem;    /* 24px */
  --space-lg:   2rem;      /* 32px */
  --space-xl:   3rem;      /* 48px */
  --space-2xl:  4rem;      /* 64px */
  --space-3xl:  5rem;      /* 80px */
  --space-4xl:  6.25rem;   /* 100px */

  /* Layout */
  --container-max:   1280px;
  --container-pad:   1.5rem;
  --nav-height:      80px;

  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* Transitions */
  --transition: 0.25s ease;
}

@media (max-width: 768px) {
  :root {
    --fs-hero:  2.5rem;    /* 40px — scales down from 60px */
    --fs-4xl:   2rem;
    --fs-3xl:   1.75rem;
    --fs-2xl:   1.5rem;
    --space-3xl: 3rem;
    --space-4xl: 4rem;
  }
}

@media (max-width: 480px) {
  :root {
    --fs-hero: 2rem;       /* 32px on small phones */
  }
}