/* theme.css -- the themes, and nothing else.
 *
 * This file is the configuration: every value that differs between one look and
 * another lives here, so a theme can be added, edited or made the default without
 * touching style.css, home.css or any JavaScript. style.css is structure --
 * sizes, spacing, layout, which element is a card -- and reads these tokens.
 *
 * Two themes ship:
 *
 *   summer   a field at dusk, photographed: dark green, poster red, gold, hand
 *            lettering over a real photograph. The default.
 *   lab      the earlier instrument look: near-black blue, violet flag, a serif
 *            display face, no photograph. Kept because the choice between the
 *            two is not settled -- see DESIGN.md.
 *
 * THE DEFAULT IS THE BLOCK THE BARE `:root` SELECTOR IS ATTACHED TO. To change
 * it, move `:root, ` from one block to the other and move the matching entry to
 * the head of `THEMES` in src/themes.js -- a test checks that those two agree.
 * A stored choice wins over the default by setting `data-theme` on <html>;
 * src/themes.js is what writes it.
 *
 * Monospace is for game data -- gate names, coordinates, probabilities, the board
 * -- where the columns mean something, so --font-mono is a real choice and not a
 * fallback. Prose set in mono is harder to read and a whole interface in it reads
 * as a terminal rather than as a game; both themes keep that split.
 *
 * A theme changes no type at all. The two sets of faces were almost the same set
 * -- Inter against Public Sans is a difference nobody can name -- and every theme's
 * faces are fetched whichever theme is in force, because the switch happens in the
 * browser: a second body sans was a webfont the page always paid for and never
 * showed. One of the five, --font-badge, was set by both themes and read by no
 * rule at all. So the type is declared once, below the palettes, standardised on
 * what summer asked for, and a theme is a palette.
 *
 * Adding a theme: copy a block, change the values, add it to `THEMES`. Every
 * block must declare every token -- a missing one silently inherits from the
 * default and the theme is then only mostly itself, so a test requires every
 * block to declare the same token names.
 */

/* --- summer: the field at dusk (default) --------------------------------- */
:root, :root[data-theme="summer"]{
  --bg:#122B12; --panel:#173219; --panel-2:#1D3B20; --ink:#EFF5E4; --muted:#C3D6B8;
  --line:#3B4E2E; --line-soft:#28381F; --line-strong:#C9A227; --line-strong-soft:#332B12;
  --t0:#E2503A; --t1:#FFFFFF;
  --flag:#E2503A;
  --conj:#C9A227; --rough:#D9B841; --wall:#0E1F10; --gate:#A6E3B0;
  /* Slow ground: the same field, just paler. */
  --rough-fill:color-mix(in srgb, var(--panel-2), white 14%);
  --good:#4FD18B;
  /* Text on a --flag ground. Red takes dark text, not white: white on #E2503A is
     4:1 and the button label is the one word on the page you must not misread. */
  --on-flag:#152012;
  /* The board's own frame, behind the hexes. It is the wall colour here, so the
     map reads as ground cut out of the dark rather than as a panel. */
  --board-bg:#0E1F10;
  --ax-x:#E08A63; --ax-y:#63C48C; --ax-z:#7FA6E8;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.35);
  /* Signage: a hard offset edge, as if screen-printed, not a soft halo. */
  --shadow-strong:0 3px 0 rgba(0,0,0,.4), 0 16px 30px rgba(0,0,0,.45);
  /* The photograph behind the page, and the tint that keeps text on it legible:
     strong behind the header, softer below where the cards are opaque anyway. */
  --page-photo:url("bg-large.jpg");
  --scrim-strong:color-mix(in srgb, #0E2210 85%, transparent);
  --scrim-soft:color-mix(in srgb, #0E2210 48%, transparent);
  color-scheme:dark;
}

/* --- lab: the instrument ------------------------------------------------- */
:root[data-theme="lab"]{
  --bg:#0C1017; --panel:#141A23; --panel-2:#1A212C; --ink:#E4E9F0; --muted:#8B95A6;
  --line:#242D3A; --line-soft:#1E2631; --line-strong:#9C8FFF; --line-strong-soft:#2E2A57;
  --t0:#48CFE0; --t1:#F2954F;
  --flag:#9C8FFF;
  --conj:#A487F5; --rough:#D9B841; --wall:#39424F; --gate:#4FD18B;
  /* A gold wash, as it always was here: paling panel-2 instead would land on
     this theme's own --wall and make slow ground look impassable. */
  --rough-fill:color-mix(in srgb, var(--rough) 34%, var(--panel-2));
  --good:#4FD18B;
  --on-flag:#12101F;
  --board-bg:#141A23;
  --ax-x:#E08A63; --ax-y:#63C48C; --ax-z:#7FA6E8;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.35);
  /* Laboratory, not arcade: one flat elevation step, the same one, everywhere. */
  --shadow-strong:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.35);
  --page-photo:none;
  --scrim-strong:transparent; --scrim-soft:transparent;
  color-scheme:dark;
}

/* --- type: one set of faces, whichever theme is in force -----------------
   A theme is a palette. It was briefly a palette and a typeface, and the two
   sets were almost the same set: Inter against Public Sans is a difference
   nobody can name, and every theme's faces are fetched whichever one is in
   force, so the second sans was a webfont the page always paid for and never
   showed. Standardised on what summer asked for. */
:root{
  --font-display:"Outfit",system-ui,sans-serif;
  --font-text:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --font-hand:"Homemade Apple",cursive;
}