/* ==========================================================================
   Design tokens — every value here traces back to the locked brand system
   (medics-express-brand-guidelines.md / ui-style.md). Nothing here is a new
   design decision; it's the existing system expressed as CSS variables so
   it's used consistently and can be updated in one place if it ever changes.
   ========================================================================== */

:root {
  /* Color — locked palette. Amber is reserved for verified/trust/CTA
     moments only per brand rule; don't reach for it as a general accent. */
  --color-navy: #12233D;
  --color-navy-text-on-amber: #412402; /* from UI style doc: contrast text on amber buttons */
  --color-amber: #D98E2B;
  --color-warm-gray: #6B6B68;
  --color-brick-red: #B2453E;
  --color-white: #FFFFFF;
  --color-off-white: #F7F6F2; /* section-alternation background, not pure white */
  --color-card-bg: #F4F3F1;
  --color-border: rgba(18, 35, 61, 0.12); /* thin, low-contrast border per UI style doc */

  /* Type — IBM Plex Sans only, per brand guidelines. No secondary display
     face; the brand explicitly avoids introducing a second typeface. */
  --font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Type scale */
  --fs-h1: clamp(2.25rem, 4vw + 1rem, 3.5rem);
  --fs-h2: clamp(1.75rem, 2.5vw + 1rem, 2.5rem);
  --fs-h3: clamp(1.25rem, 1.5vw + 1rem, 1.75rem);
  --fs-body-lg: 1.125rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-caption: 0.75rem;

  /* Spacing scale */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;

  /* Radius — rounded corners everywhere, per brand rule */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* Layout */
  --content-max-width: 1180px;
  --content-padding: clamp(1.25rem, 4vw, 3rem);
}