/* Refuge brand tokens. Shared by the site shell AND every standalone chart page:
 *   <link rel="stylesheet" href="/brand.css">
 * Change a value here and the whole site + all charts follow. Source: Refuge brand board.
 * The in-game risk-map colors are NOT here on purpose (they live in the 3D scene). */
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* palette */
  --cream: #EEE4D7;
  --coral: #FF4944;
  --navy: #232E43;
  --violet: #5248D7;
  --indigo: #2D2DCA;
  --blue: #086AED;
  --cyan: #84F9FE;

  /* roles: use these in components rather than raw palette names */
  --bg: var(--navy);
  --bg-deep: #1a2233;
  --panel: #1d2638;
  --fg: var(--cream);
  --fg-muted: rgba(238, 228, 215, 0.68);
  --border: rgba(238, 228, 215, 0.18);
  --accent: var(--cyan);
  --alert: var(--coral);
  --link: var(--cyan);
  --hero-bg: var(--navy);

  /* chart marks on navy. Checked with the dataviz palette validator (dark, surface #232E43):
     lightness band, colorblind separation and 3:1 contrast all pass for this pair.
     The raw --cyan is too bright for marks; keep it for text and highlights. */
  --chart-model: #2F86F5;   /* what a model predicts */
  --chart-actual: var(--coral);  /* what really happened */
  /* building classes, in this order (validated as a set, same surface) */
  --class-mh: var(--coral);   /* mobile home */
  --class-house: #2F86F5;     /* house or apartment */
  --class-public: #C8588A;    /* school, church, business */
  --chart-grid: rgba(238, 228, 215, 0.10);
  --chart-axis: rgba(238, 228, 215, 0.55);

  /* type */
  --font-display: 'Chakra Petch', system-ui, sans-serif;
  --font-body: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --radius: 6px;
  color-scheme: dark;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
}

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.01em; }
a { color: var(--link); }

/* Panel style from the brand board: navy with a thin light border. */
.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.card .label { font-family: var(--font-display); font-size: 13px; color: var(--fg-muted); }