/* games-web/palette.css — the app's colours, in one place.
 *
 * ============================================================================
 *  CHANGE THE THEME BY EDITING THE TWO LINES MARKED "BRAND". NOTHING ELSE.
 * ============================================================================
 *
 * Every other colour below is derived from those two with color-mix, so the whole
 * application re-themes from a single pair of hex values.
 *
 * WHY THIS FILE EXISTS
 * The palette used to be copy-pasted into twenty-two stylesheets, each with its own
 * `:root` block. Re-theming meant editing all of them and missing some — which is exactly
 * what happened: the Friends page stayed on the previous palette for a whole release
 * because it had its own copy. Those blocks are gone; this is the only place chrome
 * colours are declared, so load order no longer decides who wins.
 *
 * WHAT IS *NOT* HERE, ON PURPOSE
 * Board surfaces, playing-piece colours and player-seat colours stay in each game's own
 * stylesheet. They carry meaning — Ludo's four seats have to stay four distinguishable
 * colours, a chess board has to read as light and dark squares — and theming them would
 * break the game, not restyle it.
 *
 * EVERY PAGE MUST LINK THIS FIRST, before its own stylesheet.
 */

:root {
  /* ---- BRAND ------------------------------------------------------------- */
  --brand: #5e3122;      /* deep base: grounds, panels, borders  */
  --brand-tint: #f9d2ba; /* light: text, accents, primary action */
  /* ------------------------------------------------------------------------ */

  /* Literal fallbacks come first so a browser without color-mix still gets the right
     theme; the color-mix line after each one wins wherever it is supported. Only the
     fallbacks need touching if you ever change the brand on a very old WebView. */
  --bg: #2a160f;
  --bg: color-mix(in srgb, var(--brand) 45%, #000);
  --bg-2: #1c0f0a;
  --bg-2: color-mix(in srgb, var(--brand) 30%, #000);

  --panel: #3a1e15;
  --panel: color-mix(in srgb, var(--brand) 62%, #000);
  --panel-2: #2f1911;
  --panel-2: color-mix(in srgb, var(--brand) 50%, #000);
  --panel-3: #49261b;
  --panel-3: color-mix(in srgb, var(--brand) 78%, #000);

  --line: #5e3122;
  --line: var(--brand);
  --line-2: #805443;
  --line-2: color-mix(in srgb, var(--brand) 78%, var(--brand-tint));
  /* Named for the era when the accent was gold. Kept because ~20 stylesheets reference
     it; renaming would be a rename for its own sake, not a theme change. */
  --line-gold: #6d3b29;
  --line-gold: color-mix(in srgb, var(--brand) 88%, var(--brand-tint));

  /* The accent — primary buttons, active states, links. */
  --gold: #f9d2ba;
  --gold: var(--brand-tint);
  --gold-2: #fbdfcf;
  --gold-2: color-mix(in srgb, var(--brand-tint) 70%, #fff);
  --gold-deep: #be9580;
  --gold-deep: color-mix(in srgb, var(--brand-tint) 62%, var(--brand));
  /* Text that sits ON the accent (a button label). Dark, or it disappears. */
  --on-accent: #24120c;
  --on-accent: color-mix(in srgb, var(--brand) 40%, #000);

  --text: #f9d2ba;
  --text: var(--brand-tint);
  --muted: #c49b86;
  --muted: color-mix(in srgb, var(--brand-tint) 66%, var(--brand));
  --muted-2: #9f7562;
  --muted-2: color-mix(in srgb, var(--brand-tint) 42%, var(--brand));

  /* Semantic colours are deliberately NOT derived from the brand: "you won" and "that
     failed" have to stay green and red whatever the theme is, or they stop being signals. */
  --emerald: #10b981;
  --on: #4ade80;
  --danger: #e5484d;
}