:root {
  /* Primary: Deep medical blue — drawn from the Infinite Health logo's darker strand */
  --primary-color: #0272bc;
  --primary-color-rgb: 2, 114, 188;

  /* Secondary: Vibrant sky-blue — from the logo's lighter strand */
  --secondary-color: #29abe2;
  --secondary-color-rgb: 41, 171, 226;

  /* Tertiary: soft teal for accents */
  --tertiary-color: #17c1b0;
  --tertiary-color-rgb: 23, 193, 176;

  /* Quaternary: fresh mint highlight */
  --quaternary-color: #4fd1c5;
  --quaternary-color-rgb: 79, 209, 197;

  /* Primary-2: for overlay gradients (deeper navy) */
  --primary-color-2: #064c7a;
  --primary-color-2-rgb: 6, 76, 122;
}