/* =============================================================================
   Central Hospital — Colors & Type Foundations
   "Central to Health, Central to Life"  ·  Designed by Studio Fable

   ALL VALUES BELOW ARE FROM THE OFFICIAL BRAND GUIDE (2025).
   Type:  Red Hat Display (headers, buttons) + Figtree (body) — self-hosted in fonts/.
   ============================================================================= */

/* Brand fonts — self-hosted variable fonts (official). Paths resolve relative to
   THIS stylesheet (project root), so all kits/cards load them regardless of depth. */
@font-face {
  font-family: 'Red Hat Display';
  src: url('fonts/RedHatDisplay-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 300 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Figtree';
  src: url('fonts/Figtree-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 300 900; font-style: normal; font-display: swap;
}

:root {
  /* ---------------------------------------------------------------------------
     1. BRAND PALETTE  (official)
        Core: Central Teal + Central Burgundy + Central White, on generous white
        and warm Cream. Supporting: Sage, Pale Teal, Rose.
     --------------------------------------------------------------------------- */
  --teal:          #0A5259;   /* CENTRAL TEAL — primary. trust, calm, clarity   */
  --teal-700:      #073C41;   /* darker — pressed / deep surfaces               */
  --teal-300:      #4E868B;   /* lighter teal for hovers on dark                */

  --burgundy:      #7C1D3C;   /* CENTRAL BURGUNDY — secondary, premium accent   */
  --burgundy-700:  #5E1530;

  --rose:          #B16E81;   /* warm mauve accent — women's health, humanity   */
  --sage:          #8CB3B5;   /* soft sage — supporting / quiet UI              */
  --pale-teal:     #CEE4E4;   /* pale teal surface                              */

  --white:         #FFFFFF;
  --cream:         #EEE5D9;   /* CENTRAL CREAM — the warm brand fill / sand     */

  /* convenience aliases used across kits */
  --tint-teal:     var(--pale-teal);
  --tint-rose:     #EFE0E4;   /* derived pale rose surface (not an official swatch) */

  /* ---------------------------------------------------------------------------
     2. NEUTRALS  (official soft-black + a derived warm neutral ramp)
     --------------------------------------------------------------------------- */
  --ink:           #191718;   /* CENTRAL soft black — primary text              */
  --ink-2:         #514A4C;   /* secondary text (derived)                       */
  --ink-3:         #8B8284;   /* muted / captions / placeholders (derived)      */
  --line:          #E7E0D5;   /* warm hairline border (derived from cream)      */
  --line-2:        #F1ECE4;   /* faint divider (derived)                        */
  --surface:       #FFFFFF;   /* cards / base surface                           */
  --canvas:        #FFFFFF;   /* base page — white is used generously           */
  --sand:          var(--cream);  /* warm alternate section background          */
  --canvas-cool:   #F3F8F8;   /* cool alternate (pale-teal wash)                */

  /* ---------------------------------------------------------------------------
     3. SEMANTIC  (calm, never alarming — tuned to the palette)
     --------------------------------------------------------------------------- */
  --success:       #2E7D6B;  --success-bg: #E3F1ED;
  --warning:       #9C6B22;  --warning-bg: #F6EBDB;
  --danger:        #A33049;  --danger-bg:  #F6E4E8;   /* from the burgundy family */
  --info:          var(--teal);  --info-bg: var(--pale-teal);

  /* ---------------------------------------------------------------------------
     4. TYPOGRAPHY
        --font-display : Red Hat Display — headings + buttons
        --font-sans    : Figtree — body, tagline, links, UI text
     --------------------------------------------------------------------------- */
  --font-display: 'Red Hat Display', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-sans:    'Figtree', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --fs-display:  clamp(2.75rem, 1.8rem + 4.2vw, 4.5rem);
  --fs-h1:       clamp(2.1rem, 1.5rem + 2.6vw, 3.25rem);
  --fs-h2:       clamp(1.6rem, 1.25rem + 1.6vw, 2.25rem);
  --fs-h3:       1.5rem;
  --fs-h4:       1.25rem;
  --fs-lead:     1.1875rem;
  --fs-body:     1.0625rem;
  --fs-sm:       0.9375rem;
  --fs-xs:       0.8125rem;
  --fs-eyebrow:  0.75rem;

  --lh-tight:    1.08;
  --lh-snug:     1.25;
  --lh-body:     1.62;

  --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;

  --tracking-tight:   -0.02em;
  --tracking-eyebrow: 0.14em;

  /* ---------------------------------------------------------------------------
     5. SPACE · RADII · SHADOW
        Radii lean on the PILL — the official brand element drawn from the logo.
     --------------------------------------------------------------------------- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px; --space-10: 128px;

  --radius-sm:  8px;
  --radius-md:  14px;   /* inputs, small cards              */
  --radius-lg:  22px;   /* cards — soft, echoes the capsule */
  --radius-xl:  32px;   /* feature panels                   */
  --radius-pill: 999px; /* THE brand element: capsule       */

  --shadow-xs: 0 1px 2px rgba(25, 23, 24, 0.05);
  --shadow-sm: 0 2px 8px rgba(25, 23, 24, 0.06);
  --shadow-md: 0 10px 28px -12px rgba(10, 82, 89, 0.16);
  --shadow-lg: 0 26px 60px -24px rgba(10, 82, 89, 0.22);
  --shadow-focus: 0 0 0 4px rgba(10, 82, 89, 0.20);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);   /* calm ease-out, no bounce      */
  --dur:  220ms;
  --maxw: 1200px;
}

/* =============================================================================
   SEMANTIC ELEMENT DEFAULTS — opt-in via .ch-type
   ============================================================================= */
.ch-type, .ch-type p, .ch-type li, .ch-type a { font-family: var(--font-sans); }
.ch-type h1, .ch-type h2, .ch-type h3, .ch-type h4, .ch-type .display { font-family: var(--font-display); }

.ch-type {
  color: var(--ink);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.display, h1.display {
  font-size: var(--fs-display); line-height: var(--lh-tight);
  font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); color: var(--teal);
}
.ch-type h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); font-weight: var(--fw-bold);     letter-spacing: var(--tracking-tight); color: var(--ink); }
.ch-type h2 { font-size: var(--fs-h2); line-height: var(--lh-snug);  font-weight: var(--fw-bold);     letter-spacing: var(--tracking-tight); color: var(--ink); }
.ch-type h3 { font-size: var(--fs-h3); line-height: var(--lh-snug);  font-weight: var(--fw-semibold); color: var(--ink); }
.ch-type h4 { font-size: var(--fs-h4); line-height: var(--lh-snug);  font-weight: var(--fw-semibold); color: var(--ink); }
.ch-type p  { font-size: var(--fs-body); line-height: var(--lh-body); margin: 0 0 1em; color: var(--ink-2); }
.lead       { font-size: var(--fs-lead); line-height: 1.55; color: var(--ink-2); font-weight: var(--fw-regular); }

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow); font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--rose);
}
small, .text-sm { font-size: var(--fs-sm); }
.text-xs { font-size: var(--fs-xs); }

a { color: var(--teal); text-decoration-thickness: 1px; text-underline-offset: 3px; }