/* ============================================================================
rivok-tokens.css — Token-Schicht (Theme A/B/C) + option{} + der gemeinsame
Seiten-Hintergrund (body/body::before/::after, ganz unten).
Single source der Design-Tokens. Wird von rivok.css ge-@import-t (Chrome-Seiten)
UND direkt von play.html gelinkt — play.html bekommt hier Tokens, option{} und den
Hintergrund, aber KEINE Komponenten-Klassen (.btn/.lbl/.card/…) → kein Leak ins Spiel-UI.
============================================================================ */
/* Inter selbst-gehostet (DSGVO-konform — KEIN Google-Request). Variable-Font: ein File deckt 100–900.
Datei `/fonts/inter-latin-wght-normal.woff2` MUSS mit deployt werden (in den Docroot unter fonts/). */
@font-face {
font-family: 'Inter';
font-style: normal;
font-display: swap;
font-weight: 100 900;
src: url('/fonts/inter-latin-wght-normal.woff2') format('woff2');
}
/* ============================ TOKENS · THEME A ============================= */
/* Theme via data-theme auf ODER — am besten per Inline-Head-Script
VOR dem ersten Paint setzen (verhindert Laufzeit-Umschalt-Quirks bei Form-Controls):
*/
:root,
[data-theme="a"] {
/* Palette = KONZEPT-1 (ex tools/ui-concepts.html). Stand bis 2026-07-21 NUR lokal in
play.html #lobby → die Lobby sah minimal anders aus als jede andere Seite. Jetzt global. */
--bg:#070912;
--bg-soft:#0e1117;
--bg-card:#131820;
--bg-card-hi:#1a2230; /* SOLIDE lassen: Spiel-HUD über bewegter Karte. Chrome nutzt --chrome-* */
--border:#232a36; /* SOLIDE lassen: dito */
--border-hi:#2f3a4a;
--text:#eef1fb;
--text-mute:#9aa3c4;
--text-dim:#6b7494;
--accent:#7b5cff; /* primärer Akzent (Violett = Marke) */
/* Textfarbe AUF --accent-Flächen. Früher stand dort hart #08090d — das passte zum alten
hellen Cyan-Akzent, auf dem violetten war es dunkel auf dunkel (Allianz-Knopf, Chat-Badge,
aktiver Chat-Tab unlesbar). --accent ist in ALLEN Themes dunkel/mittel → immer hell. */
--accent-on:#fff;
--warm:#ffb24d; /* zweiter Akzent (Amber) */
--danger:#ff5d5d;
--good:#4fe39a;
--purple:#a371f7;
--grid-line:rgba(93,217,255,.04);
/* Legacy-Aliase. --cyan = Daten-/Zahlenfarbe und bewusst NICHT = --accent (so im Konzept). */
--cyan:#39d4f5; --amber:#ffb24d; --red:#ff5d5d; --green:#4fe39a;
--discord:#5865f2; /* Marken-Fixwert, nicht gethemt */
--radius:12px;
--radius-sm:8px;
--radius-pill:999px;
--font-ui:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
--font-mono:'JetBrains Mono','Fira Code','SF Mono',Consolas,ui-monospace,monospace;
/* Seiten-Hintergrund: Konzept-Dunkelbasis (Aurora + Raster kommen aus rivok.css als Body-Pseudos) */
--body-bg:#070912;
--body-bg-attach:scroll;
/* Card / Panel — Alias-Tokens als DIREKTE Werte (siehe Hinweis oben am Block) */
--card-bg:linear-gradient(180deg,#1a2230,#131820);
--card-border:#232a36;
--card-border-w:1px;
--card-shadow:0 10px 26px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.03);
--card-blur:none;
--card-edge:linear-gradient(180deg,#39d4f5,transparent);
--card-edge-glow:0 0 10px rgba(57,212,245,.5);
--card-edge-w:2px;
--card-inner:0 solid transparent; /* B: gestrichelte Innenkante */
/* Inputs */
--input-bg:#0e1117;
--input-border:#232a36;
--input-border-w:1px;
--focus-border:#39d4f5;
--focus-ring:0 0 0 3px rgba(57,212,245,.15);
/* Buttons */
--btn-bg:#1a2230;
--btn-border:#2f3a4a;
--btn-border-w:1px;
--btn-shadow:none;
--btn-radius:8px;
/* Primary = Marken-Verlauf des Konzepts (lag vorher doppelt: rivok.css [data-theme=a] .btn.primary
UND play.html .kz-hero-cta .btn.primary). Jetzt ein Token für alle Seiten. */
--btn-primary-bg:linear-gradient(135deg,#7b5cff 0%,#ff5dbb 55%,#ff9a4d 100%);
--btn-primary-on:#fff;
--btn-primary-shadow:0 10px 30px -8px rgba(255,93,187,.55);
--btn-primary-shadow-hover:0 16px 40px -8px rgba(255,93,187,.7);
--btn-warm-bg:linear-gradient(180deg,#ffce5e,#ffb24d);
--btn-warm-on:#2a1d02;
--btn-danger-bg:#1d1115;
--btn-danger-border:#5a2730;
--btn-danger-fg:#ffb3b3;
/* Pills */
--pill-bg:rgba(57,212,245,.12);
--pill-fg:#39d4f5;
--pill-border:rgba(57,212,245,.25);
/* Balken (Kontaktbox) */
--bar-track:#0a1130;
--bar-me:linear-gradient(90deg,#7fe3ff,var(--cyan));
--bar-them:#3a2630;
/* Spiel-HUD über dem Canvas (play.html): halbtransparente Float-Panels + Aktions-Tiles, gethemt */
--panel:rgba(19,24,32,.82);
--panel-strong:rgba(19,24,32,.94);
/* In-Game-Float-HUD (über bewegter Karte): deckend, KEIN Blur, KEIN weicher Schatten (blüht über hellem Terrain zum Halo).
Abgrenzung allein über die klare --border-hi-Kante. */
--hud-bg:rgba(19,24,32,.96); --hud-blur:none; --hud-shadow:none;
--tile-hover:#1c2532;
--tile-sel:#11212b;
--menu-bg:#131820; /* solider Hintergrund für native