/* ==========================================================================
   Salud BL — Foundations
   Colors, typography, spacing, radii, shadows, motion
   ========================================================================== */

/* ---------- Fonts ---------- */
/* Inter is the primary typeface. If Inter is not available, SF Pro Text /
   Helvetica Neue / system-ui are acceptable fallbacks — keep the same
   geometric, neutral, authoritative character.

   NOTE: Loaded from Google Fonts. If a licensed .ttf is provided later,
   drop it into /fonts and swap the import for an @font-face rule. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* ------------------------------------------------------------------ */
  /* COLOR — base                                                        */
  /* ------------------------------------------------------------------ */
  --bl-white:      #FFFFFF;
  --bl-bg:         #FFFFFF;
  --bl-surface:    #F6F7FB;
  --bl-surface-2:  #EEF1F8;
  --bl-hairline:   #E5E9F2;
  --bl-border:     #D7DCE8;
  --bl-ink-900:    #0B1B45;
  --bl-ink-800:    #122654;
  --bl-ink-700:    #2A3560;
  --bl-ink-500:    #5A6486;
  --bl-ink-400:    #8891AE;
  --bl-ink-300:    #B4BBCF;
  --bl-ink-200:    #D7DCE8;
  --bl-blue-50:    #EDF2FF;
  --bl-blue-100:   #D9E2FF;
  --bl-blue-200:   #B4C2FF;
  --bl-blue-300:   #7F95FF;
  --bl-blue-400:   #4E6BFF;
  --bl-blue-500:   #2347E5;
  --bl-blue-600:   #1B37BF;
  --bl-blue-700:   #142A99;
  --bl-blue-900:   #0B1B66;
  --bl-success:    #0E9F6E;
  --bl-warning:    #B45309;
  --bl-danger:     #B42318;
  --bl-info:       var(--bl-blue-500);
  --fg-1:          var(--bl-ink-900);
  --fg-2:          var(--bl-ink-700);
  --fg-3:          var(--bl-ink-500);
  --fg-4:          var(--bl-ink-400);
  --fg-muted:      var(--bl-ink-300);
  --fg-on-primary: var(--bl-white);
  --fg-link:       var(--bl-blue-500);
  --bg-0:          var(--bl-bg);
  --bg-1:          var(--bl-surface);
  --bg-2:          var(--bl-surface-2);
  --bg-primary:    var(--bl-blue-500);
  --bg-primary-soft: var(--bl-blue-50);
  --border-subtle: var(--bl-hairline);
  --border-default: var(--bl-border);
  --border-strong: var(--bl-ink-300);
  --border-focus:  var(--bl-blue-500);
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --fs-display-xl: 72px;
  --fs-display:    56px;
  --fs-h1:         44px;
  --fs-h2:         32px;
  --fs-h3:         24px;
  --fs-h4:         20px;
  --fs-lg:         18px;
  --fs-base:       16px;
  --fs-sm:         14px;
  --fs-xs:         12px;
  --lh-tight:      1.05;
  --lh-heading:    1.15;
  --lh-snug:       1.35;
  --lh-body:       1.55;
  --lh-relaxed:    1.7;
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.02em;
  --tracking-eyebrow: 0.08em;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --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; --space-11: 160px; --space-12: 200px;
  --pad-card:        32px;
  --pad-card-lg:     48px;
  --pad-section-y:   96px;
  --pad-section-lg:  128px;
  --pad-container-x: 32px;
  --r-xs:  6px; --r-sm:  10px; --r-md:  14px; --r-lg:  20px;
  --r-xl:  28px; --r-2xl: 36px; --r-pill: 999px;
  --shadow-xs:   0 1px 2px rgba(11, 27, 69, 0.04);
  --shadow-sm:   0 2px 8px rgba(11, 27, 69, 0.05);
  --shadow-md:   0 6px 20px rgba(11, 27, 69, 0.06);
  --shadow-lg:   0 16px 48px rgba(11, 27, 69, 0.08);
  --shadow-focus: 0 0 0 4px rgba(35, 71, 229, 0.18);
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --dur-fast:   120ms; --dur-base:   200ms; --dur-slow:   360ms;
  --container-max:     1240px;
  --container-narrow:  880px;
  --container-reading: 680px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--font-sans); font-size: var(--fs-base); line-height: var(--lh-body); color: var(--fg-3); background: var(--bg-0); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
h1,h2,h3,h4,h5,h6 { font-family: var(--font-display); color: var(--fg-1); margin: 0; text-wrap: balance; letter-spacing: var(--tracking-tight); }
h1 { font-size: var(--fs-h1); font-weight: var(--fw-bold); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); font-weight: var(--fw-semibold); line-height: var(--lh-heading); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); line-height: var(--lh-heading); letter-spacing: -0.01em; }
h4 { font-size: var(--fs-h4); font-weight: var(--fw-semibold); line-height: var(--lh-snug); letter-spacing: -0.005em; }
.display-xl { font-size: var(--fs-display-xl); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: -0.03em; color: var(--fg-1); }
.display { font-size: var(--fs-display); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: -0.025em; color: var(--fg-1); }
p { margin: 0; color: var(--fg-3); font-size: var(--fs-base); line-height: var(--lh-body); text-wrap: pretty; }
.lead { font-size: var(--fs-lg); line-height: var(--lh-relaxed); color: var(--fg-3); font-weight: var(--fw-regular); }
.caption { font-size: var(--fs-sm); color: var(--fg-4); }
.eyebrow { font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--bl-blue-500); }
.label { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--fg-2); letter-spacing: 0; }
a { color: var(--fg-link); text-decoration: none; transition: color var(--dur-fast) var(--ease-standard); }
a:hover { color: var(--bl-blue-600); }
.num-display { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 72px; line-height: 1; letter-spacing: -0.03em; color: var(--bl-blue-500); font-variant-numeric: tabular-nums; }
:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--r-sm); }
.container { max-width: var(--container-max); margin: 0 auto; padding-left: var(--pad-container-x); padding-right: var(--pad-container-x); }
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding-left: var(--pad-container-x); padding-right: var(--pad-container-x); }