/* ==========================================================================
   DESIGN TOKENS
   Central source of truth for the hospital's visual identity.
   Rebrand the entire site by editing the values below.
   ========================================================================== */

:root {
  /* ---- Color: core brand ---- */
  --primary: #03265A;        /* deep navy — trust, professionalism */
  --primary-dark: #021b41;
  --primary-light: #3a567e;
  --secondary: #A6115E;      /* medical teal — care, vitality */
  --secondary-dark: #810d49;
  --accent: #7EAD26;         /* warm amber — human warmth, used sparingly */
  --accent-dark: #658a1e;

  /* ---- Color: neutrals & surfaces ---- */
  --bg: #ffffff;
  --surface: #F4F7FB;        /* very light blue-gray */
  --surface-alt: #fafbfd;
  --surface-dark: #0a3d5c;
  --border: #dfe4e9;
  --border-strong: #c7cdd4;

  /* ---- Color: text ---- */
  --text: #26364A;
  --text-inverse: #F4F7FB;
  --muted: #727c89;
  --muted-inverse: #babfc5;

  /* ---- Color: semantic ---- */
  --success: #1c8a5a;
  --error: #c14343;

  /* ---- Typography ---- */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;

  --fs-xs: clamp(0.75rem, 0.71rem + 0.2vw, 0.8125rem);
  --fs-sm: clamp(0.875rem, 0.83rem + 0.22vw, 0.9375rem);
  --fs-base: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  --fs-md: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
  --fs-lg: clamp(1.375rem, 1.25rem + 0.6vw, 1.75rem);
  --fs-xl: clamp(1.75rem, 1.5rem + 1.2vw, 2.5rem);
  --fs-2xl: clamp(2.25rem, 1.8rem + 2.2vw, 3.5rem);
  --fs-3xl: clamp(2.75rem, 2rem + 3.6vw, 4.75rem);

  --lh-tight: 1.12;
  --lh-snug: 1.3;
  --lh-normal: 1.6;
  --lh-relaxed: 1.75;

  /* ---- Spacing scale ---- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.25rem;
  --space-xl: 3.5rem;
  --space-2xl: 5.5rem;
  --space-3xl: 8rem;

  --container-max: 1280px;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  /* ---- Radius ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  /* ---- Shadow (used sparingly, low opacity) ---- */
  --shadow-sm: 0 1px 2px rgba(10, 36, 47, 0.06);
  --shadow-md: 0 8px 24px rgba(10, 36, 47, 0.08);
  --shadow-lg: 0 20px 48px rgba(10, 36, 47, 0.12);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur-med: 420ms;
  --dur-slow: 900ms;

  /* ---- Layout ---- */
  --nav-height: 76px;
  --nav-height-scrolled: 64px;
}