@import url('theme-fallback.css');

/* ==========================================================================
   BrewNight · themes — how the app is lit (mode) and what colour it is (palette).
   Loaded right after tokens.css on every page. Like tokens.css, this is a place
   where raw colours may live; nothing else may write one (tests/ui-tokens.test.mjs).

   A theme is two independent choices, both set as attributes on <html> by ui/theme-boot.js:
     data-scheme   light | dark          (the person picks light, dark or "match my device")
     data-palette  workshop | white | blue | black | red | green

   How it fits together
   1. tokens.css is the LIGHT reference theme (the default "workshop" id: quiet paper and slate ink)
      with every base colour written out, for the moment before a palette attribute exists.
      Alpha ladders, glass, shadows and rings are derived from those base colours there,
      so they follow any theme that moves the base colours.
   2. DARK MODE (below) rewrites the base colours for the night. It applies to every palette.
   3. A PALETTE (workshop included) is made of three seeds. Everything that carries its
      character (page, panels, lines, the accent, the primary button, the selection wash) is
      DERIVED from them with color-mix(), once for light and once for dark.
   4. Colours that mean something in the game (mana, seats, status, FX, card plates) are not
      palette colours; only dark mode adjusts the few of them that sit on the page.

   To add a palette: add one block at the bottom (three seeds), its id to PALETTES in
   ui/theme-boot.js, and run `node scripts/theme-fallback.mjs` then `node --test tests/theme-contrast.test.mjs` to check the contrast
   of every palette in both modes and tells you which pair fails.
   To change the dark mode: edit the one block below; tests/ui-tokens.test.mjs fails if a base
   colour from tokens.css is missing from it.
   ========================================================================== */

/* ── 2. Dark mode: the base colours for the night (every palette starts here) ─────────────── */
:root[data-scheme=dark] {
  color-scheme: dark;

  --felt-deep: #0f1218;  --felt: #171b24;  --bg: #12151c;
  --panel: #1b202a;  --panel2: #232a36;  --panel3: #2c3441;
  --line: #323a4a;  --line2: #4a5570;  --line3: #9aa7c0;

  --text: #eef1f7;  --text-hi: #ffffff;  --text2: #cbd2df;  --muted: #abb5c6;  --dim: #a3adbf;
  --on-accent: #1b2330;
  --ink: #1b2330;             /* dark text on the bright fills (action, accent); the same in every mode */
  --edge: #8793ad;            /* outlines: a slate that reads on dark panels                              */
  --shade: #000000;
  --scan-frame: #000;
  --paper-shadow: #0a0c10;

  --gold-dim: #7d8798;  --gold: #cbd2dd;  --gold-hover: #e3e8ef;  --gold2: #d8dee8;
  --green: #6fbf8c;  --green2: #8fd6a8;  --heal: #79c27a;  --warn: #e3b341;  --danger: #f08f8f;  --hit: #f0705a;
  --focus-color: #8ab4ff;
  --seat0: #cbd2dd;  --seat1: #5fc3a1;  --seat2: #e58a68;  --seat3: #6fa8dc;

  --action-bg: #e3dcc8;  --action-hover: #d6cdb4;
}

/* ── 3a. Palettes, light: derived from the three seeds ──────────────────────────────────────
   --p-paper   the page colour in light mode (everything else in light mode is a mix of it)
   --p-accent  the strong colour: links, the selected tab, focus, the price and count chips
   --p-action  the fill of the primary button                                                    */
:root[data-palette] {
  --bg: var(--p-paper);
  --felt: color-mix(in oklab, var(--p-paper) 97%, #000);
  --felt-deep: color-mix(in oklab, var(--p-paper) 94%, #000);
  --panel: color-mix(in oklab, var(--p-paper) 30%, #fff);
  --panel2: color-mix(in oklab, var(--p-paper) 78%, #fff);
  --panel3: color-mix(in oklab, var(--p-accent) 14%, #fff);
  --lilac: var(--panel3);
  --line: color-mix(in oklab, var(--p-paper) 82%, var(--text));
  --line2: color-mix(in oklab, var(--p-paper) 68%, var(--text));
  --edge: color-mix(in oklab, var(--p-paper) 45%, var(--text));   /* control boundaries: 3:1 on --bg and --panel in every palette */
  --line3: var(--text);
  --gold: var(--p-accent);
  --gold-dim: color-mix(in oklab, var(--p-accent) 55%, var(--p-paper));
  --gold-hover: color-mix(in oklab, var(--p-accent) 80%, #000);
  --gold2: color-mix(in oklab, var(--p-accent) 88%, #000);
  --seat0: var(--p-accent);
  --action-bg: var(--p-action);
  --action-hover: color-mix(in oklab, var(--p-action) 93%, #000);
  --paper-shadow: color-mix(in oklab, var(--p-paper) 94%, #000);
}

/* ── 3b. Palettes, dark: the night base tinted by the accent, and the accent lifted to read on it ── */
:root[data-scheme=dark][data-palette] {
  --bg: color-mix(in oklab, #0f1218, var(--p-accent) 9%);
  --felt: color-mix(in oklab, var(--bg), #000 18%);
  --felt-deep: color-mix(in oklab, var(--bg), #000 38%);
  --panel: color-mix(in oklab, var(--bg), #fff 5%);
  --panel2: color-mix(in oklab, var(--bg), #fff 10%);
  --panel3: color-mix(in oklab, var(--bg), var(--p-accent) 34%);
  --lilac: var(--panel3);
  --line: color-mix(in oklab, var(--bg), #fff 17%);
  --line2: color-mix(in oklab, var(--bg), #fff 30%);
  --line3: color-mix(in oklab, var(--bg), #fff 62%);
  --edge: color-mix(in oklab, var(--bg), #fff 50%);
  --gold: color-mix(in oklab, var(--p-accent), #fff 54%);
  --gold-dim: color-mix(in oklab, var(--gold), var(--bg) 48%);
  --gold-hover: color-mix(in oklab, var(--gold), #fff 28%);
  --gold2: color-mix(in oklab, var(--gold), #fff 14%);
  --seat0: var(--gold);
  --paper-shadow: color-mix(in oklab, var(--bg), #000 55%);
}

/* ── The palettes ───────────────────────────────────────────────────────────────────────────
   The same seeds colour the picker's swatches (.swatch[data-palette]), so there is one place to
   look. Default paper and the five single mana colours.                     */
:root[data-palette=workshop], .swatch[data-palette=workshop] { --p-paper: #f6f3ea; --p-accent: #2b3a4a; --p-action: #e3dcc8; }

:root[data-palette=white], .swatch[data-palette=white]       { --p-paper: #fbf3dc; --p-accent: #72550c; --p-action: #f6e7a9; }
:root[data-palette=blue],  .swatch[data-palette=blue]        { --p-paper: #e3eefb; --p-accent: #1f5f9e; --p-action: #a9d2f2; }
:root[data-palette=black], .swatch[data-palette=black]       { --p-paper: #ebe6f0; --p-accent: #5b3f78; --p-action: #c7b6dc; }
:root[data-palette=red],   .swatch[data-palette=red]         { --p-paper: #ffe6d9; --p-accent: #a52e19; --p-action: #ffc2a0; }
:root[data-palette=green], .swatch[data-palette=green]       { --p-paper: #e6f2dc; --p-accent: #2f6b3a; --p-action: #c1e3a5; }