/*
 * Clean Water Help — Design Tokens
 * Fonts: Prompt (headings) · IBM Plex Serif (body) · IBM Plex Mono (data)
 * Colors: #002E5D (navy) · #37B4FC (blue) · #FC7F37 (orange)
 */

@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@400;500;600;700;800&family=IBM+Plex+Serif:ital,wght@0,300;0,400;0,500;1,400&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ── COLOR PRIMITIVES ─────────────────────────────────────────────── */
:root {
  --navy-500: #002E5D;
  --sky-300:  #37B4FC;
  --sky-400:  #0F9FEF;
  --orange-400: #FC7F37;
  --orange-500: #E86218;

  --white:      #FFFFFF;
  --off-white:  #F4F8FC;
  --gray-100:   #E8EFF5;
  --gray-200:   #CCDAE6;
  --gray-300:   #A8BECE;
  --gray-400:   #7898B0;
  --gray-500:   #4F6E85;
  --near-black: #0D1F2D;
}

/* ── SHORTHAND ALIASES (used throughout components) ───────────────── */
:root {
  --navy:         var(--navy-500);
  --blue:         var(--sky-300);
  --blue-hover:   var(--sky-400);
  --orange:       var(--orange-400);
  --orange-hover: var(--orange-500);
  --text:         var(--near-black);

  --fh: 'Prompt', 'Arial Black', system-ui, sans-serif;
  --fb: 'IBM Plex Serif', 'Georgia', serif;
  --fm: 'IBM Plex Mono', 'Courier New', monospace;

  --sh-sm: 0 2px 10px rgba(0,46,93,.08);
  --sh-md: 0 4px 20px rgba(0,46,93,.11);
  --sh-lg: 0 8px 36px rgba(0,46,93,.14);

  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   14px;
  --radius-pill: 999px;

  --transition-fast: 150ms ease;
  --transition-base: 280ms ease;
}

/* ── BASE ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--fb);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--fh);
  color: var(--navy);
  letter-spacing: -0.025em;
  text-wrap: balance;
}

p  { line-height: 1.65; margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }
a  { text-decoration: none; color: var(--blue); transition: color var(--transition-fast); }
a:hover { color: var(--blue-hover); }
img { max-width: 100%; display: block; }
button { cursor: pointer; font-family: inherit; }