/* meryverse_core — Design-Tokens (Scheme "meryverse")
 *
 * GENERIERT aus meryverse_core/design.py — nicht von Hand ändern.
 * Neu erzeugen:  python -m meryverse_core.design > js/tokens.css
 *
 * Wird im Portal als /core/tokens.css VOR allen anderen Stylesheets geladen.
 * Seiten dürfen einzelne Tokens danach überschreiben (z. B. der Spiele-
 * Beamer); alles andere kommt aus dieser Datei.
 *
 * Enthält seit 0.9.0 außer den Tokens auch die Basis-Regeln aller Portal-
 * Seiten (Fokus, dunkle Bedienelemente, Scrollbalken, reduzierte Bewegung).
 */
:root {
  --bg: #0c3242;
  --surface: #114B5F;
  --surface2: #1a5d74;
  --surface3: #1f6b85;
  --border: rgba(136,212,152,0.15);
  --border2: rgba(136,212,152,0.28);
  --accent: #1A936F;
  --accent2: #88D498;
  --pos: #88D498;
  --neg: #f87171;
  --warn: #fbbf24;
  --text: #F3E9D2;
  --text2: #C6DABF;
  --text3: rgba(198,218,191,0.65);
  --radius: 10px;
  --radius-lg: 16px;
  --font: 'IBM Plex Sans','Segoe UI',sans-serif;
  --font-mono: 'IBM Plex Mono','Courier New',monospace;
  --mono: 'IBM Plex Mono','Courier New',monospace;
  --shadow: 0 4px 28px rgba(0,0,0,0.55);
}

/* ── Basis-Regeln (UI-Kit Phase 1) ─────────────────────────────────────
 * Dunkles Portal: native Bedienelemente (Datums-Picker, Auswahllisten,
 * Scrollbalken, Autofill) dunkel rendern; Häkchen, Radios und Regler in der
 * Akzentfarbe.
 */
:root { color-scheme: dark; accent-color: var(--accent2); }

/* Sichtbarer Tastatur-Fokus überall. Apps dürfen ihn nicht mit
 * `outline: none` abschalten (Wächter tests/test_ui_basis.py im Website-Repo). */
:focus-visible { outline: 2px solid var(--accent2); outline-offset: 2px; }

/* Textfelder zeigen den Ring nur bei Tastaturbedienung (Betreiber-Entscheidung
 * 2026-10-04): Chrome wertet :focus-visible dort auch nach Mausklick und bei
 * autofocus als „sichtbar". js/fokus.js setzt html.mxh-maus, bis mit Tab
 * navigiert wird; ohne Skript fehlt die Klasse und der Ring bleibt immer an. */
html.mxh-maus :is(input:not([type=checkbox], [type=radio], [type=range], [type=button], [type=submit], [type=reset], [type=file], [type=color]), textarea, select, [contenteditable]):focus-visible { outline-style: none; }

/* Kalender-Symbol nativer Datums-/Zeitfelder: Hell zeichnet Chrome es schon
 * wegen color-scheme: dark — KEIN filter: invert(), der dreht es zurück ins
 * Dunkle und macht es auf dunklem Grund unsichtbar (nachgemessen 2026-10-04). */
::-webkit-calendar-picker-indicator { cursor: pointer; }

/* Dünne, getönte Scrollbalken. Ausblenden nur gezielt mit .no-scrollbar —
 * wirkt auf das Element und alles darin (z. B. <body class="no-scrollbar">). */
* { scrollbar-width: thin; scrollbar-color: var(--border2) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }
.no-scrollbar, .no-scrollbar * { scrollbar-width: none; -ms-overflow-style: none; }
.no-scrollbar::-webkit-scrollbar, .no-scrollbar *::-webkit-scrollbar { display: none; }

/* Ebenen und Abdunklung (UI-Kit Phase 4, seit 0.15.0) — eine Skala für alle
 * Apps statt 40…9700 querbeet. Reihenfolge von unten nach oben:
 *   --z-fab      schwebende Knöpfe (Feedback)  — liegt UNTER jedem Dialog
 *   --z-overlay  app-eigene Dialoge/Blätter
 *   --z-modal    mxhModal (Rückfrage über einem App-Dialog muss oben liegen)
 *   --z-toast    Rückmeldungen (auch über einem offenen Dialog lesbar)
 *   --z-tooltip  Hinweise am Mauszeiger
 * Werte so gewählt, dass die heutigen Chor-Overlays (bis 2001) unter
 * --z-modal bleiben. */
:root {
  --z-fab: 900; --z-overlay: 1000; --z-modal: 3000; --z-toast: 3500; --z-tooltip: 4000;
  --overlay: rgba(6,24,33,0.72);
  --shadow-pop: 0 18px 50px rgba(0,0,0,0.45);
}

/* Wer Bewegung reduziert haben möchte, bekommt keine Animationen. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}
