/* ============================================================================
 * css/tokens/colors.css  —  Kanonische Farb-Tokens (v2 §6.3, §14.5)
 * Single-Hue (Brand) + Neutral + Semantik. Hardcodierte Hex-Werte NUR hier.
 *
 * Single-Source-of-Truth-Hinweis: Die Brand-Skala bewahrt die bestehenden
 * nback-Markenfarben als Ankerpunkte (kein visuelles Redesign), strukturiert
 * sie aber als Tint/Shade-Skala gemaess v2. Status-Farben als Tint/Shade.
 * Entscheidung dokumentiert in docs/decisions/0004-color-system.md.
 *
 * NICHT verdrahtet in Schritt 6 — Komponenten werden in Schritt 8 umgestellt.
 * ==========================================================================*/

:root {
  /* --- Brand (Single-Hue, Blau/Teal) — Ankerwerte = bestehende Marke ------ */
  --brand-50:  #f1f6f9;
  --brand-100: #d7e9f2; /* bestehend: --color-light-blue */
  --brand-200: #b3d4e0;
  --brand-300: #80b3ba; /* bestehend: --color-muted-blue */
  --brand-400: #4f97a8;
  --brand-500: #2b7483; /* bestehend: --color-medium-blue */
  --brand-600: #16537e; /* bestehend: --color-accent-blue */
  --brand-700: #193e4e; /* bestehend: --color-dark-blue */
  --brand-800: #122e3a;
  --brand-900: #0c1f28;

  /* --- Neutral ------------------------------------------------------------ */
  --neutral-0:   #ffffff;
  --neutral-50:  #f8fafc; /* bestehend: helle --bg-primary */
  --neutral-100: #f1f5f9; /* bestehend: helle --bg-secondary */
  --neutral-200: #e9ecef;
  --neutral-300: #dee2e6;
  --neutral-400: #ced4da;
  --neutral-500: #adb5bd;
  --neutral-600: #868e96;
  --neutral-700: #495057;
  --neutral-800: #343a40;
  --neutral-900: #212529;

  /* --- Status (Tint/Shade, immer mit Icon/Text kombinieren, v2 §4.3) ------ */
  --status-error:   #b3261e;
  --status-success: #1f7a4d;
  --status-warning: #8a6100;

  /* --- Semantische Rollen (zwei UI-Farben: weiss + custom, v2 §6.3) ------- */
  --color-bg-page:      var(--neutral-50);
  --color-bg-surface:   var(--neutral-0);
  --color-bg-inverse:   var(--brand-700);   /* dunkle Trainings-/Overlay-Flaeche */
  --color-text:         var(--neutral-900);
  --color-text-on-dark: var(--neutral-0);
  --color-text-muted:   var(--neutral-500);
  /* Muted-Text auf Brand-Flaechen (Karten brand-500): brand-300 erreicht dort
     nur 2.31:1 (WCAG-FAIL). brand-50 = 4.91:1 -> AA. (ADR 0005, Basisklassen 6/8) */
  --color-text-muted-on-surface: var(--brand-50);
  --color-border:       var(--neutral-200);
  --color-accent:       var(--brand-600);
  --color-accent-hover: var(--brand-500);   /* eine Stufe heller (v2 Premium) */
  --color-accent-active:var(--brand-700);
  --color-focus-ring:   var(--brand-600);

  /* --- Legacy-Bruecke (Schritt 8 entfernt die alten :root-Bloecke) --------
   * Erlaubt, bestehende Komponenten-CSS-Referenzen aufzuloesen, sobald die
   * alten lokalen :root-Definitionen geloescht werden. Temporaer. */
  --color-dark-blue:   var(--brand-700);
  --color-accent-blue: var(--brand-600);
  --color-medium-blue: var(--brand-500);
  --color-muted-blue:  var(--brand-300);
  --color-light-blue:  var(--brand-100);
}