/* ---------------------------------------------------------------------------
   The Election Room: theme — "Newsprint Colour" (warm neutral, burnt-orange
   accent, sans serif)

   A colour variant of the "Newsprint" mono theme: the same neutral
   surfaces, IBM Plex Sans type, tight radii and flat shadows, with a
   single restrained accent colour to lift calls to action, the active
   nav, focus rings, progress and links. No party uses orange, so the
   accent never reads as a party colour. Party colours (--p-*) are
   unchanged; the only other colour is a faint warm tint in the surfaces.

   Every colour, font, radius and shadow the app uses is defined here and
   nowhere else. style.css holds layout and components and only reads these
   tokens. To restyle the app, edit this file (or replace it), plus the font
   <link> in index.html if the families change. See docs/THEMING.md.

   Alternatives kept alongside:
   - public/theme-mono.css: the pure black & white Newsprint palette.
   - public/theme-classic.css: blue-grey surfaces, Fraunces + Inter.
   To restore either, copy it over this file (and, for classic, restore
   the Fraunces + Inter <link> in index.html / src/lib/accounts/auth.ts).

   Three palettes:
   1. Light: the app's default.
   2. Dark: the app in dark mode (data-scheme="dark" on <html>, which the
      head script and the theme toggle resolve from the saved choice and the
      device setting) and the TV wall (.wall), which is always dark.
   3. Takeover: always light, even over the wall or a dark phone, so a
      takeover reads as an interruption. It reuses the light palette.

   Contrast: --accent #bc3d0c on white is 5.5:1; white on it is 5.5:1.
   --muted #6e665c on --bg is 5.2:1. Dark accent #ff8a4d takes near-black
   text (--on-accent) at 7.8:1.
   --------------------------------------------------------------------------- */

/* 1. Light -------------------------------------------------------------- */
:root,
.takeover {
  /* Surfaces and text: mono's neutrals, warmed by a fraction so the
     accent sits naturally. Still grey at a glance. */
  --bg: #f7f6f3;
  --surface: #ffffff;
  --surface-2: #f4f1ec;
  --surface-3: #eae6de;
  --line: #e2ddd3;
  --line-strong: #c9c1b2;
  --ink: #16130f;
  --body: #2a2723;
  --muted: #6e665c;
  --empty: #e3ded3;

  /* Signal colours: the accent is a deep burnt orange; status colours
     stay functional and muted to sit with the neutral palette. */
  --accent: #bc3d0c;
  --accent-soft: #fdefe6;
  --ok: #177245;
  --ok-soft: #e8f3ec;
  --warn: #9a6500;
  --warn-soft: #fbf3d9;
  --warn-ink: #7a5200;
  --bad: #b42318;

  /* Party colours (keep in step with the --on-p-* label colours below) */
  --p-NAT: #1d5fcc;
  --p-LAB: #d6293a;
  --p-GRN: #19874a;
  --p-ACT: #d19b00;
  --p-NZF: #2f3844;
  --p-TPM: #a8347f;
  --p-TOP: #0b8d9c;
  --p-other: #8a949f;

  /* Text that sits on a party fill: white on deep fills, near-black on pale */
  --on-p-NAT: #fff;
  --on-p-LAB: #fff;
  --on-p-GRN: #fff;
  --on-p-TPM: #fff;
  --on-p-NZF: #fff;
  --on-p-TOP: #fff;
  --on-p-ACT: #101418;
  --on-p-other: #101418;

  /* Text on the accent (primary buttons, play) and on deep fills (hex map) */
  --on-accent: #fff;
  --on-fill: #fff;
  --on-fill-dark: #101418;
  /* Faint halo that keeps white labels legible on pale fills */
  --label-halo: rgba(0, 0, 0, 0.3);
  --label-shadow: rgb(0 0 0 / 0.25);

  /* Overlays behind dialogs and takeovers */
  --scrim: rgba(22, 19, 15, 0.5);
  --scrim-takeover: rgba(22, 19, 15, 0.5);
  --scrim-takeover-wall: rgba(22, 19, 15, 0.72);

  /* Elevation: flat, neutral-warm */
  --shadow:
    0 1px 2px rgba(22, 19, 15, 0.05), 0 4px 16px -8px rgba(22, 19, 15, 0.08);
  --shadow-lift:
    0 2px 4px rgba(22, 19, 15, 0.06), 0 16px 32px -16px rgba(22, 19, 15, 0.18);
  --shadow-control: 0 1px 2px rgba(22, 19, 15, 0.18);

  /* Map (Mapbox paints these; read by map.js) */
  --map-halo: #ffffff;
  --map-ring: #16130f;
  --map-popup-shadow: rgba(22, 19, 15, 0.16);
  --map-popup-bg: #ffffff;
  --map-popup-ink: #2a2723;

  /* Shape: tighter, more squared, as in the mono palette */
  --r-card: 10px;
  --r: 7px;
  --r-sm: 5px;
  --r-inner: calc(var(--r-card) - 4px);
  --r-inner-sm: calc(var(--r-card) - 7px);

  /* Type: load the families in index.html, name them here.
     One sans family throughout; display type is the same sans, set
     heavier and tighter by style.css. */
  --font:
    "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    sans-serif;
  --font-display:
    "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    sans-serif;

  color-scheme: light;
}

/* 2. Dark (dark mode and the TV wall) ---------------------------------- */
:root[data-scheme="dark"],
.wall {
  --bg: #0d0b09;
  --surface: #15120f;
  --surface-2: #1a1713;
  --surface-3: #231f1a;
  --line: #28231e;
  --line-strong: #453d33;
  --ink: #faf8f4;
  --body: #d7d1c7;
  --muted: #a89d8e;
  --empty: #26211b;

  /* Accent brightens for dark surfaces, so text on it flips to
     near-black (as the party labels do below). */
  --accent: #ff8a4d;
  --accent-soft: #2d1a0e;
  --on-accent: #211105;
  --ok: #3cc47c;
  --ok-soft: #12261a;
  --warn: #e8b13c;
  --warn-soft: #2a2110;
  --warn-ink: #f0bc4a;
  --bad: #f26d64;

  --p-NAT: #4f8ff7;
  --p-LAB: #f25563;
  --p-GRN: #3cc177;
  --p-ACT: #f6c630;
  --p-NZF: #aab4c0;
  --p-TPM: #e068b1;
  --p-TOP: #23c2d3;
  --p-other: #7c8795;

  --on-p-NAT: #101418;
  --on-p-LAB: #101418;
  --on-p-GRN: #101418;
  --on-p-TPM: #101418;
  --on-p-NZF: #101418;
  --on-p-TOP: #101418;

  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-lift: 0 16px 32px -16px rgba(0, 0, 0, 0.7);

  color-scheme: dark;
}

/* 3. Takeover: the light palette above, plus a deeper ACT yellow so it holds
   on white at display sizes. */
.takeover {
  --p-ACT: #b98900;
}