/* GivingAid design tokens — change a value here and the whole site follows. */
:root {
  /* Brand colour */
  --blue: #1000ff;
  --blue-deep: #0a00b8;
  --turq: #00f5d4;
  --turq-deep: #00695c;
  --white: #ffffff;
  --paper: #f7f7f7;
  --black: #000033;
  --gray: #686868;
  --purple: #8b5cff;
  /* Semantic (used only for status feedback) */
  --danger: #d61f3a;
  --success: #0a7d52;
  --warning: #b26a00;

  /* Type */
  --font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-hero: clamp(2.3rem, 1.2rem + 3vw, 4rem);
  --fs-h1: clamp(2rem, 1rem + 2.6vw, 3.2rem);
  --fs-h2: clamp(1.6rem, 1rem + 1.6vw, 2.4rem);
  --fs-h3: clamp(1.15rem, 1rem + 0.5vw, 1.45rem);
  --fs-lead: clamp(1rem, 0.9rem + 0.3vw, 1.2rem);
  --fs-body: 0.95rem;
  --fs-small: 0.875rem;
  --fs-xs: 0.75rem;

  /* Spacing scale */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --s7: 48px; --s8: 64px; --s9: 80px; --s10: 96px;

  /* Shape */
  --r-card: 22px;
  --r-img: clamp(22px, 2.4vw, 36px);
  --r-field: 14px;
  --r-sm: 12px;
  --r-pill: 999px;
  /* EXPERIMENT: outlines off. To restore the outlined look set --bw:2px; --bw-card:3px; --bw-hero:5px and remove the 'no shadows / faint lines' block at the end of layout.css. */
  --bw: 0px;
  --bw-card: 0px;
  --bw-hero: 0px;

  /* Shadows are off. Original brand offset shadows, to restore: btn 3px 4px 0 black; btn-hover 4px 6px 0 black; btn-active 1px 1px 0 black; card 4px 5px 0 black; card-hover 6px 8px 0 black; hero clamp(6px,.7vw,10px) clamp(7px,.8vw,11px) 0 black. */
  --shadow-btn: none;
  --shadow-btn-hover: none;
  --shadow-btn-active: none;
  --shadow-card: none;
  --shadow-card-hover: none;
  --shadow-hero: none;

  /* Layout */
  --container: 1200px;
  --container-narrow: 860px;
  --gutter: clamp(16px, 3vw, 32px);
  --section-y: clamp(36px, 5vw, 72px);

  /* Motion */
  --t-fast: 140ms ease;
  --t-med: 260ms ease;

  /* Focus ring colour (switches to white on blue surfaces) */
  --focus: var(--black);
  --z-header: 50; --z-modal: 100; --z-toast: 200;
}
/* Web: slightly smaller section headings */
@media (min-width: 1025px) { :root { --fs-h2: clamp(1.5rem, 0.95rem + 1.35vw, 2.15rem); } }
/* Breakpoints used in media queries (CSS variables cannot be read there):
   sm 640px · md 820px · lg 1024px · xl 1280px */