:root {
  /* ---- Brand teals ---- */
  --color-primary:        #72d5e7; /* Aqua Highlight — primary buttons, accents */
  --color-primary-hover:  #4cc6dd;
  --teal-deep:             #1d6868; /* Deep Brand — headers, nav, footer, dark sections */
  --teal-deep-hover:       #15514f;
  --teal-phca:             #8dd0d3; /* section backgrounds, icon fills */
  --teal-soft:             #71a6a9; /* dividers, subtle backgrounds */
  --teal-medium:           #83c1c4; /* cards, hover states */
  --teal-wash:              #eaf8fb; /* light aqua wash */
  --teal-mist:              #f2fafb; /* near-white teal tint */

  /* ---- Accent / alert (urgent health notices only) ---- */
  --color-urgent:  #ff6900;
  --color-urgent-hover: #e35f00;
  --color-coral:   #f97352;
  --color-danger:  #dd3333;
  --color-link:    #0693e3;

  /* ---- Neutrals ---- */
  --color-surface:      #fdfdfd; /* body background */
  --color-surface-card: #ffffff;
  --color-surface-input:#f7f7f7;
  --color-border:       #e3e3e3;
  --color-text:         #666666; /* body copy */
  --color-text-muted:   #999999;
  --color-text-heading: #585858;
  --color-text-strong:  #252525;
  --color-text-on-dark: #ffffff;
  --color-text-on-dark-muted: rgba(255, 255, 255, 0.78);

  /* ---- Fonts ---- */
  --font-heading: 'Abril Fatface', Georgia, 'Times New Roman', serif;
  --font-body:    'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --tracking-label: 0.08em;
  --leading-heading: 1.3;
  --leading-body:    1.7;

  /* ---- Spacing (4px base) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 40px;
  --space-10: 48px;
  --space-12: 64px;
  --section-pad-y: 64px;

  /* ---- Radii ---- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-pill: 999px;

  /* ---- Shadows ---- */
  --shadow-xs: 0 1px 2px rgba(37, 37, 37, 0.06);
  --shadow-sm: 0 2px 8px rgba(37, 37, 37, 0.08);
  --shadow-md: 0 6px 20px rgba(37, 37, 37, 0.08);
  --shadow-lg: 0 14px 40px rgba(29, 104, 104, 0.12);
  --shadow-teal: 0 10px 28px rgba(114, 213, 231, 0.30);

  /* ---- Motion ---- */
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 0.15s var(--ease-soft);
  --transition-base: 0.25s var(--ease-soft);

  /* ---- Layout ---- */
  --container-max: 1170px;
  --container-pad: 24px;
}