/* ==========================================================================
   DESIGN TOKENS — change the whole look of the site from this one file.
   Every color, font, size and spacing value used elsewhere comes from here.
   ========================================================================== */

:root {
  /* --- Brand colors --- */
  --color-primary: #1d4ed8;        /* buttons, links, accents */
  --color-primary-dark: #1e3a8a;   /* hover states, header */
  --color-accent: #0f766e;         /* secondary highlights, tags */
  --color-highlight: #fbbf24;      /* small pops of color (focus ring, badges) */
  --color-donate: #c53d3d;         /* Donate now button (soft red; white text stays readable) */
  --color-donate-hover: #a83232;

  /* --- Page areas (each color scheme in schemes.css overrides these) --- */
  --header-bg: #172554;            /* sticky top bar: deeper than the hero */
  --header-text: #ffffff;
  --hero-bg-start: #1e3a8a;        /* top section gradient */
  --hero-bg-end: #1d4ed8;
  --hero-text: #ffffff;
  --cta-bg-start: #c53d3d;         /* "split your donation" box: the Donate red (teal was #005977 → #257885) */
  --cta-bg-end: #a83232;
  --cta-edge: #7a2222;            /* darker red "edge" that gives the button depth */
  --cta-text: #ffffff;
  --candidates-bg: #ffffff;        /* behind the candidate cards */
  --map-section-bg: var(--color-bg);
  --footer-bg: #0f172a;
  --footer-text: #f8fafc;

  /* --- Neutrals --- */
  --color-bg: #f8fafc;             /* page background */
  --color-surface: #ffffff;        /* cards, panels */
  --color-text: #0f172a;           /* body text */
  --color-text-muted: #475569;     /* secondary text */
  --color-border: #cbd5e1;
  --color-on-primary: #ffffff;     /* text on top of primary color */

  /* --- District map --- */
  --map-fill: #dbe3ec;             /* districts without candidates */
  --map-featured: #93c5fd;         /* districts with candidates (clickable) */
  --map-flash: #60a5fa;            /* the periodic flash (slightly darker than --map-featured) */
  --map-hover: var(--color-primary);         /* any district on hover */
  --map-selected: var(--color-primary-dark); /* the clicked district */
  --map-border: #ffffff;
  --map-max-width: 48rem;          /* the map never grows wider than this */

  /* --- Typography --- */
  /* Josefin Sans (css/fonts.css); the system fonts after it are fallbacks */
  --font-body: "Josefin Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-heading: var(--font-body);
  --font-size-base: 1.125rem;      /* 18px — comfortable reading size */
  --line-height: 1.6;
  --font-size-h1: clamp(2rem, 5vw, 3.25rem);
  --font-size-h2: clamp(1.5rem, 3.5vw, 2.25rem);
  --font-size-h3: 1.25rem;

  /* --- Layout & spacing --- */
  --max-width: 72rem;
  --hero-width: 90%;               /* how much of the window the top text spans */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 3rem;
  --space-xl: 5rem;
  --radius: 0.5rem;
  --shadow: 0 1px 3px rgb(15 23 42 / 0.12), 0 4px 12px rgb(15 23 42 / 0.06);
}