/* assets/games/state-themes.css — v1.3
 * ============================================================================
 * Per-state theme variables for the Earn-Points crossword framework.
 *
 * Applied via `<body class="state-{slug}">` on standalone game pages. Pulls
 * representative state-flag / state-branding colors so MD looks "Maryland",
 * VA looks "Virginia", etc. without per-page CSS. Variables consumed by
 * assets/games/crossword.css.
 *
 * Color choices: approximations of state-flag heritage palettes. No
 * canonical STATE_COLORS map exists in the repo as of 2026-06-09; the
 * /transcript color helpers in transcript-config.js are different
 * concept-tag colors (not state-brand). When a canonical state-brand
 * palette lands, these values should be folded into it.
 * ==========================================================================*/


/* Shared text tokens (2026-10-04). Text on a pastel highlight (a selected clue, a word's cells, a hint flash) is
 * always dark: the highlights stay pastel in both themes, and in dark mode that text used to inherit the near-white
 * page text (1.13:1). Fallbacks for a page with no state class. */
body {
  --xword-on-highlight: #111827;
  --xword-on-highlight-muted: #4b5563;
  --xword-primary-text: var(--xword-primary);
  --xword-accent-text: var(--xword-accent);
  --xword-on-accent: #ffffff;
  --xword-danger: #b91c1c; /* the Super Hint button's text and border */
}
@media (prefers-color-scheme: dark) {
  body { --xword-danger: #f87171; } /* #b91c1c was 2.68:1 on the dark page; this is 6.4:1 */
}

/* Maryland — black-and-gold + red-and-white quadrants (state flag). */
body.state-md {
  --xword-primary: #c8102e;
  --xword-accent: #ffd700;
  --xword-bg-tint: #fff8e7;
  --xword-border: #c8102e;
  --xword-cell-in-word: #fff3c0;
  --xword-cell-active: #ffd700;
  /* text-safe (2026-10-04): state colour as TEXT, accent as TEXT, and text ON the accent; each >= 4.5:1 */
  --xword-primary-text: #c8102e;
  --xword-accent-text: #857000;
  --xword-on-accent: #111827;
}

/* DC — Title 47 Stars-and-Bars red on white. */
body.state-dc {
  --xword-primary: #c8102e;
  --xword-accent: #002868;
  --xword-bg-tint: #fef2f2;
  --xword-border: #c8102e;
  --xword-cell-in-word: #fde7e7;
  --xword-cell-active: #ffd5d5;
  /* text-safe (2026-10-04): state colour as TEXT, accent as TEXT, and text ON the accent; each >= 4.5:1 */
  --xword-primary-text: #c8102e;
  --xword-accent-text: #002868;
  --xword-on-accent: #ffffff;
}

/* Virginia — Commonwealth navy + sunset orange accent. */
body.state-va {
  --xword-primary: #002868;
  --xword-accent: #ff6b35;
  --xword-bg-tint: #f0f4f8;
  --xword-border: #002868;
  --xword-cell-in-word: #e0eaf6;
  --xword-cell-active: #ffd5b8;
  /* text-safe (2026-10-04): state colour as TEXT, accent as TEXT, and text ON the accent; each >= 4.5:1 */
  --xword-primary-text: #002868;
  --xword-accent-text: #cb3600;
  --xword-on-accent: #111827;
}

/* New Jersey — Garden State buff + Continental Army navy. */
body.state-nj {
  --xword-primary: #002878;
  --xword-accent: #f3d3aa;
  --xword-bg-tint: #faf6ef;
  --xword-border: #002878;
  --xword-cell-in-word: #f6ecdb;
  --xword-cell-active: #f3d3aa;
  /* text-safe (2026-10-04): state colour as TEXT, accent as TEXT, and text ON the accent; each >= 4.5:1 */
  --xword-primary-text: #002878;
  --xword-accent-text: #9c6116;
  --xword-on-accent: #111827;
}

/* New York — Empire State blue + orange (NY Knicks heritage). */
body.state-ny {
  --xword-primary: #002878;
  --xword-accent: #ff6b35;
  --xword-bg-tint: #f0f4ff;
  --xword-border: #002878;
  --xword-cell-in-word: #e0e8ff;
  --xword-cell-active: #ffd5b8;
  /* text-safe (2026-10-04): state colour as TEXT, accent as TEXT, and text ON the accent; each >= 4.5:1 */
  --xword-primary-text: #002878;
  --xword-accent-text: #cb3600;
  --xword-on-accent: #111827;
}

/* Pennsylvania — Keystone blue + gold. */
body.state-pa {
  --xword-primary: #003087;
  --xword-accent: #fdb813;
  --xword-bg-tint: #f0f4ff;
  --xword-border: #003087;
  --xword-cell-in-word: #e0e8ff;
  --xword-cell-active: #ffe6a3;
  /* text-safe (2026-10-04): state colour as TEXT, accent as TEXT, and text ON the accent; each >= 4.5:1 */
  --xword-primary-text: #003087;
  --xword-accent-text: #8f6501;
  --xword-on-accent: #111827;
}

/* North Carolina — Old North State blue. */
body.state-nc {
  --xword-primary: #13294b;
  --xword-accent: #ce1126;
  --xword-bg-tint: #eef2f7;
  --xword-border: #13294b;
  --xword-cell-in-word: #dbe2ed;
  --xword-cell-active: #f8d4d8;
  /* text-safe (2026-10-04): state colour as TEXT, accent as TEXT, and text ON the accent; each >= 4.5:1 */
  --xword-primary-text: #13294b;
  --xword-accent-text: #ce1126;
  --xword-on-accent: #ffffff;
}

/* South Carolina — Indigo and crescent moon. */
body.state-sc {
  --xword-primary: #001f54;
  --xword-accent: #f6f0d6;
  --xword-bg-tint: #eef0f6;
  --xword-border: #001f54;
  --xword-cell-in-word: #dbe0ee;
  --xword-cell-active: #f6f0d6;
  /* text-safe (2026-10-04): state colour as TEXT, accent as TEXT, and text ON the accent; each >= 4.5:1 */
  --xword-primary-text: #001f54;
  --xword-accent-text: #7c6a1b;
  --xword-on-accent: #111827;
}

/* Facility & Camp — neutral evergreen. */
body.state-facility {
  --xword-primary: #2d6a4f;
  --xword-accent: #b08968;
  --xword-bg-tint: #f1f7f3;
  --xword-border: #2d6a4f;
  --xword-cell-in-word: #d9ebde;
  --xword-cell-active: #e7d4bf;
  /* text-safe (2026-10-04): state colour as TEXT, accent as TEXT, and text ON the accent; each >= 4.5:1 */
  --xword-primary-text: #2d6a4f;
  --xword-accent-text: #8c6849;
  --xword-on-accent: #111827;
}

/* Base / GC Prep Multi-State (MSB) — GC Prep house palette: charcoal + gold.
   Not a state flag — the cross-state product wears the brand colors. */
body.state-base {
  --xword-primary: #1a1814;
  --xword-accent: #c49a27;
  --xword-bg-tint: #fbf7ec;
  --xword-border: #1a1814;
  --xword-cell-in-word: #f3e9c8;
  --xword-cell-active: #e9cf7a;
  /* text-safe (2026-10-04): state colour as TEXT, accent as TEXT, and text ON the accent; each >= 4.5:1 */
  --xword-primary-text: #1a1814;
  --xword-accent-text: #896c1b;
  --xword-on-accent: #111827;
}

/* OSHA 30 (2026-10-04) — had no block, so it fell back to crossword.css's :root and was missed by every
 * per-state rule below, dark mode included. Same colours it already showed; now themed like its siblings. */
body.state-osha30 {
  --xword-primary: #1f2937;
  --xword-accent: #2563eb;
  --xword-bg-tint: #f9fafb;
  --xword-border: #1f2937;
  --xword-cell-in-word: #e0eaf6;
  --xword-cell-active: #fde68a;
  /* text-safe (2026-10-04): state colour as TEXT, accent as TEXT, and text ON the accent; each >= 4.5:1 */
  --xword-primary-text: #1f2937;
  --xword-accent-text: #2563eb;
  --xword-on-accent: #ffffff;
}


/* Dark mode (2026-08-21) — background only. Every --xword-bg-tint value
 * above is a pastel TINT of the state's brand color, built for a white
 * page; those tints stop working the moment the page goes dark (a cream or
 * pale-blue wash reads as "broken", not "themed"), so this swaps every
 * state to the SAME neutral dark surface used by matching.css's --mg-bg,
 * for parity across all three Earn-Points games. --xword-primary /
 * --xword-accent / --xword-border / --xword-cell-* are deliberately left
 * alone here — those are the actual brand identity (a saturated hue, not a
 * pastel tint) and already read fine on a dark ground.
 * This block must live HERE, not in crossword.css/wordfinder.css's own
 * :root — body.state-{slug} outranks a bare :root rule by specificity, so
 * a dark override placed in the page stylesheet would never win once a
 * page carries a state class (which every real game page does). See
 * docs/security/game-pages-dark-mode-gap-2026-08-21.md. */
@media (prefers-color-scheme: dark) {
  body.state-md,
  body.state-dc,
  body.state-va,
  body.state-nj,
  body.state-ny,
  body.state-pa,
  body.state-nc,
  body.state-sc,
  body.state-facility,
  body.state-base,
  body.state-osha30 {
    --xword-bg-tint: #0c1117;
  }
}

/* Dark mode, text (2026-10-04, Matthew: the VA crossword's clue was "white background on white text").
 * The block above only darkens the page. Each state's own colour, used as TEXT, stays a dark brand hue there
 * (VA navy on near-black was 1.36:1), so it gets a lighter shade of the same hue for text, computed to reach
 * 4.5:1 on both #0c1117 and #141b24. Backgrounds and borders keep the brand colour. */
@media (prefers-color-scheme: dark) {
  body.state-md { --xword-primary-text: #f0405d; --xword-accent-text: #ffd700; }
  body.state-dc { --xword-primary-text: #f0405d; --xword-accent-text: #3080ff; }
  body.state-va { --xword-primary-text: #3080ff; --xword-accent-text: #ff6b35; }
  body.state-nj { --xword-primary-text: #4080ff; --xword-accent-text: #f3d3aa; }
  body.state-ny { --xword-primary-text: #4080ff; --xword-accent-text: #ff6b35; }
  body.state-pa { --xword-primary-text: #387fff; --xword-accent-text: #fdb813; }
  body.state-nc { --xword-primary-text: #5285d3; --xword-accent-text: #ef4356; }
  body.state-sc { --xword-primary-text: #3781ff; --xword-accent-text: #f6f0d6; }
  body.state-facility { --xword-primary-text: #3f956f; --xword-accent-text: #b08968; }
  body.state-base { --xword-primary-text: #8d836d; --xword-accent-text: #c49a27; }
  body.state-osha30 { --xword-primary-text: #6d87ac; --xword-accent-text: #4c7fef; }
}