/* client/css/tokens.css — the shared theme token system.
 *
 * Two themes, one dark-fantasy family. Dark is the primary look (near-black
 * ground, antique gold, deep red — a League-of-Legends-adjacent register); light
 * is a parchment variant that keeps the same gold/red family on aged paper.
 * Selected by html[data-theme="light"|"dark"], set before first paint by
 * /js/shared/theme.js. per-theme `color-scheme` makes native controls follow.
 *
 * Every value below is FROZEN and contrast-verified against WCAG 2.2 AA
 * (text >= 4.5:1, UI/focus >= 3:1, button text >= 4.5:1). Recomputed ratios:
 *   DARK  text 14.95, muted 6.99, gold-UI 7.54, link 8.80, danger 5.88,
 *         focus 10.10, on-accent 7.54, hero-text 15.75
 *   LIGHT text 12.38, muted 6.25, gold-UI 4.96, link 5.33, danger 5.84,
 *         focus 6.31, on-accent 5.52
 * Do not tune a colour without recomputing its ratio against its surface.
 */

html[data-theme="dark"] {
  color-scheme: dark;

  --surface:        #0c0e13;   /* the near-black ground from the original */
  --surface-raised: #151922;
  --text:           #e8e2d4;   /* warm off-white, not pure white */
  --chat-text:      #f6f2ea;   /* chat log/input: a touch lighter than --text */
  --text-muted:     #a99a7d;   /* aged parchment grey-gold */
  --link:           #d4a862;
  --danger:         #e06a5f;
  --accent:         #c79a5b;   /* antique gold #8a6c3c, lifted for dark-bg contrast */
  --accent-strong:  #8a6c3c;   /* the original gold, for borders/rules on light areas */
  --on-accent:      #0c0e13;   /* near-black text on a gold button */
  --focus:          #e0b56a;
  --border:         #2b2a24;
  --rule:           #8a6c3c;   /* the signature gold hairline (dividers, underlines) */
  --ember:          #a1251f;   /* the deep red from the original triangle */

  --scrim:     rgba(6, 7, 10, 0.55);
  --hero-text: #f2ede0;
}

html[data-theme="light"] {
  color-scheme: light;

  --surface:        #ece3cf;   /* aged parchment */
  --surface-raised: #f6efdf;
  --text:           #2a2118;
  --chat-text:      #443a2c;   /* chat log/input: a touch lighter/softer than --text */
  --text-muted:     #5c4f3a;
  --link:           #7a5320;
  --danger:         #9e2b1e;
  --accent:         #7a5a28;   /* darkened gold so it reads as UI on light */
  --accent-strong:  #5c4118;
  --on-accent:      #f6efdf;   /* light text on the darker gold button */
  --focus:          #6a4a1a;
  --border:         #cdbfa2;
  --rule:           #8a6c3c;
  --ember:          #9e2b1e;

  /* The hero is an image band in both themes and its title is light, so the
     light-theme scrim must still darken the art enough for white text to hold
     its 4.5:1 — a faint parchment tint would leave the title on near-white.
     Kept strong deliberately; the section surfaces below use the light palette. */
  --scrim:     rgba(12, 10, 6, 0.58);
  --hero-text: #f7f2e6;
}

/* Focus indicator — WCAG 2.2 SC 2.4.13 shape: a >= 2px perimeter with >= 3:1
 * contrast against the unfocused state. Applied globally so every page importing
 * tokens.css inherits one focus treatment; :focus-visible keeps it off mouse. */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Header navigation light-up. Every top-right navigation control (landing,
 * privacy and dashboard: .site-header .header-actions; game: #topBar
 * .bar-right) lights up like the privacy page's wordmark: --accent at rest,
 * --text on hover and on keyboard focus, at once (the wordmark has no
 * transition). The focus ring is the :focus-visible rule above, unchanged.
 *
 * Why the text light-up does not use `color`: on the landing and dashboard
 * `color` carries the 0.7 s theme crossfade (.theme-ready *), and one property
 * cannot change at once on hover and over 0.7 s on a theme change. So `color`
 * keeps the crossfade, and the light-up is drawn with properties no crossfade
 * transitions: -webkit-text-fill-color for text, background-color for the
 * sidebar toggle's bars. The hover also drops the pages' gold fill and glow,
 * which would put --text on gold. */
:is(.site-header .header-actions, #topBar .bar-right) > .btn { color: var(--accent); }
:is(.site-header .header-actions, #topBar .bar-right) > .btn:is(:hover, :focus-visible) {
  color: var(--accent); background-color: transparent; box-shadow: none;
  -webkit-text-fill-color: var(--text);
}
#sidebarToggle:is(:hover, :focus-visible) .bars,
#sidebarToggle:is(:hover, :focus-visible) .bars::before,
#sidebarToggle:is(:hover, :focus-visible) .bars::after { background-color: var(--text); }

/* Theme toggle: no colour transition, in itself or its icon, so it lights up
 * through `color` and changes colour at once with the theme.
 * Safari fix (seen in Safari: after a press the icon vanished for seconds,
 * then faded back in slowly). Before, the toggle inherited --text and the
 * global .theme-ready * rule gave the button, svg, circle and path a 0.7 s
 * colour transition each. Measured in Chromium: during a theme crossfade a
 * colour transition can be restarted on each style update, from wherever it
 * has got to, for another full 0.7 s (the wordmark and Sign up restart 12-15
 * times in 1.2 s), so the colour creeps toward its target for seconds. Safari
 * showing that creep on the toggle fits the report: the icon keeps the old
 * theme's colour on the new background, then crawls in. With no colour
 * transition in the toggle there is nothing to restart in any engine. */
:is(.site-header, #topBar) #themeToggle:is(:hover, :focus-visible) { color: var(--text); }

/* Wordmark light-up. Every wordmark that is a link (privacy and dashboard: to
 * the landing; game: "Dashboard", back to the dashboard) turns from --accent
 * to --text at once on hover and on keyboard focus, as the privacy page's did
 * first. Drawn with -webkit-text-fill-color for the same reason as the header
 * buttons above: `color` carries the theme crossfade. The d20 mark stays gold.
 * The landing's wordmark is not a link, so it has no hover. */
a.wordmark { color: var(--accent); }
a.wordmark:is(:hover, :focus-visible) { color: var(--accent); -webkit-text-fill-color: var(--text); }
:is(.site-header, #topBar) #themeToggle,
:is(.site-header, #topBar) #themeToggle svg,
:is(.site-header, #topBar) #themeToggle svg * { transition: none; }

/* Scrollbars — themed to the signature gold so every scrollable region (page,
 * dialogs, the floating card body, chat, sheets) matches the rest of the UI
 * instead of the browser default. Applied globally via tokens.css so all pages
 * inherit it. Firefox uses the standard properties; WebKit/Blink use the
 * pseudo-elements. Both draw from the same tokens, so they follow the theme. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
}
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--accent);
  border: 3px solid var(--surface);   /* inset look, so the thumb reads as a gold bar */
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover { background: var(--accent-strong); }
::-webkit-scrollbar-corner { background: transparent; }

/* [ADDED 2026-10-01] Hidden until the session is confirmed, so a signed-out
   visitor is sent to log in without first seeing the empty page layout flash.
   The page script removes .auth-pending once /api/auth/me answers. If the script
   never runs, the page reveals itself after 4 s instead of staying blank. */
html.auth-pending body { visibility: hidden; animation: vtt-auth-reveal 0s linear 4s forwards; }
@keyframes vtt-auth-reveal { to { visibility: visible; } }