/**
 * Design-Tokens.
 *
 * Seit Phase 8.1 (REDESIGN.md) ein echtes System statt der 12 Ad-hoc-Werte aus
 * Phase 7.3. Zwei Bloecke:
 *
 *   1. Das neue System -- Marke, Grau-Rampe, semantische Farben, Typo-Skala,
 *      4px-Raster, Radien/Schatten/Breiten. Wird ab 8.2 (Typografie), 8.3
 *      (Shell) und 8.4 (Farbe) Schritt fuer Schritt von den Komponenten
 *      konsumiert.
 *   2. Die Alt-Tokens aus Phase 7.3 -- zunaechst unveraendert in ihren Werten,
 *      weil base.css/layout.css/components.css sie lasen. Dieser Block ist
 *      inzwischen leer:
 *
 *      - 8.2 (Typografie): --font-family-base (Tahoma) und --font-size-base
 *        (10pt) ersatzlos entfallen, base.css liest direkt --font-sans/--fs-base;
 *        --color-link auf --brand-700, --color-link-active durch
 *        --color-link-hover ersetzt.
 *      - 8.3 (Shell): --frame-width-main/-side/-forum (der 965px-Rahmen
 *        180+605+180 und die 735px-Forum-Box) und --color-hover (der gruene
 *        Block hinter den Nav-Kacheln) mit dem neuen Shell gegenstandslos.
 *      - 8.4 (Farbe): --color-border von #000000 auf --grey-200, der Alias
 *        --color-panel-bg aufgeloest.
 *
 *      Uebrig ist nur --color-page-bg, das keinen Altwert mehr traegt.
 *
 * Dark Mode ist fuer Phase 8 ausdruecklich draussen. Die Struktur ist aber
 * darauf vorbereitet: Komponenten lesen nur die semantischen Namen
 * (--color-text, --color-surface, ...), nie die Rampen direkt -- eine zweite
 * Palette waere spaeter eine reine @media (prefers-color-scheme)-Ergaenzung.
 */
:root {
  /* --- Marke -------------------------------------------------------------
     Abgeleitet aus dem Banner-Gruen und dem Zugwappen. Gold ist der Loewe im
     Neusser Stadtwappen und dient als Akzent (Nav-Aktivmarke), nicht als
     Flaechenfarbe. */
  --brand-900: #072F10;
  --brand-800: #0A4415;
  --brand-700: #0F5C1C;
  --brand-600: #17772A;
  --brand-100: #E8F3EA;
  --brand-50:  #F3F9F4;
  --accent-gold: #C9A227;

  /* Statusfarben, je Paar Vordergrund + zugehoerige Flaeche */
  --danger-600: #C0281E;  --danger-50: #FDECEA;
  --warn-600:   #B26A00;  --warn-50:   #FFF8E1;
  --ok-600:     #1F7A3D;  --ok-50:     #EAF5EE;

  /* --- Grau-Rampe --------------------------------------------------------
     Ersetzt ab 8.4 die acht ungeordneten Grautoene des Altbestands
     (#E0E0E0 #E5E5E5 #F0F0F0 #BDBDBD #C0C0C0 #909090 #A0A0A0 #595959). */
  --grey-50:  #F7F8F7;
  --grey-100: #EEF0EE;
  --grey-200: #E1E4E1;
  --grey-300: #C9CEC9;
  --grey-500: #767C76;
  --grey-700: #414641;
  --grey-900: #1B1F1B;

  /* --- Semantische Farben ------------------------------------------------
     Gemessene Kontraste: --brand-700 auf Weiss 8,1:1 · Weiss auf --brand-800
     11,4:1 · --accent-gold auf --brand-800 4,7:1 · --color-text-muted auf
     Weiss 6,4:1. */
  --color-text: var(--grey-900);
  --color-text-muted: #5A615A;
  --color-surface: #FFFFFF;
  /* Vordergrund auf einer Markenflaeche (Kopfleiste, Fuss, Knoepfe, Profilkarten-
     Titel). Phase 8.8: dafuer stand vorher 19-mal ein blankes #FFFFFF in
     layout.css/base.css/components.css -- genau die Sorte Direktzugriff, die der
     Kopfkommentar dieser Datei ausschliesst ("Komponenten lesen nur die
     semantischen Namen"). Ohne ein eigenes Token waere eine zweite Palette
     spaeter nicht an einer Stelle umschaltbar. */
  --color-on-brand: #FFFFFF;
  /* Bis Phase 8.4 stand hier ein hartes #000000 -- 1px Schwarz an jeder
     Umrandung im ganzen Baum, der auffaelligste Einzelzug des 2003er-Looks.
     Der Alias --color-panel-bg (wertgleich mit --color-surface) ist mit
     derselben Phase ganz entfallen. */
  --color-border: var(--grey-200);
  --color-border-strong: var(--grey-300);
  /* Eigener, dunklerer Wert fuer die Umrandung von Bedienelementen: die zaehlt
     nach WCAG 1.4.11 als "Grenze eines Bedienelements" und braucht 3:1 gegen
     die Flaeche. --color-border-strong misst nur 1,6:1 und wuerde ein
     Eingabefeld auf Weiss praktisch unsichtbar machen; --grey-500 liefert
     4,3:1. */
  --color-input-border: var(--grey-500);

  /* Seit 8.2 hier statt im Alt-Block: das Blau aus 2003 (#336699, 5,7:1) ist
     dem Markengruen gewichen. --color-link-active (#000000, "Link wird beim
     Hover schwarz") ist ersatzlos entfallen -- der Hover-Zustand laeuft jetzt
     ueber die Unterstreichung, nicht ueber einen Farbwechsel, und dunkelt die
     Linkfarbe nur noch leicht ab. */
  --color-link: var(--brand-700);
  --color-link-hover: var(--brand-900);

  /* --- Raenge (Phase 8.4) ------------------------------------------------
     Die Adressliste faerbt Namen nach Rang ein (vorher <font color>). Die
     Altwerte verfehlten AA deutlich: #00AA00 (Leutnant) 3,1:1, #00AAAA
     (Passiv) 2,9:1. Gemessen gegen Weiss: Oberleutnant 5,9:1 · Leutnant
     8,2:1 · Feldwebel 8,3:1 · Passiv 6,4:1. "Schuetze" traegt wie bisher
     keine eigene Farbe. */
  --rang-oberleutnant: var(--danger-600);
  --rang-leutnant:     var(--brand-700);
  --rang-feldwebel:    #1F4E8C;
  --rang-passiv:       var(--color-text-muted);

  /* --- Typografie --------------------------------------------------------
     rem statt pt: pt ignoriert die Schriftgroessen-Einstellung des Browsers.
     Der Altbestand ist durchgehend pt (10pt Body / 9pt Inhalt ~ 12px) und
     wird in 8.2 auf diese Skala umgestellt. --font-display traegt den
     traditionelleren Charakter fuer Ueberschriften und kommt ohne Webfont
     aus; auf allen drei Plattformen vorhanden oder metrisch substituiert. */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --font-display: Georgia, Cambria, "Noto Serif", "Times New Roman", serif;

  --fs-xs:   .8125rem;
  --fs-sm:   .875rem;
  --fs-base: 1rem;
  --fs-lg:   1.125rem;
  --fs-xl:   1.375rem;
  --fs-2xl:  1.75rem;
  --fs-3xl:  2.25rem;

  --lh-tight: 1.25;
  --lh-base:  1.6;

  /* Maximale Zeilenlaenge fuer Fliesstext (Phase 8.2). Im heutigen 605px-Rahmen
     wirkungslos -- 70ch sind je nach Schrift 620-700px --, greift also erst mit
     dem breiteren Shell aus 8.3. Bewusst schon hier gesetzt, weil die
     Fliesstext-Komponenten in dieser Phase ohnehin angefasst werden. */
  --measure: 70ch;

  /* --- Raster (4px) ------------------------------------------------------
     Ersetzt ab 8.5/8.6 die 38 verschiedenen px-Abstaende des Altbestands,
     von denen mehrere aus dem alten Tabellenlayout rueckwaerts gemessen sind
     (43px, 94px, 148px, 28px, 86px). */
  --space-1:  .25rem;
  --space-2:  .5rem;
  --space-3:  .75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-12: 3rem;
  --space-16: 4rem;

  --radius-sm: 3px;
  --radius:    6px;
  --radius-lg: 10px;

  --shadow-sm: 0 1px 2px rgb(0 0 0 / .06);
  --shadow-md: 0 2px 8px rgb(0 0 0 / .08), 0 1px 2px rgb(0 0 0 / .06);

  --transition: 150ms ease;

  /* Zielbreiten des neuen Shells (8.3). --width-content traegt Fliesstext,
     --width-wide Datentabellen und Galerie. */
  --width-content: 52rem;
  --width-wide:    68rem;
  --width-page:    75rem;

  /* Seitenhintergrund. Bis Phase 8.1 von keiner einzigen Regel gelesen -- er
     kam aus dem bgcolor-Attribut am <body> (Nebenbefund 7 in REDESIGN.md).
     Der Wert wanderte dabei vom freistehenden #F7F7F7 auf die Grau-Rampe
     (#F7F8F7, nicht unterscheidbar). */
  --color-page-bg: var(--grey-50);
}