/* ─────────────────────────────────────────────
   Design tokens
   Every color, spacing, and type value used across the site is
   declared here once. Components should reference these variables
   rather than hardcoding values, so the palette or scale can change
   in one place later.
   ───────────────────────────────────────────── */

:root {
  /* ── Color: base ──
     Warm off-white rather than stark white — softer for long reading,
     closer to a printed academic page than a clinical screen. */
  --color-bg: #FBFAF7;
  --color-surface: #FFFFFF;
  --color-ink: #24292E;         /* body text — soft charcoal, not pure black */
  --color-ink-muted: #5B6470;   /* captions, metadata, secondary text */
  --color-border: #E3E1DA;

  /* ── Color: brand ──
     Navy carries authority and calm; teal is used sparingly as the
     "living" accent — links, highlights, physician-facing elements. */
  --color-navy: #1B2A45;
  --color-navy-dark: #101A2C;
  --color-navy-tint: #EDF0F5;

  --color-teal: #2E8B82;
  --color-teal-dark: #206760;
  --color-teal-tint: #E4F2F0;

  /* Semantic aliases — change intent, not just color, when reused */
  --color-link: var(--color-teal-dark);
  --color-link-hover: var(--color-navy);
  --color-focus-ring: var(--color-teal);

  /* ── Typography ──
     System-first stacks: zero network requests, fast first paint,
     no external font dependency. Serif carries headings (academic/
     journal register); sans carries body copy (screen readability). */
  --font-serif: Georgia, "Iowan Old Style", "Palatino Linotype", "URW Palladio L", Palatino, serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --font-size-base: 1rem;
  --font-size-sm: 0.875rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.375rem;
  --font-size-2xl: 1.75rem;
  --font-size-3xl: 2.25rem;
  --font-size-4xl: 2.875rem;

  --line-height-tight: 1.25;
  --line-height-base: 1.65;

  /* ── Spacing scale ── */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1.25rem;
  --space-lg: 2rem;
  --space-xl: 3.25rem;
  --space-2xl: 5rem;

  /* ── Layout ── */
  --container-width: 72rem;
  --container-padding: var(--space-md);
  --radius-sm: 4px;
  --radius-md: 8px;

  /* ── Motion ── */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;

  /* ── Elevation ── */
  --shadow-card: 0 1px 3px rgba(27, 42, 69, 0.08), 0 1px 2px rgba(27, 42, 69, 0.06);

  /* ── Z-index scale ── */
  --z-header: 100;
  --z-dropdown: 110;
  --z-mobile-nav: 120;
}

/* Breakpoints are documented here for reference (custom properties
   cannot hold media query values):
   — mobile:  up to 640px
   — tablet:  641px–1024px
   — desktop: 1025px and up               */