/*
 * -----------------------------
 * CoreX — Gestaltungsmerkmale
 * TiNi #Software
 * ------------------------------
 * Created: 2026-10-21
 * ------------------------------
 *
 * DAS VOKABULAR DER VERWALTUNGSOBERFLAECHE.
 *
 * Eine Schicht zwischen Thema und Fachmodul. Die Themen setzen
 * weiterhin Bootstraps `--bs-*`; hier stehen die Begriffe, die eine
 * Verwaltungsmaske braucht — Flaeche, Linie, Bedeutung, Abstand.
 *
 * WARUM ES DAS GIBT. Gemessen am 2026-10-21 ueber fuenf Installationen:
 * 63.179 Zeilen eigenes CSS, 411 verschiedene Farben, je Installation
 * 23 bis 32 getrennte Token-Vokabulare. Allein in zehn Fachdateien 66
 * verschiedene Grautoene — darunter #e5e7eb neben #e5e7ec. Jede dieser
 * Farben war einmal eine Entscheidung, und keine davon ist noch
 * nachvollziehbar.
 *
 * WARUM `--ui-` UND NICHT `--cx-`. Das naheliegende Praefix ist belegt:
 * `templates/defaults/template_pages/page_frontpage.html` fuehrt in einem
 * eingebetteten Stilblock eigene `--cx-accent`, `--cx-text` und
 * `--cx-surface` mit anderer Bedeutung. Eine globale Neudefinition
 * derselben Namen haette die Startseite still veraendert — sie benutzt
 * die Namen weiter, bekaeme aber fremde Werte. Gemessen am 2026-10-21:
 * 36 Verwendungen von `--cx-accent`, je 15 von `--cx-text` und
 * `--cx-surface`.
 *
 * DIE DREI REGELN:
 *
 *   1. EIN FACHMODUL SCHREIBT KEINE FARBE AUF. Es benutzt ein Token.
 *      Was hier nicht steht, fehlt — dann gehoert es hierher, nicht in
 *      die Suite.
 *
 *   2. AMPELFARBE IST BEDEUTUNG, AKZENT IST MARKENZEICHEN. Gruen heisst
 *      nie „Spielerperspektive", und ein Akzent heisst nie „in Ordnung".
 *      Die Trennung stand schon woertlich in tini_boards; hier wird sie
 *      durchgezogen.
 *
 *   3. DER GRUNDTON GEHOERT DEM THEMA. Diese Datei setzt einen kuehlen
 *      Vorgabewert; ein Thema darf ihn ersetzen — warm, dunkel, oder was
 *      es sonst sein will. Deshalb stehen die Neutralen zuoberst und
 *      einzeln: sie sind der Teil, der ueberschrieben wird.
 *
 * DIE AUSDRUECKLICHE WAHL HAENGT AN EINEM MERKMAL, NICHT AN DER WURZEL.
 * `[data-theme]` und `[data-ground]` stehen ohne `:root` davor — damit
 * wirken sie auch auf einem einzelnen Behaelter. Der Style-Guide braucht
 * genau das: er zeigt vier Kombinationen auf einer Seite, und das ginge
 * nicht, wenn nur das Wurzelelement umschaltbar waere. Eigenschaften
 * vererben sich, also traegt ein Behaelter seinen Teilbaum.
 *
 * DIE REIHENFOLGE IST WICHTIG. Diese Datei wird VOR dem Thema geladen,
 * damit das Thema sie ueberschreiben kann, und vor den Modulen, damit
 * die ihre Werte vorfinden. Eingebunden ist sie in jedem
 * `page_overall.html` — im Vorgabesatz und in jedem Thema.
 */

:root {

  /* ================================================================
     1. NEUTRALE — der Grundton. Das Thema darf alles hiervon ersetzen.
     ================================================================ */

  --ui-paper:      #f7f8f9;   /* Seitengrund                          */
  --ui-surface:    #ffffff;   /* Karte, Tabellenzeile                 */
  --ui-surface-2:  #eef1f4;   /* Flaeche, Tabellenkopf                */
  --ui-surface-3:  #e4e8ed;   /* eingesenkt, inaktiv                  */

  --ui-line:       #dfe3e7;   /* Rahmen, Trenner                      */
  --ui-line-soft:  #eaedf0;   /* Zeilentrenner                        */

  --ui-ink:        #15191e;   /* Text                                 */
  --ui-ink-soft:   #5b6670;   /* Nebentext, Beschriftung              */
  --ui-ink-faint:  #8b949c;   /* Hinweis, Platzhalter                 */

  /* ================================================================
     2. BEDEUTUNG — niemals fuer Markenzwecke benutzen.

     Je drei Werte: Schrift, Flaeche, Linie. Die Flaeche traegt die
     Schrift, die Linie fasst sie ein — ohne diese drei muesste jede
     Suite sich eine helle Variante selbst ausdenken, und genau das ist
     passiert: 26 verschiedene Gruentoene, 35 rote.
     ================================================================ */

  --ui-ok:         #1c6b2f;
  --ui-ok-bg:      #eef6f0;
  --ui-ok-line:    #c3e0cd;

  --ui-warn:       #8a6d00;
  --ui-warn-bg:    #faf5e6;
  --ui-warn-line:  #e8dcae;

  --ui-bad:        #a32020;
  --ui-bad-bg:     #fbefef;
  --ui-bad-line:   #e8c4c4;

  --ui-info:       #1d4ed8;
  --ui-info-bg:    #eef2ff;
  --ui-info-line:  #c7d2fe;

  /* ================================================================
     3. AKZENT — kommt aus der Perspektive, nicht aus dem Modul.

     Die Vorgabe ist bewusst ein stilles Schiefergrau: eine Oberflaeche
     ohne gesetzten Akzent soll ungebrandet aussehen und nicht falsch.
     `tini_boards` setzt den wirklichen Wert je Arbeitsplatz —
     Spieler, Verein, Landesverband, Bund, Rat — und er ist je Instanz
     einstellbar.
     ================================================================ */

  --ui-accent:      #44525e;
  --ui-accent-ink:  #ffffff;   /* Schrift AUF dem Akzent             */

  /* Getoente Flaeche aus dem Akzent. Der erste Wert traegt, falls
     color-mix fehlt; moderne Browser nehmen den zweiten. */
  --ui-accent-bg:   #eef1f4;
  --ui-accent-bg:   color-mix(in srgb, var(--ui-accent) 8%, var(--ui-surface));
  --ui-accent-line: #dfe3e7;
  --ui-accent-line: color-mix(in srgb, var(--ui-accent) 24%, var(--ui-surface));

  /* ================================================================
     4. FORM — Rundung und Schatten.

     Gemessen waren es 78 verschiedene border-radius-Werte. Drei
     reichen. Die beiden Spezialthemen (lcars, matrix) setzen sie auf
     null und flachen damit alles ab — genau dafuer sind es Token.
     ================================================================ */

  --ui-radius:     .35rem;
  --ui-radius-l:   .6rem;
  --ui-pill:       999px;

  --ui-shadow:     0 1px 2px rgba(17, 24, 32, .06);
  --ui-shadow-l:   0 2px 10px rgba(17, 24, 32, .10);

  /* ================================================================
     5. RHYTHMUS — Abstaende und Schriftgrade.

     Sechs Abstaende und vier Grade. Gemessen waren 130 verschiedene
     font-size-Werte; die meisten davon unterscheiden sich um ein
     Hundertstel und sind reiner Zufall.
     ================================================================ */

  --ui-gap-1:      .25rem;
  --ui-gap-2:      .5rem;
  --ui-gap-3:      .75rem;
  --ui-gap-4:      1rem;
  --ui-gap-5:      1.5rem;
  --ui-gap-6:      2rem;

  --ui-text-s:     .82rem;   /* Hilfetext, Nebenangabe               */
  --ui-text:       .95rem;   /* Fliesstext, Tabelle                  */
  --ui-text-l:     1.05rem;  /* Hervorgehobene Zahl                  */
  --ui-text-xl:    1.3rem;   /* Abschnittsueberschrift               */

  /* Zahlen in Spalten brauchen gleich breite Ziffern. Ohne das
     „wandern" Betraege und Anzahlen beim Scrollen. */
  --ui-num:        tabular-nums;
}

/* ==================================================================
   DUNKEL

   Die Neutralen und die Bedeutungsfarben wechseln, die Form nicht.
   Beides steht zweimal: einmal fuer die Einstellung des Betriebssystems
   und einmal fuer eine ausdrueckliche Wahl am Wurzelelement. Die
   ausdrueckliche Wahl muss in BEIDE Richtungen gewinnen — sonst kann
   jemand mit dunklem System nicht auf hell schalten.
   ================================================================== */

@media (prefers-color-scheme: dark) {
  :root {
    --ui-paper:      #14181c;
    --ui-surface:    #1b2026;
    --ui-surface-2:  #232a31;
    --ui-surface-3:  #2b333b;

    --ui-line:       #2e353d;
    --ui-line-soft:  #242b32;

    --ui-ink:        #e6e9ec;
    --ui-ink-soft:   #9aa4ad;
    --ui-ink-faint:  #6c767e;

    --ui-ok:         #6cc08a;
    --ui-ok-bg:      #17261c;
    --ui-ok-line:    #2c4a36;

    --ui-warn:       #d6b25a;
    --ui-warn-bg:    #27220f;
    --ui-warn-line:  #4a3f1d;

    --ui-bad:        #e08585;
    --ui-bad-bg:     #2a1a1a;
    --ui-bad-line:   #4d2e2e;

    --ui-info:       #7da2f0;
    --ui-info-bg:    #171d2e;
    --ui-info-line:  #2c3a5c;

    --ui-accent-ink: #11161b;

    --ui-shadow:     0 1px 2px rgba(0, 0, 0, .35);
    --ui-shadow-l:   0 2px 10px rgba(0, 0, 0, .45);
  }
}

[data-theme="dark"] {
  --ui-paper:      #14181c;
  --ui-surface:    #1b2026;
  --ui-surface-2:  #232a31;
  --ui-surface-3:  #2b333b;
  --ui-line:       #2e353d;
  --ui-line-soft:  #242b32;
  --ui-ink:        #e6e9ec;
  --ui-ink-soft:   #9aa4ad;
  --ui-ink-faint:  #6c767e;
  --ui-ok:         #6cc08a;
  --ui-ok-bg:      #17261c;
  --ui-ok-line:    #2c4a36;
  --ui-warn:       #d6b25a;
  --ui-warn-bg:    #27220f;
  --ui-warn-line:  #4a3f1d;
  --ui-bad:        #e08585;
  --ui-bad-bg:     #2a1a1a;
  --ui-bad-line:   #4d2e2e;
  --ui-info:       #7da2f0;
  --ui-info-bg:    #171d2e;
  --ui-info-line:  #2c3a5c;
  --ui-accent-ink: #11161b;
  --ui-shadow:     0 1px 2px rgba(0, 0, 0, .35);
  --ui-shadow-l:   0 2px 10px rgba(0, 0, 0, .45);
}

[data-theme="light"] {
  --ui-paper:      #f7f8f9;
  --ui-surface:    #ffffff;
  --ui-surface-2:  #eef1f4;
  --ui-surface-3:  #e4e8ed;
  --ui-line:       #dfe3e7;
  --ui-line-soft:  #eaedf0;
  --ui-ink:        #15191e;
  --ui-ink-soft:   #5b6670;
  --ui-ink-faint:  #8b949c;
  --ui-ok:         #1c6b2f;
  --ui-ok-bg:      #eef6f0;
  --ui-ok-line:    #c3e0cd;
  --ui-warn:       #8a6d00;
  --ui-warn-bg:    #faf5e6;
  --ui-warn-line:  #e8dcae;
  --ui-bad:        #a32020;
  --ui-bad-bg:     #fbefef;
  --ui-bad-line:   #e8c4c4;
  --ui-info:       #1d4ed8;
  --ui-info-bg:    #eef2ff;
  --ui-info-line:  #c7d2fe;
  --ui-accent-ink: #ffffff;
  --ui-shadow:     0 1px 2px rgba(17, 24, 32, .06);
  --ui-shadow-l:   0 2px 10px rgba(17, 24, 32, .10);
}

/* ==================================================================
   DER WARME GRUNDTON

   Zum Uebernehmen in ein Thema, nicht zum Einschalten hier. Er ist die
   zweite Haelfte der Entscheidung „Grundton gehoert dem Thema": wer
   ihn will, kopiert diesen Block in sein Thema oder setzt
   `data-ground="warm"`.

   Die Bedeutungsfarben bleiben unberuehrt. Gruen auf warmem Grund
   steht etwas weniger scharf — das ist der Preis und er ist gewollt.
   ================================================================== */

[data-ground="warm"] {
  --ui-paper:      #faf9f7;
  --ui-surface:    #ffffff;
  --ui-surface-2:  #f2f0ec;
  --ui-surface-3:  #e9e5df;
  --ui-line:       #e2ded7;
  --ui-line-soft:  #eeebe5;
  --ui-ink:        #1c1a17;
  --ui-ink-soft:   #6b6459;
  --ui-ink-faint:  #9a9287;
}

@media (prefers-color-scheme: dark) {
  [data-ground="warm"] {
    --ui-paper:      #1a1815;
    --ui-surface:    #221f1b;
    --ui-surface-2:  #2a2621;
    --ui-surface-3:  #332e28;
    --ui-line:       #3a352e;
    --ui-line-soft:  #2c2822;
    --ui-ink:        #ece8e1;
    --ui-ink-soft:   #a8a093;
    --ui-ink-faint:  #776f63;
  }
}

[data-theme="dark"][data-ground="warm"] {
  --ui-paper:      #1a1815;
  --ui-surface:    #221f1b;
  --ui-surface-2:  #2a2621;
  --ui-surface-3:  #332e28;
  --ui-line:       #3a352e;
  --ui-line-soft:  #2c2822;
  --ui-ink:        #ece8e1;
  --ui-ink-soft:   #a8a093;
  --ui-ink-faint:  #776f63;
}

[data-theme="light"][data-ground="warm"] {
  --ui-paper:      #faf9f7;
  --ui-surface:    #ffffff;
  --ui-surface-2:  #f2f0ec;
  --ui-surface-3:  #e9e5df;
  --ui-line:       #e2ded7;
  --ui-line-soft:  #eeebe5;
  --ui-ink:        #1c1a17;
  --ui-ink-soft:   #6b6459;
  --ui-ink-faint:  #9a9287;
}

/* ==================================================================
   BEWEGUNG

   Wer Bewegung abbestellt hat, bekommt keine. Das gehoert in die
   Grundlage und nicht in jede Suite — gemessen hat es bisher keine
   einzige beruecksichtigt.
   ================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}