/* ============================================================
   sAIrmo · Farb-Tokens
   ------------------------------------------------------------
   ERZEUGT — NICHT VON HAND AENDERN.
   Quelle: sAIrmo-Homepage/brand/tokens.json
   Neu erzeugen: cd sAIrmo-Homepage && node scripts/sync-brand.mjs

   Geltungsbereich: System A — sAIrmo-eigene Oberflaeche.
   NICHT fuer Mandanten-Markenfarben (System B, app/data/tenants/).
   Stand der Quelle: 2026-09-08
   ============================================================ */

:root {
  /* ---- grund ---- */
  --stein: #F4F2EF;       /* Seitengrund */
  --sand: #E6E2DB;        /* dekorative Trenner — NICHT für Rahmen bedienbarer Elemente (nur 1,16 auf Stein) */

  /* ---- neutral ---- */
  --kies: #D6D1C7;        /* Sekundaertext auf dunklem Grund */
  --kiesel: #BDB6A9;      /* Trenner in dichten Tabellen, deaktivierte Elemente */
  --grau: #8C8377;        /* Rahmen bedienbarer Elemente (Eingabefelder, Auswahl, Karten) */
  --schiefer: #6E675E;    /* Sekundaertext auf hellem Grund */

  /* ---- marke ---- */
  --petrol: #174557;      /* Primaerfläche für Sektionen */
  --deep: #0E2F3C;        /* Hero- und CTA-Stufe */
  --night: #0A2531;       /* Chips, Schrift auf Apricot. NICHT mehr der Footer — der ist seit 27.08.2026 hell (bg-stein) */
  --petrolhell: #266F87;  /* Zeichenfarbe: Wortmarke, Linien, Konturen — und die einzige Schriftrolle für Akzentwörter und Eyebrow-Zeilen (Entscheid 08.09.2026, Fassung 2; 5,07 auf Stein). Kein Fliesstext, Überschriften selbst stehen in Anthrazit */
  --apricot: #FFB27A;     /* DER Akzent: das AI der Wortmarke, CTAs, Hervorhebungen. Traegt immer dunkle Schrift */
  --apricot-hell: #FFC498; /* Hover-Stufe des Akzents auf DUNKLEM Grund — hellt auf statt abzudunkeln, weil der Knopf auf Petrol steht. Traegt wie Apricot immer dunkle Schrift */
  --petrolhell-tief: #1B5468; /* Hover-Stufe für Flächen in der Zeichenfarbe */
  --anthrazit: #1A1F24;   /* Fliesstext */

  /* ---- status ---- */
  --erfolg: #24713F;      /* bestaetigte Aktionen */
  --fehler: #A32C20;      /* Fehlermeldungen — bewusst dunkler und blauer als Koralle, damit sich Akzent und Störung nicht verwechseln */
  --warnung: #8A5A0F;     /* Warntext. Amber bleibt CTA und ist KEINE Warnfarbe */
  --fehler-hell: #FFB4A0; /* Fehler-/Grenzwerttext auf DUNKLEM Grund — auf hellem Grund unlesbar, dort gilt fehler */

  /* ---- flaeche ---- */
  --erfolg-flaeche: #DCEBE1; /* Untergrund einer Erfolgsmeldung */
  --warnung-flaeche: #F7E6C8; /* Untergrund eines Warnhinweises */
  --fehler-flaeche: #F4D9D4; /* Untergrund einer Fehlermeldung */

  /* ---- Tints ---- */
  --petrol-08: rgba(23, 69, 87, 0.08);
  --petrol-12: rgba(23, 69, 87, 0.12);
  --petrol-65: rgba(23, 69, 87, 0.65);
  --petrolhell-08: rgba(38, 111, 135, 0.08);
  --petrolhell-12: rgba(38, 111, 135, 0.12);
  --petrolhell-18: rgba(38, 111, 135, 0.18);
  --petrolhell-25: rgba(38, 111, 135, 0.25);
  --petrolhell-35: rgba(38, 111, 135, 0.35);
  --petrolhell-50: rgba(38, 111, 135, 0.5);
  --apricot-30: rgba(255, 178, 122, 0.3);
  --stein-12: rgba(244, 242, 239, 0.12);
  --stein-25: rgba(244, 242, 239, 0.25);
  --stein-50: rgba(244, 242, 239, 0.5);
  --stein-72: rgba(244, 242, 239, 0.72);

  /* ---- Semantik — in Komponenten diese verwenden, nicht die Rohfarben ---- */
  --text-body: var(--anthrazit);
  --text-heading: var(--anthrazit);
  --text-muted: var(--schiefer);
  --text-on-dark: var(--stein);
  --text-on-dark-soft: var(--kies);
  --text-on-amber: var(--night);
  --surface-base: var(--stein);
  --surface-card: #ffffff;
  --surface-inverse: var(--petrol);
  --border-rule: var(--sand);
  --border-strong: var(--grau);
  --border-field: var(--grau);
  --border-on-dark: var(--stein-50);
  --border-button: var(--petrol-65);
  --surface-on-dark: var(--stein-12);
  --accent: var(--apricot);
  --accent-pop: var(--apricot);
  --accent-wash: var(--petrolhell-08);
  --accent-hover: var(--petrolhell-12);
  --accent-soft: var(--petrolhell-18);
  --accent-line: var(--petrolhell-50);
  --accent-text: var(--petrolhell);
  --focus-ring: var(--night);
  --focus-ring-outer: var(--apricot);
  --status-success-fg: var(--erfolg);
  --status-success-line: var(--erfolg);
  --status-warning-fg: var(--warnung);
  --status-warning-line: var(--warnung);
  --status-error-fg: var(--fehler);
  --status-error-line: var(--fehler);
  --status-success-bg: var(--erfolg-flaeche);
  --status-warning-bg: var(--warnung-flaeche);
  --status-error-bg: var(--fehler-flaeche);
}

/* ---- Uebergangs-Aliase: alte Namen aus der Zeit vor dem Redesign.
   Neuer Code nutzt die Namen oben. Werden entfernt, sobald der
   letzte Verweis weg ist. ---- */
:root {
  --pergament: var(--stein);
  --rule: var(--sand);
  --tiefenblau: var(--petrol);
  --tinte: var(--petrol);
  --koralle: var(--petrolhell);
  --terra: var(--petrolhell);
  --sandstein: var(--petrolhell);
  --amber: var(--apricot);
  --honig: var(--apricot);
  --koralle-tief: var(--petrolhell-tief);
}