/* Voyager brand palette for the agency map.
 *
 * Values come from voyager-design-system `tokens.json`, dark surface
 * (`semantic.dark`). The variable NAMES are deliberately unchanged from the
 * palette the maps were built on: this is a color swap, not a design-system
 * adoption. Layout, spacing, type scale and component CSS stay where they are,
 * in each page.
 *
 * `--amber` is the one that looks odd and is correct. It was the accent hook in
 * every page (headings, arrows, stat numbers, rules), so it keeps its name and
 * now carries the Voyager signal magenta. Renaming it would have meant touching
 * every rule in every file, which is exactly the risk this approach avoids.
 *
 * To restyle: change a value here, not in a page. One file owns the palette.
 */

:root {
  /* Surfaces. semantic.dark.bg, walking down the indigo ramp. */
  --bg: #08071A;           /* indigo.950  canvas */
  --bg-grid: #0E0C24;      /* indigo.900  background grid rule */
  --panel: #0E0C24;        /* indigo.900  panel */
  --panel-hi: #15122F;     /* indigo.800  raised / hover */
  --panel-active: #1C183B; /* indigo.700  active / inset */

  /* Borders. semantic.dark.border */
  --border: #272248;       /* indigo.600  border.hair */
  --border-hi: #342D5A;    /* indigo.500  border.1 */

  /* Text. semantic.dark.fg */
  --text: #F4F2FA;         /* bone.50   fg.1 */
  --text-soft: #938EAE;    /* bone.300  fg.4 */
  --text-dim: #625E7C;     /* bone.400  fg.5 */

  /* Accents. Same names, brand values. */
  --amber: #E6317A;        /* magenta.400  accent.bright, the Voyager signal */
  --mint: #5CD4F6;         /* cyan.300     link.hover */
  --blue: #22B8F0;         /* cyan.400     link.base */
  --violet: #A37BFF;       /* violet.300 */
  --green: #2BC678;        /* green.500    success */
  --rose: #FF4D6D;         /* red.500      critical */
  --rust: #F59E24;         /* amber.500    warn */
}