/* Five looks. Each sets its own surfaces, ink, accent and type; the role
   colours are re-stepped per theme and validated against that theme's own
   card surface for contrast and colour-blind separation.
   Light themes use a darker Outsider green (#12885d) so it clears the 3:1
   contrast floor that the standard step misses on pale paper. */

/* ---------- 1. Midnight (default) ---------------------------------------- */
/* Lives in style.css :root — nothing to override. */

/* ---------- 2. Grimoire --------------------------------------------------- */
/* Old paper and iron-gall ink. Serif throughout, soft edges. */
:root[data-theme="grimoire"] {
  --surface-0: #e8dcc0;
  --surface-1: #fbf6e9;
  --surface-2: #f2e9d4;
  --surface-3: #e6d9bb;
  --border:    #cbb68f;
  --ink:       #2b2012;
  --ink-2:     #5c4a30;
  --ink-3:     #7d6944;
  --accent:    #8c2f1d;
  --on-accent: #fdf6e6;

  --townsfolk: #2a78d6;
  --outsider:  #12885d;
  --minion:    #4a3aa7;
  --demon:     #b03530;

  --good: #2a78d6; --evil: #b03530; --win: #12885d; --loss: #7d6944;

  --font: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-head: var(--font);
  --radius: 14px;
  --chip-radius: 6px;
  --page-bg:
    radial-gradient(ellipse at 12% 0%, #f0e6cc 0%, transparent 55%),
    radial-gradient(ellipse at 88% 100%, #e3d5b2 0%, transparent 55%),
    #e8dcc0;
}
:root[data-theme="grimoire"] .topbar { background: #f6efdc; }
:root[data-theme="grimoire"] .card,
:root[data-theme="grimoire"] .game,
:root[data-theme="grimoire"] .tile { box-shadow: 0 1px 0 #fffdf5 inset, 0 2px 6px rgba(80,60,25,.10); }
:root[data-theme="grimoire"] h1, :root[data-theme="grimoire"] .centre .logo { font-weight: 600; }
:root[data-theme="grimoire"] .flash.success { background: #e4efe2; border-color: #7fa77a; color: #2f5c2c; }
:root[data-theme="grimoire"] .flash.error   { background: #f6e3de; border-color: #b57b6d; color: #7a2b1b; }
:root[data-theme="grimoire"] .badge.won  { background: #e4efe2; color: #2f5c2c; border-color: #7fa77a; }
:root[data-theme="grimoire"] .seg.result input:checked + label.win  { background: #e4efe2; border-color: #12885d; color: #2f5c2c; }
:root[data-theme="grimoire"] .seg.result input:checked + label.loss { background: #f6e3de; border-color: #b03530; color: #7a2b1b; }
:root[data-theme="grimoire"] .switch input:checked + .track { background: #e8d2ab; }

/* ---------- 3. Stained Glass ---------------------------------------------- */
/* Deep chapel indigo, lead-came borders, gold leaf. */
:root[data-theme="stained"] {
  --surface-0: #120f26;
  --surface-1: #1e1a3c;
  --surface-2: #272250;
  --surface-3: #332c64;
  --border:    #453c7e;
  --ink:       #f4f1ff;
  --ink-2:     #c2baf0;
  --ink-3:     #8e86bd;
  --accent:    #e0b53c;
  --on-accent: #241a03;

  --townsfolk: #3987e5;
  --outsider:  #199e70;
  --minion:    #9085e9;
  --demon:     #e66767;

  --good: #3987e5; --evil: #e66767; --win: #199e70; --loss: #8e86bd;

  --radius: 6px;
  --chip-radius: 4px;
  --font-head: "Optima", "Avenir Next", Futura, var(--font);
  --head-spacing: .6px;
  --page-bg:
    radial-gradient(ellipse at 50% -10%, #2b2358 0%, transparent 60%),
    radial-gradient(ellipse at 0% 100%, #1a1540 0%, transparent 50%),
    #120f26;
}
:root[data-theme="stained"] .topbar { background: #1a1638; border-bottom-color: #4b4088; }
:root[data-theme="stained"] .card,
:root[data-theme="stained"] .game,
:root[data-theme="stained"] .tile { border-width: 2px; }
:root[data-theme="stained"] .bar-track { border-width: 2px; background: #171338; }
:root[data-theme="stained"] .bar-fill { border-radius: 3px; }
:root[data-theme="stained"] nav.tabs a[aria-current="page"] { box-shadow: 0 0 0 1px var(--accent) inset; }
:root[data-theme="stained"] .tile .value { color: var(--accent); }
:root[data-theme="stained"] .chart-svg .series { stroke-width: 3; }

/* ---------- 4. Blood Moon -------------------------------------------------- */
/* Near-black, one crimson accent, hard edges and shouty headings. */
:root[data-theme="bloodmoon"] {
  --surface-0: #0c0a0b;
  --surface-1: #171314;
  --surface-2: #211a1c;
  --surface-3: #2d2326;
  --border:    #3e3033;
  --ink:       #f7f2f3;
  --ink-2:     #c4b3b6;
  --ink-3:     #8b7a7d;
  --accent:    #d1495b;
  --on-accent: #ffffff;

  --townsfolk: #3987e5;
  --outsider:  #199e70;
  --minion:    #9085e9;
  --demon:     #e66767;

  --good: #3987e5; --evil: #e66767; --win: #199e70; --loss: #8b7a7d;

  --radius: 3px;
  --chip-radius: 3px;
  --font-head: "Helvetica Neue", Inter, var(--font);
  --head-transform: uppercase;
  --head-spacing: 1.4px;
  --page-bg:
    radial-gradient(circle at 50% -5%, #2a1418 0%, transparent 45%),
    #0c0a0b;
}
:root[data-theme="bloodmoon"] h1 { font-size: 20px; font-weight: 800; }
:root[data-theme="bloodmoon"] h2 { font-size: 13px; font-weight: 800; }
:root[data-theme="bloodmoon"] .tile .value { font-family: var(--font-head); }
:root[data-theme="bloodmoon"] .bar-track { border-radius: 2px; }
:root[data-theme="bloodmoon"] .bar-fill { border-radius: 2px; }
:root[data-theme="bloodmoon"] nav.tabs a { border-radius: 3px; }
:root[data-theme="bloodmoon"] .whoami { border-radius: 3px; }
:root[data-theme="bloodmoon"] .viz-toggles label { border-radius: 3px; }

/* ---------- 5. Daylight ---------------------------------------------------- */
/* Bright, plain and highly legible. The one to pick for reading on a train. */
:root[data-theme="daylight"] {
  --surface-0: #eef1f6;
  --surface-1: #ffffff;
  --surface-2: #f4f6fa;
  --surface-3: #e7ebf2;
  --border:    #d3d9e3;
  --ink:       #11161f;
  --ink-2:     #4a5566;
  --ink-3:     #68738a;
  --accent:    #2a78d6;
  --on-accent: #ffffff;

  --townsfolk: #2a78d6;
  --outsider:  #12885d;
  --minion:    #4a3aa7;
  --demon:     #d33b3a;

  --good: #2a78d6; --evil: #d33b3a; --win: #12885d; --loss: #68738a;

  --radius: 10px;
  --chip-radius: 999px;
  --page-bg: #eef1f6;
}
:root[data-theme="daylight"] .topbar { background: #ffffff; }
:root[data-theme="daylight"] .card,
:root[data-theme="daylight"] .game,
:root[data-theme="daylight"] .tile { box-shadow: 0 1px 2px rgba(17,22,31,.06); }
:root[data-theme="daylight"] .flash.success { background: #e7f4ee; border-color: #84c0a5; color: #10603f; }
:root[data-theme="daylight"] .flash.error   { background: #fceaea; border-color: #e0a3a3; color: #97231f; }
:root[data-theme="daylight"] .badge.won  { background: #e7f4ee; color: #10603f; border-color: #84c0a5; }
:root[data-theme="daylight"] .seg.result input:checked + label.win  { background: #e7f4ee; border-color: #12885d; color: #10603f; }
:root[data-theme="daylight"] .seg.result input:checked + label.loss { background: #fceaea; border-color: #d33b3a; color: #97231f; }
:root[data-theme="daylight"] .switch input:checked + .track { background: #d6e5f8; }
:root[data-theme="daylight"] .combo-list { box-shadow: 0 12px 28px rgba(17,22,31,.16); }
:root[data-theme="daylight"] .chart-tip { box-shadow: 0 8px 20px rgba(17,22,31,.18); }

/* ---------- the picker itself --------------------------------------------- */
.theme-pick { position: relative; }
.theme-pick > summary {
  list-style: none; cursor: pointer;
  background: var(--surface-3); border: 1px solid var(--border); color: var(--ink-2);
  border-radius: var(--chip-radius); padding: 5px 11px; font-size: 13px;
}
.theme-pick > summary::-webkit-details-marker { display: none; }
.theme-pick[open] > summary { border-color: var(--accent); color: var(--ink); }
.theme-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60;
  width: 216px; padding: 6px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: 0 14px 32px rgba(0,0,0,.35);
}
.theme-menu button {
  display: flex; align-items: center; gap: 9px; width: 100%;
  background: transparent; border: 0; color: var(--ink);
  padding: 9px 10px; border-radius: 8px; font-size: 14px; text-align: left;
}
.theme-menu button:hover, .theme-menu button[aria-current="true"] { background: var(--surface-3); }
.theme-menu button[aria-current="true"]::after { content: "✓"; margin-left: auto; color: var(--accent); }
.theme-menu .swatches { display: inline-flex; gap: 2px; flex: none; }
.theme-menu .swatches i { width: 9px; height: 15px; border-radius: 2px; display: block; }

@media (max-width: 430px) {
  .theme-name { display: none; }
  .theme-pick > summary { padding: 5px 9px; font-size: 14px; }
}