/* =========================================================================
   TA Europe — Corporate Colours
   Quelle: TA_Europe_CI_Colour_Palette.pptx · Stand 14.08.2026
   Verbindlich für alle Web-Anwendungen, SaaS-Oberflächen und internen Tools.

   DIES IST DIE EINZIGE DATEI IM PROJEKT, IN DER FARBWERTE STEHEN DÜRFEN.
   In Komponenten ausschließlich Tokens oder semantische Aliase verwenden —
   damit eine CI-Anpassung an genau einer Stelle passiert (Regel 1).

   Die Dokumentation samt Kontrastwerten und Begründungen liegt daneben in
   README.md. Wer hier etwas ändert, ändert sie dort mit.
   ========================================================================= */

:root {
  /* --- 1. Primärpalette ------------------------------------------------ */
  --ta-dark-blue: #1B2742;
  --ta-white: #FFFFFF;
  --ta-black: #000000;

  /* --- 2. Sekundärpalette ---------------------------------------------- */
  --ta-strong-blue: #1F3872;
  --ta-moderate-blue: #5F7FC7;
  --ta-light-grey-blue: #C5D1F0;
  --ta-light-mint: #D2FDDC;
  --ta-green: #46AB50;
  --ta-dark-jade: #06373C;
  --ta-butter-yellow: #FED935;
  --ta-light-yellow: #FFF59C;
  --ta-dark-ruby-red: #B01A45;
  --ta-light-red: #E37D89;
  --ta-dark-purple: #79468E;
  --ta-light-purple: #C7A7D6;

  /* --- 3. Semantische Aliase — nur diese in Komponenten verwenden ------- */
  --ta-color-bg: var(--ta-white);
  --ta-color-surface-inverse: var(--ta-dark-blue);
  --ta-color-text: var(--ta-dark-blue);
  --ta-color-text-inverse: var(--ta-white);
  --ta-color-link: var(--ta-strong-blue);
  --ta-color-border: var(--ta-light-grey-blue);
  --ta-color-focus: var(--ta-strong-blue);

  --ta-color-success: var(--ta-green);
  --ta-color-success-bg: var(--ta-light-mint);
  --ta-color-warning: var(--ta-butter-yellow);
  --ta-color-warning-bg: var(--ta-light-yellow);
  --ta-color-danger: var(--ta-dark-ruby-red);
  --ta-color-danger-bg: var(--ta-light-red);
  --ta-color-info: var(--ta-moderate-blue);
  --ta-color-info-bg: var(--ta-light-grey-blue);

  /* --- 4. Reihenfolge für Datenvisualisierung -------------------------- */
  /* Aus der Gewichtung des Office-Themes. Bei mehr als acht Kategorien
     Muster oder Schraffuren ergänzen, keine weiteren Farben (Regel 6). */
  --ta-chart-1: var(--ta-dark-blue);
  --ta-chart-2: var(--ta-moderate-blue);
  --ta-chart-3: var(--ta-green);
  --ta-chart-4: var(--ta-butter-yellow);
  --ta-chart-5: var(--ta-dark-ruby-red);
  --ta-chart-6: var(--ta-dark-purple);
  --ta-chart-7: var(--ta-dark-jade);
  --ta-chart-8: var(--ta-light-grey-blue);

  /* --- 5. Grauabstufungen aus Dark Blue -------------------------------- *
   * Regel 2: keine frei gewählten Graustufen. Rahmen, Trennlinien und
   * inaktive Zustände werden über die Deckkraft von Dark Blue abgeleitet.
   *
   * Die Stufen sind nicht geraten, sondern am Kontrast gewählt (gemessen
   * gegen Weiß, WCAG 2.1):
   *
   *   0.03  #f8f9f9   1.05:1   nur Fläche
   *   0.06  #f1f2f4   1.12:1   nur Fläche
   *   0.12  #e4e5e8   1.26:1   nur Fläche — Rahmen (Beispiel der CI-Vorlage)
   *   0.24  #c8cbd2   1.62:1   nur Fläche — kräftigerer Rahmen
   *   0.42  #9fa4b0   2.50:1   Platzhalter, deaktiviert
   *   0.55  #828897   3.55:1   Großtext, Icons, Bedienelementgrenzen
   *   0.72  #5b6377   6.01:1   Text jeder Größe  ← Untergrenze für Fließtext
   *   0.88  #364159  10.21:1   Text
   *
   * Zwischen 0.42 und 0.72 liegt nichts, was kleinen Text tragen darf:
   * 0.62 erreicht nur 4.36:1 und verfehlt die 4,5 knapp. Nebentext steht
   * deshalb auf 0.72 und nicht heller.
   */
  --ta-navy-03: rgba(27, 39, 66, .03);
  --ta-navy-06: rgba(27, 39, 66, .06);
  --ta-navy-12: rgba(27, 39, 66, .12);
  --ta-navy-24: rgba(27, 39, 66, .24);
  --ta-navy-42: rgba(27, 39, 66, .42);
  --ta-navy-55: rgba(27, 39, 66, .55);
  --ta-navy-72: rgba(27, 39, 66, .72);
  --ta-navy-88: rgba(27, 39, 66, .88);

  /* --- 6. Zustände ------------------------------------------------------ *
   * Regel 3: keine neuen Farbwerte für Hover und Aktiv erfinden. Zulässig
   * ist der Wechsel innerhalb der Palette oder eine Deckkraftänderung
   * desselben Tokens. */
  --ta-hover-inverse: rgba(255, 255, 255, .10);   /* auf dunklem Grund */
  --ta-hover-flaeche: var(--ta-navy-06);          /* auf hellem Grund */
  --ta-color-selected-bg: var(--ta-light-grey-blue);

  /* --- 7. Abgeleitete Werte für helle Flächen -------------------------- *
   * Die Palette hat eine Lücke: sie enthält kein dunkles Grün und kein dunkles
   * Gelb. Green steht auf Weiß bei 2,92:1, Butter Yellow bei 1,38:1 — beide
   * dürfen dort keinen Text tragen. Ohne einen abgeleiteten Wert bleibt nur,
   * jede Erfolgs- und Warnmeldung in Dark Blue zu setzen; dann sieht man der
   * Zahl ihre Bedeutung nicht mehr an, und es braucht Ränder und Streifen als
   * Ersatz. Genau die sahen schlecht aus.
   *
   * Deshalb hier je eine abgedunkelte Fassung desselben Tokens — Regel 3 lässt
   * „Helligkeitsanpassungen desselben Tokens" ausdrücklich zu. Kein neuer
   * Farbton, dieselbe Farbe in dunkel.
   *
   *   --ta-green-text   Green  × 0,60   6,82:1 auf Weiß
   *   --ta-amber-text   Butter × 0,50   5,11:1 auf Weiß
   *
   * Die Tönungen sind dieselben Farben bei 10 bis 16 % Deckkraft: eine zarte
   * Fläche statt der kräftigen Sekundärfarbe. Light Red als Chipfläche war ein
   * sattes Rosa — für eine Statusmarke von 11 px zu laut.
   *
   * Die Ränder der Ampelpunkte sind die Füllung selbst, um 40 % abgedunkelt.
   * Ein Rand in fremdem Navy sah aus wie ein Fehler; die eigene Farbe dunkler
   * liest sich als Kante. Alle vier erreichen die 3:1 gegen Weiß, die WCAG
   * 1.4.11 für bedeutungstragende Grafik verlangt — auch das helle Gelb (3,78).
   */
  --ta-green-text: #2A6730;
  --ta-amber-text: #7F6D1B;

  --ta-tint-success: rgba(70, 171, 80, .10);
  --ta-tint-warning: rgba(254, 217, 53, .16);
  --ta-tint-danger: rgba(176, 26, 69, .10);
  --ta-tint-info: rgba(31, 56, 114, .10);
  --ta-tint-neutral: var(--ta-navy-06);

  --ta-rim-green: #2A6730;
  --ta-rim-amber: #988220;
  --ta-rim-red: #6A1029;
  --ta-rim-neutral: #767D90;

  /* --- 8. Form und Tiefe ------------------------------------------------ *
   * Die CI trifft zu Radius und Schatten keine Aussage. Gesetzt sind sie
   * trotzdem hier und nicht verstreut in app.css, damit eine Formänderung
   * ein Wert bleibt und keine Suchaktion wird.
   *
   * Zwei Schattenstufen, jeweils zweilagig: eine enge Lage zeichnet die
   * Kante, eine weite trägt die Tiefe. Eine einzelne Lage sieht entweder
   * hart aus oder verwaschen — beides las sich wie ein Rahmenersatz.
   *
   * Flächen trennen sich damit über Tiefe statt über einen Strich. Der
   * vorherige Weg — weiße Karte, 1-px-Rand bei 12 % Deckkraft, getönter
   * Kopfbalken — kam auf 1,12:1 zwischen Karte und Seite und 1,05:1
   * zwischen Kopf und Körper. Sichtbar war davon nur die Linie. */
  --ta-schatten-karte: 0 1px 2px rgba(27, 39, 66, .04), 0 4px 12px rgba(27, 39, 66, .06);
  --ta-schatten-hoch: 0 2px 4px rgba(27, 39, 66, .05), 0 12px 28px rgba(27, 39, 66, .10);
  --ta-radius: 8px;         /* Bedienelemente: Knöpfe, Felder, Chips */
  --ta-radius-gross: 12px;  /* Karten, Kacheln, Dialoge */

  /* --- 9. Typografie ---------------------------------------------------- *
   * Systemschrift, nicht DM Sans.
   *
   * Die CI nennt DM Sans als Hausschrift. Solange die WOFF2-Dateien nicht
   * im Projekt liegen, fällt der Stapel jedoch bis auf **Arial** durch —
   * gemessen: identische Renderbreite auf 0,1 px. Arial ist der Grund,
   * warum die Oberfläche wie ein Bericht wirkte und nicht wie ein Werkzeug.
   *
   * `system-ui` liefert die Schrift, für die das jeweilige Betriebssystem
   * gezeichnet ist — unter Windows 11 Segoe UI Variable, unter macOS SF Pro.
   * Sie sind für Bildschirmoberflächen entworfen: engere Laufweite, größere
   * x-Höhe, klare Ziffern. Kein Ladevorgang, kein Netz, kein CDN.
   *
   * Sobald DM Sans vorliegt, genügt ein `"DM Sans"` vor `system-ui` — die
   * `@font-face`-Regeln in app.css stehen bereits. */
  --ta-font-sans: system-ui, "Segoe UI Variable Text", "Segoe UI", Inter, Roboto,
    "Helvetica Neue", Arial, sans-serif;
}