/* Palette "paper": ink + paper with one cobalt accent. The main palette (config.json "palette").

   Every colour on the site lives in a palette file. A palette sets the same roles for three tones:
     :root, .tone-base   the page itself: paper background, white cards, dark ink text
     .tone-soft          a tinted band, to set one section apart
     .tone-strong        the dark band: header, footer, heroes, the contact band
   site.css and the pages only ever write var(--role), so a section in a tone gets that tone's colours
   for everything inside it (cards, buttons, tables, forms) with no extra rules.

   Roles (all required in every tone; build.js stops if one is missing or a text colour is hard to read):
     --bg            section background            --surface      cards, tables, the form card
     --surface-2     inside a card, table heads    --field        input background
     --line          hairlines                      --line-strong  borders that must be seen (inputs, ghost button)
     --text          headings and body text         --text-2       secondary text, still readable (4.5:1 or more)
     --accent        buttons, markers, focus        --accent-hover button hover
     --accent-text   accent used as text or links   --accent-soft  highlighted rows and boxes
     --on-accent     text and icons on the accent
     --ok --warn --crit   status colours used as text on this tone
     --shadow        drop-shadow colour             --grid         the faint grid behind heroes
   Plus once, in :root: --meta-theme, the browser bar colour (layout.html <meta name="theme-color">). */

:root, .tone-base {
  --meta-theme: #0a0e14;

  --bg: #f5f4ef;
  --surface: #ffffff;
  --surface-2: #faf9f6;
  --field: #fbfaf7;
  --line: #dcd9cf;
  --line-strong: #c4c0b4;
  --text: #0d1117;
  --text-2: #2c333d;
  --accent: #2448ff;
  --accent-hover: #1a36cc;
  --accent-text: #1a36cc;
  --accent-soft: #e6eaff;
  --on-accent: #ffffff;
  --ok: #0b7a52;
  --warn: #a34c06;
  --crit: #b8232b;
  --shadow: rgba(10, 14, 20, 0.18);
  --grid: rgba(36, 72, 255, 0.06);
}

.tone-soft {
  --bg: #ecebe4;
  --surface: #ffffff;
  --surface-2: #f5f4ef;
  --field: #fbfaf7;
  --line: #d6d3c8;
  --line-strong: #bdb9ac;
  --text: #0d1117;
  --text-2: #2c333d;
  --accent: #2448ff;
  --accent-hover: #1a36cc;
  --accent-text: #1a36cc;
  --accent-soft: #e6eaff;
  --on-accent: #ffffff;
  --ok: #0b7a52;
  --warn: #a34c06;
  --crit: #b8232b;
  --shadow: rgba(10, 14, 20, 0.18);
  --grid: rgba(36, 72, 255, 0.06);
}

.tone-strong {
  --bg: #0a0e14;
  --surface: #111823;
  --surface-2: #1a2330;
  --field: #0f151e;
  --line: #253042;
  --line-strong: #3a475b;
  --text: #eef1f5;
  --text-2: #aab4c2;
  --accent: #2448ff;
  --accent-hover: #3a5bff;
  --accent-text: #8197ff;
  --accent-soft: #16244d;
  --on-accent: #ffffff;
  --ok: #4fd1a0;
  --warn: #f0a050;
  --crit: #ff7b80;
  --shadow: rgba(0, 0, 0, 0.7);
  --grid: rgba(129, 151, 255, 0.07);
}