/* ==========================================================================
   ELDERLY WELLNESS SHARED DESIGN SYSTEM TOKENS & TYPOGRAPHY SCALE
   ========================================================================== */

:root {
  /* 1. Typography Font Size Scale (6 Steps) */
  --fs-xs: 0.875rem;    /* 14px */
  --fs-sm: 1.0rem;      /* 16px */
  --fs-md: 1.125rem;    /* 18px */
  --fs-lg: 1.5rem;      /* 24px */
  --fs-xl: 2.0rem;      /* 32px */
  --fs-2xl: 2.75rem;    /* 44px */

  /* 2. Font Weights */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* 3. Line Heights */
  --lh-tight: 1.25;
  --lh-normal: 1.5;
  --lh-relaxed: 1.75;

  /* 4. Curated Color System */
  --color-primary: #2786a5;
  --color-primary-dark: #1e6b84;
  --color-dark-navy: #1a2e35;
  --color-text-dark: #334155;
  --color-text-muted: #64748b;
  --color-bg-light: #f8fafc;
  --color-bg-white: #ffffff;
  --color-border: #e2e8f0;

  /* 5. Spacing Steps (4, 8, 16, 24, 32, 48, 64) */
  --space-4: 4px;
  --space-8: 8px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;

  /* 6. Border Radius Steps */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 9999px;
}

/* Master Shared Utility Classes */
h1, .h1 {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-tight);
  color: var(--color-dark-navy);
}

h2, .h2 {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--color-dark-navy);
}

h3, .h3 {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-normal);
  color: var(--color-dark-navy);
}

h4, .h4 {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-normal);
  color: var(--color-text-dark);
}

p, .p-body {
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--color-text-dark);
}

/* Mixed Capitalization Clean Title Case Utilities */
.hero-title-clean {
  text-transform: none !important;
}