:root {
  --color-primary: #234E70;
  --color-primary-rgb: 35, 78, 112;
  --color-primary-hover: #18364D;
  --color-primary-hover-rgb: 24, 54, 77;
  --color-surface: #F5FAFB;
  --color-text: #203444;
  --color-text-muted: #667887;
  --color-border: #D4E1E5;
  --color-white: #FFFFFF;
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --header-height: 5.25rem;
  --nav-accent: #FFFFFF;
  /* Teal tint for hover/active backgrounds in light dropdowns (text uses --color-primary) */
  --nav-accent-rgb: 0, 169, 180;
  /* Accent text on light surfaces (mega menus, dropdowns); --nav-accent stays white for the bar */
  --nav-accent-on-light: var(--color-primary);
  --banner-height: 400px;
  /* Inner pages: image banners (excludes index hero carousel) */
  --page-banner-image-min-height: min(56vh, 520px);
  --hero-min-height: min(94vh, 1020px);
  --color-leader-panel: #00a9b4;
  --container-max: 1200px;
  --radius-sm: 6px;
  --shadow-dropdown: 0 12px 32px rgba(15, 23, 42, 0.12);
  --z-header: 1000;
  --transition: 0.2s ease;
}

@media (max-width: 991.98px) {
  :root {
    --header-height: 4.5rem;
    --page-banner-image-min-height: min(42vh, 420px);
    --hero-min-height: min(78vh, 760px);
  }
}

@media (max-width: 767.98px) {
  :root {
    --header-height: 4rem;
    --page-banner-image-min-height: min(36vh, 340px);
    --hero-min-height: min(72vh, 620px);
  }
}