/* The palette every surface shares: the app, the marketing pages (website/, served as /palette.css)
   & the API docs (the backend reads this file in place: routes/system.py). The one place a
   shared color is defined; app-only tokens (heatmap, shimmer, charts) stay in app-root.css. The segment colors are also in
   theme/index.ts for what CSS can't reach (the map): tests/unit/theme_palette.ts keeps them equal.

   --text        titles, figures, anything read first
   --text-muted  body copy: descriptions, summaries, messages
   --text-faint  fine print: hints, captions, axis labels, inactive tabs
   --surface-rgb & --ink-rgb are channels so one rule takes any alpha (`rgb(var(--ink-rgb) / 0.08)`):
   ink is whatever draws on a surface, so a divider darkens the light theme & lightens the dark one.
   --brand       the product's own accent where no market segment is in play (STR's amber) */
:root {
  color-scheme: light;
  --page: #f4f1ec; /* near the basemap's land color, so nothing flashes until it draws */
  --text: #222;
  --text-muted: #555;
  --text-faint: #888;
  --surface-rgb: 255 255 255;
  --ink-rgb: 0 0 0;
  --danger: #b23b3b;
  --segment-str: #d98e04;
  --segment-sfr: #7b5ba7;
  --segment-mls: #c2306f;
  --on-segment: #fff; /* text & glyphs on a segment-colored fill */
  --brand: var(--segment-str);
}

/* `data-theme` is stamped on <html> before first paint (theme.js, theme/mode.ts). Segment colors
   are lifted so each still reads as text & as a fill on a dark surface. */
:root[data-theme='dark'] {
  color-scheme: dark;
  --page: #17191b;
  --text: #ececec;
  --text-muted: #b8b8b8;
  --text-faint: #8e8e8e;
  --surface-rgb: 30 30 32;
  --ink-rgb: 255 255 255;
  --danger: #e67a7a;
  --segment-str: #f2a81d;
  --segment-sfr: #a98bdb;
  --segment-mls: #e57aa8;
  --on-segment: #1a1a1a;
}