:root {
   /* =====================================================
       FOUNDATION COLORS
    ===================================================== */
   --site-white: #ffffff;
   --site-white-rgb: 255, 255, 255;

   --site-black: #000000;
   --site-black-rgb: 0, 0, 0;

   --site-text: #172033;
   --site-text-rgb: 23, 32, 51;

   --site-muted: #5b6475;
   --site-muted-rgb: 91, 100, 117;

   /* =====================================================
       PRIMARY = STRONG DARK BLUE
    ===================================================== */
   --site-primary: #1f4f85;
   --site-primary-rgb: 31, 79, 133;

   --site-primary-dark: #12365e;
   --site-primary-dark-rgb: 18, 54, 94;

   --site-primary-light: #e7f1fb;
   --site-primary-light-rgb: 231, 241, 251;

   /* =====================================================
       SECONDARY / BRAND COLOR = AQUA
    ===================================================== */
   --site-secondary: #27f5ee;
   --site-secondary-rgb: 39, 245, 238;

   --site-secondary-light: #d9fefd;
   --site-secondary-light-rgb: 217, 254, 253;

   --site-secondary-dark: #11d8d1;
   --site-secondary-dark-rgb: 17, 216, 209;

   /* =====================================================
      NAV TOKENS
   ===================================================== */
   --site-nav-link: var(--site-text);
   --site-nav-link-hover: var(--site-secondary);
   --site-nav-link-active: var(--site-primary);

   --site-nav-bg-hover: transparent;
   --site-nav-bg-active: transparent;

   /* =====================================================
       ACCENT
    ===================================================== */
   --site-accent: #f2c94c;
   --site-accent-rgb: 242, 201, 76;

   --site-accent-text: #2b2b2b;
   --site-accent-text-rgb: 43, 43, 43;

   --site-facebook: #1877F2;
   --site-facebook-rgb: 24, 119, 242;

   --site-light-bg: var(--site-secondary-light);
   --site-light-bg-rgb: var(--site-secondary-light-rgb);



   /* =====================================================
       SEMANTIC / GLOBAL UI TOKENS
    ===================================================== */
   --site-bg: var(--site-white);
   --site-surface: var(--site-white);

   --site-heading: var(--site-text);
   --site-link: var(--site-primary);

   --site-border: rgba(var(--site-text-rgb), 0.10);
   --site-shadow: 5px 14px 34px rgba(var(--site-text-rgb), 0.10);

   /* =====================================================
       CONTEXTUAL / COMPONENT TOKENS
    ===================================================== */
   --site-heading-accent: var(--site-primary);

   --site-header-bg: rgba(var(--site-white-rgb), 0.72);

   --site-glass-bg: rgba(var(--site-white-rgb), 0.55);
   --site-glass-border: rgba(var(--site-secondary-rgb), 0.25);

   --site-hero-overlay-start: rgba(var(--site-primary-dark-rgb), 0.82);
   --site-hero-overlay-end: rgba(var(--site-primary-dark-rgb), 0.50);

   --site-btn-light-bg: rgba(var(--site-white-rgb), 0.92);
   --site-btn-light-border: rgba(var(--site-white-rgb), 0.45);

   /* Keep solid primary buttons blue */
   --site-btn-primary-text: var(--site-white);
   --site-btn-primary-text-hover: var(--site-white);
   --site-btn-light-hover-bg: var(--site-white);

   /* Footer stays grounded */
   --site-footer-bg: var(--site-primary-dark);
   --site-footer-text: rgba(var(--site-white-rgb), 0.92);
   --site-footer-link: rgba(var(--site-white-rgb), 0.84);
   --site-footer-border: rgba(var(--site-white-rgb), 0.14);
   --site-footer-bottom: rgba(var(--site-white-rgb), 0.70);
   --site-footer-title: var(--site-white);
   --site-footer-link-hover: var(--site-secondary);

   --site-hero-card-shadow: var(--site-shadow);
   --site-card-hover-border: var(--site-primary-rgb);

   /* =====================================================
       RADII / SPACING
    ===================================================== */
   --site-radius-sm: 12px;
   --site-radius-md: 18px;
   --site-radius-lg: 24px;

   --site-section-space: 4.5rem;
}