/* ══ D&D Sync — themes (every app page: sheet, GM panel, creator, dashboard, login, admin, help) ══════
   One set of design tokens per theme (html.theme-navy = "Night", theme-light, theme-toxic, theme-plant;
   theme.js sets the class). Every colour the apps use comes from these variables; the JSX apps read them
   through their P / C objects (P.dark → var(--text) …), so a theme switch is pure CSS.

   Text tokens are contrast-checked against --card and --bg (WCAG AA):
     --text   primary text        ≥ 10:1
     --text-2 secondary text      ≥ 7:1
     --text-3 labels, hints       ≥ 4.8:1  (also for small uppercase labels)
   Semantic colours come in two flavours: --x (readable as text / icon on the card) and --x-solid
   (a filled background with --on-solid text), plus --x-soft for tinted surfaces. */

html.theme-navy, html:not([class*="theme-"]) {
  --bg: #07090e;            --card: #0e1220;          --card-border: rgba(201,168,76,0.2);
  --text: #ecdfc7;          --text-2: #92a0b3;        --text-3: #71839d;
  --accent: #c9a84c;        --gold: #c9a84c;          --on-accent: #0b0e16;
  --shadow: 0 2px 20px rgba(0,0,0,0.8);
  --header: linear-gradient(135deg,#0b0e16 0%,#111828 50%,#0b0e16 100%);
  --head: #0b0e16;          --cream: #ecdfc7;         --hp-bar: #080c18;
  --highlight: #111828;     --prof-bg: #0a0e18;       --turn-bg: #131924;      --danger-bg: #14080e;
  --field-bg: #0a0e18;      --field-border: rgba(201,168,76,0.28);
  --line: rgba(201,168,76,0.28); --line-soft: rgba(201,168,76,0.16); --line-faint: rgba(201,168,76,0.09);
  --accent-soft: rgba(201,168,76,0.14);
  --title: #fde68a;           --gold-text: #e9c349;       --player: #60a5fa;
  --scroll-thumb: rgba(201,168,76,0.3);
}
html.theme-light {
  --bg: #f0e6c8;            --card: #fdf6e3;          --card-border: #c8a84b;
  --text: #2c1810;          --text-2: #694125;        --text-3: #7b5d12;
  --accent: #7c2d12;        --gold: #c8a84b;          --on-accent: #fef3c7;
  --shadow: 2px 3px 8px rgba(100,60,10,0.2);
  --header: linear-gradient(135deg,#2c1508 0%,#5c2a0e 50%,#2c1508 100%);
  --head: #2c1810;          --cream: #f4e8c1;         --hp-bar: #e7dcc8;
  --highlight: #fef9ee;     --prof-bg: #f9f5ed;       --turn-bg: #fef3c7;      --danger-bg: #fef2f2;
  --field-bg: #fffaf0;      --field-border: #c8a84b;
  --line: rgba(200,168,75,0.55); --line-soft: rgba(200,168,75,0.3); --line-faint: rgba(200,168,75,0.16);
  --accent-soft: rgba(124,45,18,0.12);
  --title: #fde68a;           --gold-text: #7b5d12;       --player: #1d4ed8;
  --scroll-thumb: #c8a84b;
}
html.theme-toxic {
  --bg: #030d06;            --card: #061409;          --card-border: rgba(255,101,0,0.22);
  --text: #f0fff2;          --text-2: #84a68a;        --text-3: #558e60;
  --accent: #ff6500;        --gold: #ff6500;          --on-accent: #061409;
  --shadow: 0 2px 20px rgba(0,0,0,0.9);
  --header: linear-gradient(135deg,#040f07 0%,#081a0d 50%,#040f07 100%);
  --head: #040f07;          --cream: #ffffff;         --hp-bar: #031005;
  --highlight: #081a0d;     --prof-bg: #040e07;       --turn-bg: #0a1d0e;      --danger-bg: #140808;
  --field-bg: #040e07;      --field-border: rgba(255,101,0,0.3);
  --line: rgba(255,101,0,0.3); --line-soft: rgba(255,101,0,0.17); --line-faint: rgba(255,101,0,0.09);
  --accent-soft: rgba(255,101,0,0.14);
  --title: #ffb27a;           --gold-text: #ffb27a;       --player: #4ade80;
  --scroll-thumb: rgba(255,101,0,0.3);
}
html.theme-plant {
  --bg: #0d1a07;            --card: #152010;          --card-border: rgba(240,96,24,0.25);
  --text: #f5c898;          --text-2: #c3a27d;        --text-3: #6d963b;
  --accent: #f06018;        --gold: #f06018;          --on-accent: #0d1a07;
  --shadow: 0 2px 20px rgba(0,0,0,0.9);
  --header: linear-gradient(135deg,#0a1505 0%,#142010 50%,#0a1505 100%);
  --head: #0a1505;          --cream: #fde8c8;         --hp-bar: #0a1405;
  --highlight: #1a2810;     --prof-bg: #0e1c08;       --turn-bg: #162210;      --danger-bg: #1a0808;
  --field-bg: #0e1c08;      --field-border: rgba(240,96,24,0.32);
  --line: rgba(240,96,24,0.32); --line-soft: rgba(240,96,24,0.18); --line-faint: rgba(240,96,24,0.1);
  --accent-soft: rgba(240,96,24,0.14);
  --title: #fdbf8a;           --gold-text: #fdbf8a;       --player: #f5a060;
  --scroll-thumb: rgba(240,96,24,0.3);
}

/* semantic colours — dark themes (readable on the dark cards) */
html.dark-mode, html:not([class*="theme-"]) {
  --danger: #f06868;  --danger-solid: #b91c1c;  --danger-soft: rgba(239,68,68,0.14);
  --success: #3fbf6c; --success-solid: #15803d; --success-soft: rgba(34,197,94,0.14);
  --warn: #f0a23a;    --warn-solid: #b45309;    --warn-soft: rgba(245,158,11,0.14);
  --info: #6b9bf5;    --info-solid: #1d4ed8;    --info-soft: rgba(59,130,246,0.15);
  --magic: #b08af5;   --magic-solid: #6d28d9;   --magic-soft: rgba(139,92,246,0.16);
  --teal: #3cc4d8;    --teal-solid: #0e7490;    --teal-soft: rgba(8,145,178,0.16);
  --on-solid: #ffffff;
}
/* semantic colours — light theme (parchment) */
html.theme-light {
  --danger: #b21c1c;  --danger-solid: #b91c1c;  --danger-soft: rgba(220,38,38,0.1);
  --success: #0f7234; --success-solid: #15803d; --success-soft: rgba(22,163,74,0.12);
  --warn: #8f4e04;    --warn-solid: #b45309;    --warn-soft: rgba(217,119,6,0.12);
  --info: #1550d4;    --info-solid: #1d4ed8;    --info-soft: rgba(37,99,235,0.1);
  --magic: #6d2ae0;   --magic-solid: #6d28d9;   --magic-soft: rgba(124,58,237,0.1);
  --teal: #0b6275;    --teal-solid: #0e7490;    --teal-soft: rgba(14,116,144,0.1);
  --on-solid: #ffffff;
}

/* ── page ── */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
body {
  background: var(--bg); color: var(--text); font-family: 'DM Sans', system-ui, sans-serif;
  min-height: 100vh; overflow-x: hidden; -webkit-font-smoothing: antialiased;
  touch-action: manipulation; overscroll-behavior: none;
}
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 3px; }
button:active { transform: scale(0.97); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* desktop zoom; vh units are zoomed too, so viewport-sized boxes divide by --page-zoom (ui.css .modal) */
:root { --page-zoom: 1; }
@media (min-width: 1024px) { :root { --page-zoom: 1.4; } body { zoom: var(--page-zoom); } }

/* ── form controls: always readable, whatever the theme (a select without a colour used to be black on black) ── */
select, input, button, textarea { font-family: inherit; -webkit-appearance: none; appearance: none; }
input, select, textarea { font-size: 16px; color: var(--text); background-color: var(--field-bg); border-color: var(--field-border); }
input::placeholder, textarea::placeholder { color: var(--text-3); opacity: 1; }
select option, select optgroup { background: var(--card); color: var(--text); }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }
input[type="checkbox"], input[type="radio"] { -webkit-appearance: auto; appearance: auto; accent-color: var(--accent); background: none; }
select:disabled, input:disabled { opacity: 0.6; }

/* ── app bar (sheet #back-bar, GM #back-bar, creator #top-bar) ── */
#back-bar, #top-bar {
  background: var(--card); color: var(--text);
  padding: 8px 14px; display: flex; align-items: center;
  justify-content: space-between; font-size: 13px;
  position: sticky; top: 0; z-index: 200;
  border-bottom: 1px solid var(--line);
}
html.theme-light #back-bar, html.theme-light #top-bar { background: var(--header); border-bottom: 2px solid var(--gold); color: var(--cream); }
#back-bar a, #top-bar a, .theme-toggle-btn {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--gold); text-decoration: none; font-size: 12px;
  padding: 6px 12px; border: 1px solid var(--line);
  border-radius: 7px; background: var(--accent-soft);
  transition: background 0.15s, border-color 0.15s; letter-spacing: 0.2px;
}
.theme-toggle-btn { justify-content: center; width: 32px; height: 32px; padding: 0; cursor: pointer; }
#back-bar a:hover, #top-bar a:hover, .theme-toggle-btn:hover { border-color: var(--gold); }
.bar-title, #char-title { font-weight: 700; font-size: 14px; color: var(--title); }
.bar-right { display: flex; align-items: center; gap: 8px; }
.bar-status, #save-indicator { font-size: 11px; opacity: 0.85; min-width: 70px; text-align: right; letter-spacing: 0.2px; color: var(--text-2); }
html.theme-light .bar-status, html.theme-light #save-indicator { color: var(--cream); }
#loading-msg { text-align: center; padding: 60px 20px; color: var(--text-2); font-size: 16px; }