/* AuxData.ai — neues Designsystem.
   Quelle: Figma "AuxData.ai — Core (Design System)", File DnFm0VWcCMZExdhrFeOaVK.
   Diese Datei wird NACH webapp.css eingebunden; die Kaskade haengt daran.
   Schicht 1: Primitives. Schicht 2: Semantik (Dark/Light). Schicht 3: Bruecke (Task 2). */

:root {
  /* violet */
  --ax-violet-50: #f3eefe;  --ax-violet-100: #e4dbfd; --ax-violet-200: #b79cf7;
  --ax-violet-300: #8b5cf6; --ax-violet-400: #6d28d9; --ax-violet-500: #4a0ab5;
  --ax-violet-600: #3f0b97; --ax-violet-700: #2f0c71; --ax-violet-800: #260562;
  --ax-violet-900: #1d054b; --ax-violet-950: #150539;

  /* cyan — traegt den neuen Akzent */
  --ax-cyan-100: #dff4fe; --ax-cyan-200: #b4e8ff; --ax-cyan-300: #7dd8ff;
  --ax-cyan-400: #38bdf8; --ax-cyan-500: #009fe3; --ax-cyan-600: #007ab0;
  --ax-cyan-700: #00517a; --ax-cyan-800: #003553; --ax-cyan-900: #082b3d;

  /* ink — die neutrale Rampe, violett getoent */
  --ax-ink-0: #ffffff;   --ax-ink-50: #f4f3f7;  --ax-ink-100: #e8e6ee;
  --ax-ink-200: #d2d0da; --ax-ink-300: #adabbb; --ax-ink-400: #817f92;
  --ax-ink-500: #55536a; --ax-ink-600: #35324a; --ax-ink-700: #242233;
  --ax-ink-800: #1a1826; --ax-ink-900: #12111c; --ax-ink-950: #0b0a14;
  --ax-ink-1000: #08070e;

  /* green */
  --ax-green-100: #dcfce7; --ax-green-200: #a7f3c6; --ax-green-400: #4ade80;
  --ax-green-500: #22c55e; --ax-green-600: #16a34a; --ax-green-700: #15803d;
  --ax-green-900: #12301e;

  /* amber */
  --ax-amber-100: #fef3c7; --ax-amber-200: #fde9ae; --ax-amber-400: #fcd34d;
  --ax-amber-500: #f59e0b; --ax-amber-600: #d97706; --ax-amber-800: #92400e;
  --ax-amber-900: #33260c;

  /* red */
  --ax-red-100: #fee2e2; --ax-red-200: #fcc5c5; --ax-red-400: #f87171;
  --ax-red-500: #ef4444; --ax-red-600: #dc2626; --ax-red-700: #b91c1c;
  --ax-red-900: #331416;

  /* teal */
  --ax-teal-100: #cffafe; --ax-teal-400: #22d3ee; --ax-teal-500: #06b6d4;
  --ax-teal-600: #0891b2; --ax-teal-800: #155e75; --ax-teal-900: #0b2c36;

  /* magenta */
  --ax-magenta-500: #b5179e; --ax-magenta-900: #2e0a28;
}

[data-design="new"] {
  --ax-bg-app: var(--ax-ink-950);
  --ax-bg-surface-1: var(--ax-ink-900);
  --ax-bg-surface-2: var(--ax-ink-800);
  --ax-bg-surface-3: var(--ax-ink-700);
  --ax-bg-elevated: var(--ax-ink-800);
  --ax-bg-nav: var(--ax-ink-900);
  --ax-bg-input: var(--ax-ink-800);
  --ax-bg-hover: var(--ax-ink-700);
  --ax-bg-table-header: var(--ax-ink-800);
  --ax-bg-overlay: var(--ax-ink-1000);
  --ax-border-default: var(--ax-ink-700);
  --ax-border-soft: var(--ax-ink-800);
  --ax-border-strong: var(--ax-ink-600);
  --ax-border-accent: var(--ax-cyan-700);
  --ax-text-primary: var(--ax-ink-100);
  --ax-text-secondary: var(--ax-ink-300);
  --ax-text-muted: var(--ax-ink-400);
  --ax-text-inverse: var(--ax-ink-1000);
  --ax-text-on-accent: var(--ax-ink-0);
  --ax-text-link: var(--ax-cyan-400);
  --ax-action-primary: var(--ax-cyan-500);
  --ax-action-primary-hover: var(--ax-cyan-400);
  --ax-action-primary-pressed: var(--ax-cyan-600);
  --ax-action-on-primary: var(--ax-ink-0);
  --ax-action-disabled: var(--ax-ink-700);
  --ax-accent-ai: var(--ax-violet-300);
  --ax-accent-knowledge: var(--ax-teal-500);
  --ax-accent-brand: var(--ax-violet-500);
  --ax-status-success: var(--ax-green-400);
  --ax-status-success-bg: var(--ax-green-900);
  --ax-status-warning: var(--ax-amber-400);
  --ax-status-warning-bg: var(--ax-amber-900);
  --ax-status-danger: var(--ax-red-500);
  --ax-status-danger-bg: var(--ax-red-900);
  --ax-accent-knowledge-bg: var(--ax-teal-900);
  --ax-action-primary-bg: var(--ax-cyan-900);
  --ax-text-muted-bg: var(--ax-ink-800);
  --ax-accent-ai-bg: var(--ax-violet-900);
  --ax-status-success-on-bg: var(--ax-green-200);
  --ax-status-warning-on-bg: var(--ax-amber-200);
  --ax-status-danger-on-bg: var(--ax-red-400);
  --ax-action-primary-on-bg: var(--ax-cyan-300);
  --ax-accent-ai-on-bg: var(--ax-violet-200);
  --ax-text-muted-on-bg: var(--ax-ink-300);
  --ax-accent-knowledge-on-bg: var(--ax-teal-400);
}

[data-design="new"][data-theme="light"] {
  --ax-bg-app: var(--ax-ink-50);
  --ax-bg-surface-1: var(--ax-ink-0);
  --ax-bg-surface-2: var(--ax-ink-50);
  --ax-bg-surface-3: var(--ax-ink-100);
  --ax-bg-elevated: var(--ax-ink-0);
  --ax-bg-nav: var(--ax-ink-0);
  --ax-bg-input: var(--ax-ink-0);
  --ax-bg-hover: var(--ax-ink-100);
  --ax-bg-table-header: var(--ax-ink-50);
  --ax-bg-overlay: var(--ax-ink-600);
  --ax-border-default: var(--ax-ink-200);
  --ax-border-soft: var(--ax-ink-100);
  --ax-border-strong: var(--ax-ink-300);
  --ax-border-accent: var(--ax-cyan-300);
  --ax-text-primary: var(--ax-ink-900);
  --ax-text-secondary: var(--ax-ink-600);
  --ax-text-muted: var(--ax-ink-500);
  --ax-text-inverse: var(--ax-ink-0);
  --ax-text-on-accent: var(--ax-ink-0);
  --ax-text-link: var(--ax-cyan-600);
  /* T1 (2026-09-15): action/primary hielt im hellen Theme nur 2,971 gegen
     weisses surface-1 -- unter der 3,0 fuer Bedienelemente UND unter der
     4,5 fuer die weisse Beschriftung darauf. cyan/600 haelt 4,761.
     Figmas Sammlung rechnet ihren hellen Modus an dieser Stelle nicht
     durch; die Abweichung ist deshalb bewusst und vom Auftraggeber
     entschieden. Hover und Pressed ruecken mit, damit Richtung und
     Schrittweite der Leiter erhalten bleiben (hell verdunkelt bei
     Interaktion). Der DUNKLE Block bleibt unveraendert: dort haelt
     cyan/500 gegen ink-900 6,296, und eine Abweichung ohne Not waere
     eine zweite.
     RUECKVERWEIS, nachgetragen mit dem Abschlussreview (2026-09-15): die
     Stelle, die diese Zahl ZUERST kannte, steht weiter unten im hellen
     Bruecken-Block bei --clr-accent (Kommentar "Kein Drift, sondern
     Rollentrennung"). Sie hat 2,971 damals ausgerechnet und ihr AUSWEICHEN
     lassen, statt sie zu heilen -- und sie sagt dort bis heute, action/primary
     bleibe fuer Flaechen unveraendert. Dieser Satz ist mit der Zeile hier
     widerlegt; der Berichtigungsvermerk dazu steht bei jenem Kommentar. Wer
     an einer der beiden Stellen etwas aendert, muss die andere mitlesen. */
  --ax-action-primary:         var(--ax-cyan-600);
  --ax-action-primary-hover:   var(--ax-cyan-700);
  --ax-action-primary-pressed: var(--ax-cyan-800);
  --ax-action-on-primary: var(--ax-ink-0);
  --ax-action-disabled: var(--ax-ink-200);
  --ax-accent-ai: var(--ax-violet-400);
  --ax-accent-knowledge: var(--ax-teal-600);
  --ax-accent-brand: var(--ax-violet-500);
  --ax-status-success: var(--ax-green-600);
  --ax-status-success-bg: var(--ax-green-100);
  --ax-status-warning: var(--ax-amber-600);
  --ax-status-warning-bg: var(--ax-amber-100);
  --ax-status-danger: var(--ax-red-600);
  --ax-status-danger-bg: var(--ax-red-100);
  --ax-accent-knowledge-bg: var(--ax-teal-100);
  --ax-action-primary-bg: var(--ax-cyan-100);
  --ax-text-muted-bg: var(--ax-ink-100);
  --ax-accent-ai-bg: var(--ax-violet-100);
  --ax-status-success-on-bg: var(--ax-green-700);
  --ax-status-warning-on-bg: var(--ax-amber-800);
  --ax-status-danger-on-bg: var(--ax-red-700);
  --ax-action-primary-on-bg: var(--ax-cyan-700);
  --ax-accent-ai-on-bg: var(--ax-violet-400);
  --ax-text-muted-on-bg: var(--ax-ink-600);
  --ax-accent-knowledge-on-bg: var(--ax-teal-800);

  /* T1: Figmas Sammlung "Chart" hat nur EINEN Modus, der helle ist dort nie
     gerechnet worden. series/1 ist cyan/500 und haelt gegen die helle
     Kartenflaeche 2,855 -- unter 3,0 fuer ein Datenzeichen. cyan/600 haelt
     auf DERSELBEN Kartenflaeche 4,577.
     HIER STAND "cyan/600 haelt dort 4,310" -- BERICHTIGT MIT DEM
     ABSCHLUSSREVIEW ZU T1 (2026-09-15). Die 4,310 sind echt gemessen, aber
     gegen --ax-ink-50 (#f4f3f7) und NICHT gegen die Kartenflaeche; das
     Woertchen "dort" verband eine richtige Zahl mit der falschen Flaeche.
     Die Kartenflaeche traegt 4,577 -- so gemessen an der Sonde
     ".config-card" und so gefuehrt in components.css am Balkenblock und im
     Entwicklungshandbuch (14-frontend.md). Task 3 hatte den Widerspruch in
     seinem eigenen Bericht gemeldet (Bedenken 6); nachgezogen wurde er erst
     jetzt. Die Aussage kippt dadurch nicht -- beide Werte liegen ueber der
     3,0 --, wohl aber ihr Bezug.
     Die uebrigen fuenf Serienfarben bekommen bewusst KEINEN
     hellen Wert: sie haben heute keinen Verbraucher ("new MoleculeBarChart"
     kommt genau einmal vor, organismspersonalusage.js:72). Faellig werden
     sie gemeinsam, sobald ein Mehrreihen-Diagramm entsteht. */
  --ax-chart-series-1: var(--ax-cyan-600);
}

/* Schicht 3 — Bruecke.
   Haengt die literalen Wurzeln aus webapp.css auf die Semantik um. Die 111
   per color-mix() abgeleiteten Tokens rechnen sich dadurch automatisch neu. */
[data-design="new"] {
  --clr-base:              var(--ax-bg-app);
  --clr-surface-1:         var(--ax-bg-surface-1);
  --clr-surface-3:         var(--ax-bg-surface-3);
  --clr-border:            var(--ax-border-default);
  --clr-row-hover:         var(--ax-bg-hover);
  --clr-accent:            var(--ax-action-primary);
  --clr-accent-btn:        var(--ax-action-primary);
  --clr-accent-btn-hover:  var(--ax-action-primary-hover);
  --clr-violet:            var(--ax-accent-ai);
  --clr-cyan:              var(--ax-accent-knowledge);
  --clr-sky:               var(--ax-text-link);
  --clr-text-primary:      var(--ax-text-primary);
  --clr-text-secondary:    var(--ax-text-secondary);
  --clr-text-inverse:      var(--ax-text-on-accent);
  --clr-white:             var(--ax-ink-0);
  --clr-danger:            var(--ax-status-danger);
  --clr-success:           var(--ax-status-success);
  --clr-warning:           var(--ax-status-warning);
  --clr-amber:             var(--ax-status-warning);
  --clr-amber-soft:        var(--ax-status-warning-on-bg);
  --clr-marketing-divider:   var(--ax-border-default);
  --clr-marketing-grad-from: var(--ax-action-primary);
  --clr-marketing-grad-to:   var(--ax-accent-ai);
  --clr-marketing-link:      var(--ax-text-link);
  --clr-marketing-text-link: var(--ax-text-link);
  --clr-marketing-thumb:     var(--ax-bg-surface-3);

  /* One-off tokens (Task 9) — see webapp.css :root for the legacy values. */
  --clr-voice-thinking:        var(--ax-cyan-500);  /* fixed primitive, not the brandable --clr-accent chain */
  --clr-text-faint:            var(--ax-text-muted);
  --clr-result-warning-border: var(--ax-status-warning);
  --clr-picker-border:         var(--ax-border-default);
  --clr-badge-ok-bg:           var(--ax-status-success-bg);
  --clr-badge-ok-fg:           var(--ax-status-success-on-bg);
  --clr-badge-fail-bg:         var(--ax-status-danger-bg);
  --clr-badge-fail-fg:         var(--ax-status-danger-on-bg);
  --clr-status-match-bg:       var(--ax-status-success-bg);
  --clr-status-match-fg:       var(--ax-status-success-on-bg);
  --clr-status-mismatch-bg:    var(--ax-status-danger-bg);
  --clr-status-mismatch-fg:    var(--ax-status-danger-on-bg);
  --clr-status-pending-bg:     var(--ax-status-warning-bg);
  --clr-status-pending-fg:     var(--ax-status-warning-on-bg);
  --clr-embed-bot-bg:          var(--ax-bg-surface-2);
  --clr-embed-user-grad:       linear-gradient(135deg, var(--ax-chat-bubble-user-from), var(--ax-chat-bubble-user-to));
  --clr-context-bar-track:     var(--ax-bg-surface-3);
  --clr-context-bar-ok:        var(--ax-status-success);
  --clr-context-bar-warn:      var(--ax-status-warning);
  --clr-context-bar-error:     var(--ax-status-danger);
  --clr-input-error-border:    var(--ax-status-danger);

  /* RGB-Begleiter: rgba() kann kein var()-Hex zerlegen, daher Tripel. */
  --clr-accent-rgb:         0, 159, 227;    /* cyan/500  #009fe3 */
  --clr-accent-btn-rgb:     0, 159, 227;
  --clr-violet-rgb:       139, 92, 246;     /* violet/300 #8b5cf6 */
  --clr-cyan-rgb:           6, 182, 212;    /* teal/500   #06b6d4 */
  --clr-text-rgb:         232, 230, 238;    /* ink/100    #e8e6ee */
  --clr-text-secondary-rgb: 173, 171, 187;  /* ink/300    #adabbb */
  --clr-text-muted-rgb:   129, 127, 146;    /* ink/400    #817f92 */
  --clr-danger-rgb:       239, 68, 68;      /* red/500    #ef4444 */
  --clr-success-rgb:       74, 222, 128;    /* green/400  #4ade80 */
  --clr-amber-rgb:        252, 211, 77;     /* amber/400  #fcd34d */
  --clr-warning-rgb:      252, 211, 77;

  /* RGB-Begleiter fuer Task-9-Folgetokens (rgb()/rgba()-Literale). */
  --clr-thinking-progress-rgb: 0, 159, 227;  /* fixed cyan/500 primitive, wie --clr-voice-thinking nicht ueber die brandbare --clr-accent-Kette */
  --clr-dictation-danger-rgb:  var(--clr-danger-rgb);
  --clr-result-warning-bg-rgb: var(--clr-warning-rgb);
  --clr-diff-added-rgb:        var(--clr-success-rgb);
  --clr-picker-selected-rgb:   var(--clr-accent-rgb);
}

[data-design="new"][data-theme="light"] {
  --clr-base:              var(--ax-bg-app);
  --clr-surface-1:         var(--ax-bg-surface-1);
  --clr-surface-3:         var(--ax-bg-surface-3);
  --clr-border:            var(--ax-border-default);
  --clr-accent-btn:        var(--ax-action-primary);
  --clr-accent-btn-hover:  var(--ax-action-primary-hover);
  --clr-violet:            var(--ax-accent-ai);
  --clr-cyan:              var(--ax-accent-knowledge);
  --clr-sky:               var(--ax-text-link);
  --clr-text-primary:      var(--ax-text-primary);
  --clr-text-secondary:    var(--ax-text-secondary);
  --clr-text-inverse:      var(--ax-text-on-accent);
  --clr-white:             var(--ax-ink-0);
  --clr-danger:            var(--ax-status-danger);
  --clr-success:           var(--ax-status-success);
  --clr-warning:           var(--ax-status-warning);
  --clr-amber:             var(--ax-status-warning);
  --clr-amber-soft:        var(--ax-status-warning-on-bg);

  /* Kein Drift, sondern Rollentrennung (Task 10, gegen ein Coordinator-Review
     verifiziert): das Legacy-Token --clr-accent vermengt Figmas zwei Cyan-
     Rollen. action/primary (cyan/500, ueber --ax-action-primary) ist fuer
     Flaechen/Buttons gedacht und bleibt dort unveraendert (--clr-accent-btn
     nutzt weiterhin action/primary). Aber ~77% der 156 direkten --clr-accent-
     Verwendungen in webapp.css/bulkselection.css/workfloweditor.css sind
     Text (43, color:) oder duenne Randlinien/Rings (77, border-Varianten,
     outline, box-shadow) — Rollen, fuer die Figma text/link (cyan/400 dark, cyan/600
     light) vorsieht, siehe --clr-sky oben. Nur 36 (23%) sind background/
     background-color, und darunter kein grossflaechiger Fuellbereich: Punkte,
     duenne Balken/Underlines, Badges/Pillen, blasse 6-16%-Hover-Tints, sowie
     wenige Verlaeufe, die --clr-accent stets mit --clr-accent-btn kombinieren
     (die Markenfarbe bleibt dort also ueber den zweiten Stop erhalten).
     cyan/500 gegen weisses surface-1 (Light, neues Design) haelt nur 2.971 —
     unter der 3.0-Schwelle fuer UI-Komponenten UND unter den 4.5, die fuer
     die Text-Verwendungen eigentlich gelten (WCAG 1.4.3). cyan/600 ueber
     --ax-text-link haelt 4.761 und erfuellt damit auch die strengere
     Text-Schwelle, nicht nur die UI-Komponenten-Schwelle. */

  /* BERICHTIGT MIT T1 (2026-09-15, nachgetragen im Abschlussreview) -- DER
     KOMMENTAR DARUEBER BLEIBT SICHTBAR STEHEN, ABER ZWEI SEINER AUSSAGEN
     SIND HEUTE WIDERLEGT, NICHT BLOSS VERALTET:

       1. "action/primary ... bleibt dort unveraendert (--clr-accent-btn
          nutzt weiterhin action/primary)" -- die Bindung stimmt noch,
          der SCHLUSS daraus nicht mehr. --ax-action-primary steht im
          hellen Theme seit T1 selbst auf cyan/600 (weiter oben in dieser
          Datei, im hellen Semantik-Block). --clr-accent-btn traegt hell
          damit #007ab0, nicht #009fe3.
       2. "cyan/500 gegen weisses surface-1 (Light, neues Design) haelt nur
          2.971" -- die ZAHL ist richtig und gemessen, aber sie beschreibt
          keinen Zustand des Produkts mehr. Wer nur diesen Block liest,
          schliesst, die helle Knopfflaeche liege weiterhin bei 2,971 --
          genau der Defekt, den T1 geheilt hat. Sie haelt heute 4,761.

     WARUM DER BLOCK TROTZDEM STEHEN BLEIBT: er ist die URSPRUNGSSTELLE. Er
     hat die 2,971 als erster ausgerechnet und ist ihr AUSGEWICHEN
     (--clr-accent auf --ax-text-link umgehaengt), statt die Wurzel zu
     heilen. T1 hat dieselbe Zahl zwei Jahre spaeter noch einmal gefunden
     und diesmal die Wurzel bewegt. Die Rollentrennung selbst gilt
     unveraendert weiter -- --clr-accent bleibt auf text/link; sie ist nur
     nicht mehr das, was die Knopfflaeche vor 2,971 bewahrt.

     LEHRE, die hierher gehoert: diese Begruendung stand in UNVERAENDERTEN
     Zeilen und tauchte deshalb in keinem Diff von T1 auf. Sie wurde erst
     im Abschlussreview gefunden, weil dort der BAUM gelesen wurde und
     nicht der Diff. Wer ein Fundamenttoken verschiebt, sucht repo-weit
     nach dem ALTEN WERT und nach dem NAMEN des Tokens -- nicht nur nach
     seinen var()-Verbrauchern. */
  --clr-accent:             var(--ax-text-link);

  /* ALTLAST, NICHT T1 -- BEWUSST NICHT ANGEFASST: --clr-accent haengt hell
     auf --ax-text-link = cyan/600 = #007ab0, dieses Tripel nennt aber
     cyan/500. Die Abweichung besteht seit Schritt 1 und ist aelter als
     dieses Vorhaben; sie zu beheben waere eine ungeplante Aenderung am
     Fundament mit eigenen Verbrauchern (webapp.css:228/229/233/436/1178/
     1235, Schatten, Fokusring und zwei Tints). Hier steht sie nur, damit
     der naechste Bearbeiter sie nicht fuer neu haelt. */
  --clr-accent-rgb:         0, 159, 227;    /* cyan/500  #009fe3 */

  /* MIT T1 MITGEWANDERT (2026-09-15, nachgetragen im Abschlussreview).
     HIER STAND "0, 159, 227" -- das war VOR T1 korrekt und ist erst durch
     dieses Vorhaben falsch geworden: --clr-accent-btn zeigt hell auf
     --ax-action-primary, und das ist seit T1 cyan/600 = #007ab0 =
     0, 122, 176. Ein RGB-Begleiter, der seiner Wurzel nicht folgt, faerbt
     die Raender der zwei Verbraucher (webapp.css:2999 und :13252,
     "rgba(var(--clr-accent-btn-rgb), .33)") in einem anderen Cyan als die
     Flaeche daneben.
     WARUM DIE VERBRAUCHERPRUEFUNG VON T1 IHN NICHT FAND: sie lief per grep
     ueber "var(--ax-action-primary)". Ein handgepflegtes Zahlen-Tripel
     nennt weder den Tokennamen noch ein var() und ist fuer diese Suche
     unsichtbar. Gegenprobe nachgezogen (Suche nach dem ALTEN WERT
     "0, 159, 227" und "#009fe3" statt nach den Verbrauchern): kein
     weiteres Tripel haengt an einem von T1 verschobenen Token.
     --clr-thinking-progress-rgb weiter unten bleibt auf cyan/500, weil es
     ausdruecklich am Primitiv haengt und nicht an der Akzentkette. */
  --clr-accent-btn-rgb:     0, 122, 176;    /* cyan/600  #007ab0 */
  --clr-violet-rgb:       109, 40, 217;     /* violet/400 #6d28d9 */
  --clr-cyan-rgb:           8, 145, 178;    /* teal/600   #0891b2 */
  --clr-text-rgb:          18, 17, 28;      /* ink/900    #12111c */
  --clr-text-secondary-rgb: 53, 50, 74;     /* ink/600    #35324a */
  --clr-text-muted-rgb:    85, 83, 106;     /* ink/500    #55536a */
  --clr-danger-rgb:       220, 38, 38;      /* red/600    #dc2626 */
  --clr-success-rgb:       22, 163, 74;     /* green/600  #16a34a */
  --clr-amber-rgb:        217, 119, 6;      /* amber/600  #d97706 */
  --clr-warning-rgb:      217, 119, 6;

  --clr-input-error-border:    var(--ax-status-danger);
  --clr-thinking-progress-rgb: 0, 159, 227;
  --clr-dictation-danger-rgb:  var(--clr-danger-rgb);
  --clr-result-warning-bg-rgb: var(--clr-warning-rgb);
  --clr-diff-added-rgb:        var(--clr-success-rgb);
  --clr-picker-selected-rgb:   var(--clr-accent-rgb);
}

/* Schriften. Selbst gehostet — kein CDN (DSGVO, Ladepfad). */
/* Inter: Variable Font, Gewichtsbereich 400 800; latin + latin-ext (Google Fonts v20). */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/Inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/Inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Geist Mono: Variable Font, Gewicht 400; latin + latin-ext (Google Fonts v6). */
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/GeistMono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/GeistMono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --ax-font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ax-font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
}

[data-design="new"] {
  --txt:  var(--ax-font-sans);
  --btxt: var(--ax-font-sans);
  /* Ersetzt das hartcodierte "Avenirltpro Black" — siehe webapp.css:1454. */
  --ax-font-display: var(--ax-font-sans);
}

/* Groessen und Typografie. In Schritt 1 bewusst NICHT auf die Legacy-Namen
   gebrueckt — das wuerde jedes Layout schlagartig verschieben. Schritt 2 zieht
   sie komponentenweise ein. */
:root {
  --ax-font-size-display-1: 64px; --ax-font-size-display-2: 48px;
  --ax-font-size-h1: 36px; --ax-font-size-h2: 28px;
  --ax-font-size-h3: 22px; --ax-font-size-h4: 18px;
  --ax-font-size-body-lg: 17px; --ax-font-size-body-md: 15px;
  --ax-font-size-body-sm: 13px; --ax-font-size-label-md: 13px;
  --ax-font-size-label-sm: 12px; --ax-font-size-label-caps: 11px;
  --ax-font-size-mono-sm: 12px;

  --ax-line-height-display-1: 68px; --ax-line-height-display-2: 54px;
  --ax-line-height-h1: 42px; --ax-line-height-h2: 34px;
  --ax-line-height-h3: 28px; --ax-line-height-h4: 26px;
  --ax-line-height-body-lg: 28px; --ax-line-height-body-md: 24px;
  --ax-line-height-body-sm: 20px; --ax-line-height-label-md: 18px;
  --ax-line-height-label-sm: 16px; --ax-line-height-label-caps: 14px;
  --ax-line-height-mono-sm: 18px;

  --ax-space-0: 0px;  --ax-space-1: 4px;  --ax-space-2: 8px;  --ax-space-3: 12px;
  --ax-space-4: 16px; --ax-space-5: 20px; --ax-space-6: 24px; --ax-space-8: 32px;
  --ax-space-10: 40px; --ax-space-12: 48px; --ax-space-16: 64px;
  --ax-space-20: 80px; --ax-space-24: 96px;

  --ax-radius-sm: 6px; --ax-radius-md: 10px; --ax-radius-lg: 14px;
  --ax-radius-xl: 20px; --ax-radius-full: 999px;

  --ax-size-control-sm: 28px; --ax-size-control-md: 36px; --ax-size-control-lg: 44px;
  --ax-size-field-md: 42px;
  --ax-size-icon-sm: 16px; --ax-size-icon-md: 20px; --ax-size-icon-lg: 24px;
  --ax-size-rail: 64px; --ax-size-sidebar: 225px; --ax-size-panel: 210px;
  --ax-size-container: 1280px;

  --ax-stroke-thin: 1px; --ax-stroke-thick: 2px;

  --ax-shadow-subtle: 0 1px 4px rgba(0, 0, 0, .20);
  --ax-shadow-card:   0 4px 20px rgba(0, 0, 0, .28);
  --ax-shadow-dialog: 0 8px 40px rgba(0, 0, 0, .60);
  --ax-glow-accent:   0 0 18px rgba(0, 158, 227, .35);
  --ax-glow-ai:       0 0 18px rgba(139, 92, 246, .35);
  --ax-focus-ring:    0 0 0 3px rgba(0, 158, 227, .45);

  --ax-chart-series-1: var(--ax-cyan-500);
  --ax-chart-series-2: var(--ax-violet-400);
  --ax-chart-series-3: var(--ax-amber-600);
  --ax-chart-series-4: var(--ax-teal-600);
  --ax-chart-series-5: var(--ax-magenta-500);
  --ax-chart-series-6: var(--ax-cyan-300);

  /* T2 (2026-09-16): der Verlauf der Nutzerblase als ROLLE, nicht als Farbe.
     Er hing bisher an zwei Primitiven (--ax-cyan-600/700, components.css) und
     im Embed an "action/primary" -- zwei Wirte, zwei verschiedene Verlaeufe.
     THEMEUNABHAENGIG MIT ABSICHT: an "action/primary" gebunden waere der
     Verlauf dunkel cyan/500 -> cyan/400, und die weisse Schrift darauf haelt
     dort nur 2,971 bzw. 2,142 -- beide unter der 4,5 fuer Text. Mit cyan/600
     -> cyan/700 haelt sie 4,761 bzw. 8,544, in BEIDEN Themes. */
  --ax-chat-bubble-user-from: var(--ax-cyan-600);
  --ax-chat-bubble-user-to:   var(--ax-cyan-700);
}

@media (max-width: 1024px) {
  :root {
    --ax-space-5: 18px; --ax-space-6: 20px; --ax-space-8: 28px;
    --ax-space-10: 32px; --ax-space-12: 40px; --ax-space-16: 48px;
    --ax-space-20: 56px; --ax-space-24: 64px;
    --ax-size-control-sm: 30px; --ax-size-control-md: 38px; --ax-size-control-lg: 46px;
    --ax-size-field-md: 44px;
    --ax-size-sidebar: 200px; --ax-size-panel: 190px; --ax-size-container: 960px;
  }
}

@media (max-width: 768px) {
  :root {
    --ax-font-size-display-1: 38px; --ax-font-size-display-2: 32px;
    --ax-font-size-h1: 28px; --ax-font-size-h2: 23px;
    --ax-font-size-h3: 19px; --ax-font-size-h4: 17px;
    --ax-font-size-body-lg: 16px;

    --ax-line-height-display-1: 42px; --ax-line-height-display-2: 38px;
    --ax-line-height-h1: 34px; --ax-line-height-h2: 29px;
    --ax-line-height-h3: 25px; --ax-line-height-h4: 24px;
    --ax-line-height-body-lg: 26px;

    --ax-space-3: 10px; --ax-space-4: 12px; --ax-space-5: 14px; --ax-space-6: 16px;
    --ax-space-8: 20px; --ax-space-10: 24px; --ax-space-12: 28px;
    --ax-space-16: 32px; --ax-space-20: 40px; --ax-space-24: 48px;

    --ax-radius-lg: 12px; --ax-radius-xl: 16px;
    --ax-size-control-sm: 32px; --ax-size-control-md: 44px; --ax-size-control-lg: 52px;
    --ax-size-field-md: 48px;
    --ax-size-icon-sm: 18px; --ax-size-icon-md: 22px; --ax-size-icon-lg: 26px;
    --ax-size-rail: 56px; --ax-size-sidebar: 280px; --ax-size-panel: 260px;
    --ax-size-container: 358px;
  }
}