/* SilverERP Design-Tokens — Quelle der Wahrheit für Farben.
   Beim Ändern einer Farbe: hier UND in den :root-Blöcken der Seiten anpassen. */
:root {
    /* Die Skin sagt der Engine, welche Skin sie ist. Ohne diese Angabe wählt
       -internal-light-dark() in jeder UA-Regel den hellen Zweig — die Engine sieht
       keine Farbe, sie sieht eine Angabe, die es nicht gibt —, und in der dunklen
       Oberfläche landet das helle Autofill-Bild samt schwarzer Schrift. Darüber
       hinaus folgen erst hierdurch Rollbalken, die Auswahlliste eines <select> und
       die eingebauten Wähler des Browsers der Skin. */
    color-scheme: dark;
    --bg-app: #171a1f;
    --is-check-bg: #1b1e24;
    --is-check-fg: rgba(255,255,255,0.07);
    --bg-sel: #282b32;
    --ico-nav: #757b81;
    --bg-panel: #1b1e24;
    --bg-table: #1b1e24;
    --bg-sunken: #14161b;
    --bg-card: #1c1f25;
    --bg-pop: #1e2128;
    --bg-menu: #1e2128;
    --bg-field: #14161b;
    --bg-field-off: #1e2127;
    --bg-well: #1f2226;
    --bg-row-hover: #20232a;
    --bg-chip: #23262d;
    --bg-field-press: #1d1f28;
    --bg-btn2: #22252c;
    --bg-btn2-hover: #2a2e36;
    --bg-btn2-hover2: #262934;
    --bg-avatar: #22262a;
    --bg-avatar2: #3a4046;
    --bg-rail: rgba(16,18,22,0.82);
    --bg-chrome: #101216;
    --bg-band: rgba(23,26,31,0.72);
    --fg-1: #f0f2f4;
    --fg-2: #e6e8ea;
    --fg-3: #d4d7da;
    --fg-3b: #cfd2d5;
    --fg-3c: #c9cccf;
    --fg-4: #c3c7cb;
    --fg-4b: #b6bbc0;
    --fg-4c: #aeb3b8;
    --fg-5: #a6abb0;
    --fg-6: #9ca1a6;
    --fg-6b: #9aa0a5;
    --fg-7: #8b9096;
    --fg-8: #7c8288;
    --fg-9: #6b7075;
    --fg-ph: #6b7075;
    --fg-10: #5f6469;
    --fg-10b: #5b6570;
    --fg-11: #4a4f54;
    --line-a: rgba(255,255,255,0.14);
    --line-b: rgba(255,255,255,0.12);
    --line-c: rgba(255,255,255,0.1);
    --line-d: rgba(255,255,255,0.09);
    --line-e: rgba(255,255,255,0.08);
    --line-f: rgba(255,255,255,0.07);
    --line-g: rgba(255,255,255,0.06);
    --hov-a: rgba(255,255,255,0.05);
    --hov-b: rgba(255,255,255,0.04);
    --hov-c: rgba(255,255,255,0.03);
    --hov-d: rgba(255,255,255,0.035);
    --line-h: rgba(255,255,255,0.11);
    --line-i: rgba(255,255,255,0.16);
    --line-j: rgba(255,255,255,0.18);
    --line-k: rgba(255,255,255,0.2);
    --line-l: rgba(255,255,255,0.22);
    --line-m: rgba(255,255,255,0.26);
    --line-n: rgba(255,255,255,0.28);
    --line-o: rgba(255,255,255,0.3);
    --ico-a: rgba(255,255,255,0.45);
    --ico-b: rgba(255,255,255,0.5);
    --ico-c: rgba(255,255,255,0.55);
    --ico-d: rgba(255,255,255,0.6);
    --sh-a: rgba(0,0,0,0.85);
    --sh-b: rgba(0,0,0,0.8);
    --sh-c: rgba(0,0,0,0.75);
    --sh-d: rgba(0,0,0,0.7);
    --sh-e: rgba(0,0,0,0.5);
    --sh-f: rgba(0,0,0,0.4);
    --aura-1: rgba(96,74,214,0.075);
    --aura-2: rgba(47,125,246,0.03);
    --fg-active: #ffffff;
    --ac-blue: #4ea6ff;
    --ac-blue-2: #7bbcff;
    --ac-blue-3: #7bbcff;
    --ac-blue-4: #cfe4ff;
    --ac-green: #4ec97a;
    --ac-green-2: #4ec97a;
    --ac-green-3: #4ec97a;
    --ac-amber: #f0993c;
    --ac-amber-2: #f0993c;
    --ac-amber-3: #e8b62a;
    --ac-red: #ef5a4d;
    --ac-red-2: #ef5a4d;
    --ac-red-3: #ef5a4d;
    --ac-red-4: #ef5a4d;
    --ac-violet: #a184f2;
    --ac-violet-2: #c0aefa;
    --ac-teal: #2fc9b5;
    --ac-indigo: #8b7bf7;
    --ai-bg: linear-gradient(150deg,#1a1430,#101a2e 45%,#0d1b22 75%,#160f2a);
    --ai-field: rgba(12,10,20,0.65);
    --ai-line: rgba(160,130,255,0.34);
    --ai-line-soft: rgba(160,130,255,0.18);
    --ai-line-strong: rgba(160,130,255,0.4);
    --ai-bubble: rgba(124,92,240,0.22);
    --ai-bubble-2: rgba(34,211,238,0.14);
    --ai-fg: #e6e8ea;
    --hov-btn: rgba(255,255,255,0.1);
    --bubble-fg: #0d1a26;
  }
  :root[data-skin="light"] {
    color-scheme: light;
    --bg-app: #fbfbfb;
    --is-check-bg: #f4f4f5;
    --is-check-fg: rgba(0,0,0,0.09);
    --bg-sel: #eeeeef;
    --ico-nav: #878d95;
    --bg-panel: #ffffff;
    --bg-table: #ffffff;
    --bg-sunken: #f4f4f5;
    --bg-card: #ffffff;
    --bg-pop: #ffffff;
    --bg-menu: #ffffff;
    --bg-field: #ffffff;
    --bg-field-off: #eeeeef;
    --bg-well: #eeeeef;
    --bg-row-hover: #eeeeef;
    --bg-chip: #eeeeef;
    --bg-field-press: #e8e8ea;
    --bg-btn2: #eeeeef;
    --bg-btn2-hover: #e4e4e6;
    --bg-btn2-hover2: #e0e5ec;
    --bg-avatar: #dfe4ea;
    --bg-avatar2: #c9d0d8;
    --bg-rail: rgba(255,255,255,0.86);
    --bg-chrome: #f3f3f4;
    --bg-band: rgba(255,255,255,0.78);
    --fg-1: #14171b;
    --fg-2: #1c2025;
    --fg-3: #2c3138;
    --fg-3b: #333940;
    --fg-3c: #3a4047;
    --fg-4: #3f454c;
    --fg-4b: #4a5058;
    --fg-4c: #4e545c;
    --fg-5: #525860;
    --fg-6: #5a6068;
    --fg-6b: #5f656d;
    --fg-7: #666c74;
    --fg-8: #6e747c;
    --fg-9: #7b818a;
    --fg-ph: #a9afb7;
    --fg-10: #888e97;
    --fg-10b: #8b919a;
    --fg-11: #9aa0a9;
    --line-a: rgba(15,20,30,0.16);
    --line-b: rgba(15,20,30,0.14);
    --line-c: rgba(15,20,30,0.12);
    --line-d: rgba(15,20,30,0.13);
    --line-e: rgba(15,20,30,0.11);
    --line-f: rgba(15,20,30,0.1);
    --line-g: rgba(15,20,30,0.09);
    --hov-a: rgba(15,20,30,0.055);
    --hov-b: rgba(15,20,30,0.04);
    --hov-c: rgba(15,20,30,0.03);
    --hov-d: rgba(15,20,30,0.035);
    --line-h: rgba(15,20,30,0.13);
    --line-i: rgba(15,20,30,0.18);
    --line-j: rgba(15,20,30,0.2);
    --line-k: rgba(15,20,30,0.22);
    --line-l: rgba(15,20,30,0.24);
    --line-m: rgba(15,20,30,0.28);
    --line-n: rgba(15,20,30,0.3);
    --line-o: rgba(15,20,30,0.34);
    --ico-a: rgba(15,20,30,0.45);
    --ico-b: rgba(15,20,30,0.48);
    --ico-c: rgba(15,20,30,0.5);
    --ico-d: rgba(15,20,30,0.55);
    --sh-a: rgba(15,23,42,0.16);
    --sh-b: rgba(15,23,42,0.14);
    --sh-c: rgba(15,23,42,0.13);
    --sh-d: rgba(15,23,42,0.12);
    --sh-e: rgba(15,23,42,0.09);
    --sh-f: rgba(15,23,42,0.07);
    --aura-1: rgba(96,74,214,0.1);
    --aura-2: rgba(47,125,246,0.07);
    --fg-active: #0b0e13;
    --ac-blue: #1d6fd0;
    --ac-blue-2: #1a63bb;
    --ac-blue-3: #1a63bb;
    --ac-blue-4: #12447f;
    --ac-green: #1f8a4c;
    --ac-green-2: #1f8a4c;
    --ac-green-3: #1f8a4c;
    --ac-amber: #ef7a12;
    --ac-amber-2: #ef7a12;
    --ac-amber-3: #d99b06;
    --ac-red: #c0392c;
    --ac-red-2: #c0392c;
    --ac-red-3: #c0392c;
    --ac-red-4: #c0392c;
    --ac-violet: #6b46c1;
    --ac-violet-2: #6b46c1;
    --ac-teal: #0d857a;
    --ac-indigo: #4a44c6;
    --ai-bg: linear-gradient(150deg,#f2effc,#eaf1fd 45%,#e9f6fa 75%,#f1ecfb);
    --ai-field: rgba(255,255,255,0.85);
    --ai-line: rgba(108,78,205,0.3);
    --ai-line-soft: rgba(108,78,205,0.16);
    --ai-line-strong: rgba(108,78,205,0.38);
    --ai-bubble: rgba(124,92,240,0.14);
    --ai-bubble-2: rgba(20,150,170,0.12);
    --ai-fg: #1c2025;
    --hov-btn: rgba(15,20,30,0.055);
    --bubble-fg: #ffffff;
  }
  
/* ── Semantische Aliase ────────────────────────────────────────────
   Neue Flächen und Texte nutzen diese Namen; die Basiswerte oben
   bleiben die Quelle der Wahrheit und ziehen beide Skins mit. */
:root {
  /* Text */
  --text-heading: var(--fg-1);
  --text-value: var(--fg-2);
  --text-body: var(--fg-4);
  --text-label: var(--fg-4);
  --text-meta: var(--fg-8);
  --text-placeholder: var(--fg-ph);
  --text-disabled: var(--fg-9);
  --text-link: var(--ac-blue);
  --text-on-accent: #ffffff;

  /* Flächen */
  --surface-chrome: var(--bg-chrome);
  --surface-content: var(--bg-app);
  --surface-card: var(--bg-card);
  --surface-table: var(--bg-table);
  --surface-field: var(--bg-field);
  --surface-field-off: var(--bg-field-off);
  --surface-popover: var(--bg-pop);
  --surface-chip: var(--bg-chip);
  --surface-selected: var(--bg-sel);
  --surface-row-hover: var(--bg-row-hover);
  --surface-band: var(--bg-band);

  /* Linien */
  --border-field: var(--line-d);
  --border-field-hover: var(--line-i);
  --border-field-focus: var(--line-o);
  --border-section: var(--line-e);
  --border-divider: var(--line-f);

  /* Interaktion */
  --hover-surface: var(--hov-btn);
  --icon-nav: var(--ico-nav);
  --icon-quiet: var(--fg-5);

  /* Akzente */
  --accent-primary: var(--ac-blue);
  --accent-success: var(--ac-green);
  --accent-warning: var(--ac-amber);
  --accent-favorite: var(--ac-amber-3);
  --accent-danger: var(--ac-red);
  --accent-info: var(--ac-teal);
  --accent-draft: var(--ac-indigo);
  --accent-billed: var(--ac-violet);

  /* Fundstelle — ein Teiltreffer im Text einer Zelle, gezeichnet als <mark>
     (.dc-match in tokens/base.css, match in components/ui.css). Abgeleitet aus der
     Markierung der Treffer in der Positionstabelle (Angebot Detail.dc.html, Z. 2380):
     --ac-blue zu 25 %, Schrift --ac-blue-4. Aus den Akzenten gebaut, trägt es beide
     Skins. Kontrast des Textes über --bg-table dunkel 8.2:1, hell 6.9:1, über einer zu
     16 % getönten Zeile mindestens 5.5:1; test/t-liste.sh rechnet es nach. */
  --bg-match: color-mix(in srgb, var(--ac-blue) 25%, transparent);
  --fg-match: var(--ac-blue-4);

  /* Graphen — die Farben jeder Kennzahl und jedes Graphen (silvererp-spec Kapitel 60);
     gezeichnet mit den Utilities metric-… und chart-… in components/ui.css.
     Die Reihen bekommen ihre Farbe in der Folge, in der sie stehen, --chart-1 zuerst. Die
     Folge ist die des Diagramms im Dialog Chat (components/data/Chart.jsx, FRAME.md
     »Dialog Chat«): blau, violett, türkis, indigo, amber, als sechste der Ton von
     »Übrige«. Rot und Grün sind keine Reihe, sie tragen im System ihre Bedeutung. UX4
     färbt die Reihen eines Graphen ebenso aus den Akzenten (Dashboard.dc.html, Legende
     der Geschäftsentwicklung, Z. 1398–1403). Das Vorjahr ist --fg-10 zu 55 % wie der
     Balken des Vorjahrs in Kunden Adresse.dc.html (umsBars, Z. 2533) und zählt in der
     Folge nicht mit; ein negativer Wert ist --ac-red-4 wie die negative Veränderung dort
     (uTone, Z. 2484), in jeder Reihe. Aus den Akzenten und Schrifttönen gebaut, tragen sie
     beide Skins; test/t-kennzahlen.sh hält die Folge an Chart.jsx fest. */
  --chart-1: var(--ac-blue);
  --chart-2: var(--ac-violet);
  --chart-3: var(--ac-teal);
  --chart-4: var(--ac-indigo);
  --chart-5: var(--ac-amber);
  --chart-6: var(--fg-9);
  --chart-prior: color-mix(in srgb, var(--fg-10) 55%, transparent);
  --chart-negative: var(--ac-red-4);
}