/* Rapha Health brand tokens. Source of truth: brand/README.md. Pages map their own variables onto these. */
:root {
  /* Logo gradient (decorative: the mark, thin rules, icons; never small text) */
  --rapha-blue: #2F80ED;
  --rapha-mint: #6EE7B7;
  --rapha-gradient: linear-gradient(45deg, #2F80ED 0%, #6EE7B7 72%);

  /* Dark surfaces (tile, app icon, OG images) */
  --rapha-slate: #3A4859;
  --rapha-slate-deep: #243040;
  --rapha-mist: #B4C3D3;          /* wordmark on slate, 5.2:1 */

  /* Ink and light surfaces */
  --rapha-ink: #1B2533;           /* 14.4:1 on surface */
  --rapha-ink-2: #475569;
  --rapha-ink-3: #5B6776;         /* 5.3:1 on surface, AA for small text */
  --rapha-surface: #F4F7FA;
  --rapha-surface-2: #EBF0F5;
  --rapha-line: #DCE3EB;

  /* UI accent: deep teal (buttons, links, citation chips). All text pairings pass WCAG AA. */
  --rapha-accent: #0F766E;        /* 5.5:1 on white, 5.1:1 on surface; white text on it 5.5:1 */
  --rapha-accent-hover: #0B5E57;  /* hover and pressed; white text on it 7.6:1 */
  --rapha-accent-soft: #E1F4EF;   /* chip / selected fill; accent text on it 4.8:1 */
  --rapha-accent-line: #A8D9CD;   /* chip border (decorative) */
  --rapha-blue-ink: #1F6BD6;      /* logo blue at text strength (5.1:1), if a blue link is ever needed */
}