/* ============================================================================
rivok-tokens.css — NUR die Token-Schicht (Theme A/B/C) + globale option{}-Regel.
Single source der Design-Tokens. Wird von rivok.css ge-@import-t (Chrome-Seiten)
UND direkt von play.html gelinkt — play.html braucht NUR Tokens + option{},
KEINE Komponenten-Klassen (.btn/.lbl/.card/…) → so können die nicht ins Spiel-UI leaken.
============================================================================ */
/* ============================ 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"] {
--bg:#08090d;
--bg-soft:#0e1117;
--bg-card:#131820;
--bg-card-hi:#1a2230;
--border:#232a36;
--border-hi:#2f3a4a;
--text:#e6edf3;
--text-mute:#8b95a3;
--text-dim:#5a6473;
--accent:#5dd9ff; /* primärer Akzent (Cyan) */
--warm:#f0b73a; /* zweiter Akzent (Amber) */
--danger:#ff5d5d;
--good:#7cd97c;
--purple:#a371f7;
--grid-line:rgba(93,217,255,.04);
/* Legacy-Aliase für Alt-Seiten (= accent/warm/danger/good), theme-aware als Literale */
--cyan:#5dd9ff; --amber:#f0b73a; --red:#ff5d5d; --green:#7cd97c;
--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 (radialer Glow + taktisches Raster) */
--body-bg:
radial-gradient(1200px 700px at 70% -10%, rgba(93,217,255,.06), transparent 60%),
linear-gradient(0deg, rgba(93,217,255,.04) 1px, transparent 1px) 0 0/100% 28px,
linear-gradient(90deg, rgba(93,217,255,.04) 1px, transparent 1px) 0 0/28px 100%,
#08090d;
--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,#5dd9ff,transparent);
--card-edge-glow:0 0 10px rgba(93,217,255,.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:#5dd9ff;
--focus-ring:0 0 0 3px rgba(93,217,255,.15);
/* Buttons */
--btn-bg:#1a2230;
--btn-border:#2f3a4a;
--btn-border-w:1px;
--btn-shadow:none;
--btn-radius:8px;
--btn-primary-bg:linear-gradient(180deg,#7fe3ff,#5dd9ff);
--btn-primary-on:#04222e;
--btn-primary-shadow:0 4px 14px rgba(93,217,255,.28);
--btn-primary-shadow-hover:0 6px 20px rgba(93,217,255,.45);
--btn-warm-bg:linear-gradient(180deg,#ffce5e,#f0b73a);
--btn-warm-on:#2a1d02;
--btn-danger-bg:#1d1115;
--btn-danger-border:#5a2730;
--btn-danger-fg:#ffb3b3;
/* Pills */
--pill-bg:rgba(93,217,255,.12);
--pill-fg:#5dd9ff;
--pill-border:rgba(93,217,255,.25);
/* Balken (Kontaktbox) */
--bar-track:#0a0c10;
--bar-me:linear-gradient(90deg,#7fe3ff,var(--accent));
--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