/* Healthier Friend Figma: 2zOnMngTLCwYQHjIlYnAAw, Style Guide 1:485.
 * Figma foundations with the approved cyan adaptation; Health child theme only.
 */
:root,
body.cba-health {
  --color-primary: #0075A3;
  --color-primary-dark: #00557B;
  --color-primary-light: #DEF5FF;
  --color-secondary: #173A52;
  --color-accent: #EFF017;
  --color-health-logo-accent: var(--color-accent);
  --color-health-header-bg: var(--color-secondary);
  --color-health-header-text: var(--color-on-secondary);
  --color-health-header-muted: var(--color-primary-light);
  --color-health-header-border: #3885A4;
  --color-health-header-hover: var(--color-accent);
  --color-health-header-hover-bg: var(--color-primary-dark);
  --color-bg: #FFFFFF;
  --color-surface: #F5FCFF;
  --color-text: #333333;
  --color-text-muted: #525252;
  --color-border: #C4E1F3;
  --color-link: #0075A3;
  --color-link-hover: #00557B;
  --color-on-primary: #FFFFFF;
  --color-on-secondary: #FFFFFF;
  --color-on-accent: #173A52;
  --color-focus: #173A52;
  --color-success: #52CC54;
  --color-warning: #F9B600;
  --color-danger: #E54545;
  --color-info: #338BFF;
  --color-footer-bg: #00557B;
  --color-footer-heading: #FFFFFF;
  --color-footer-text: #DEF5FF;
  --color-footer-link: #FFFFFF;
  --color-footer-muted: #DEF5FF;
  --color-footer-border: #3885A4;
  --color-footer-border-strong: #C4E1F3;
  --color-footer-pattern: #00557B;
  --color-health-feature: #DEF5FF;
  --color-health-category: #0075A3;
  --font-heading: "Rubik", "Segoe UI", sans-serif;
  --font-body: "Rubik", "Segoe UI", sans-serif;
  --font-size-3xl: 2rem;
  --font-size-4xl: 2.5rem;
  --font-size-health-display: clamp(1.75rem, 2.8vw, 2.25rem);
  --font-size-health-h1: clamp(2rem, 3.8vw, 3rem);
  --font-size-health-h2: clamp(1.5rem, 2.4vw, 2rem);
  --font-size-health-h3: clamp(1.5rem, 2.4vw, 2rem);
  --font-size-health-h4: clamp(1.25rem, 1.8vw, 1.5rem);
  --font-size-health-h5: clamp(1.125rem, 1.5vw, 1.375rem);
  --font-size-health-h6: clamp(1.125rem, 1.4vw, 1.25rem);
  --line-height-tight: 1.2;
  --line-height-normal: 1.6;
  --line-height-relaxed: 1.6;
  --line-height-health-heading: 1.2;
  --container-content: 760px;
  --container-wide: 1180px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 8px;
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -2px rgb(0 0 0 / 0.03), 0 12px 16px -4px rgb(0 0 0 / 0.08);
  --shadow-lg: 0 20px 24px -4px rgb(0 0 0 / 0.08), 0 8px 8px -4px rgb(0 0 0 / 0.03);
}

@media (max-width: 767px) {
  :root,
  body.cba-health {
    --line-height-health-heading: 1.3;
  }
}