gwoe-antragspruefer/app/static/v2/tokens.css

/*
 * tokens.css — ECOnGOOD Corporate Design Tokens (Manual Juni 2024)
 * Alle v2-Komponenten referenzieren ausschließlich diese Variablen.
 * Kein Hardcoded Hex-Wert in Screens oder Primitives.
 */

:root {
  /* ── Vier Grundfarben (Manual Seite 5) ─────────────────────────── */
  --ecg-dark:  #5A5A5A;   /* Dunkelgrau  — primary text, PANTONE 425 U */
  --ecg-green: #889E33;   /* Grün        — accent, PANTONE 583 U       */
  --ecg-blue:  #009DA5;   /* Blau        — accent, PANTONE 320 U       */
  --ecg-light: #BFBFBF;   /* Hellgrau    — hairlines, infografiken      */
  --ecg-teal:  #009DA5;   /* Alias für --ecg-blue (Kompatibilität)      */

  /* ── Oberflächen ────────────────────────────────────────────────── */
  --paper:    #FFFFFF;
  --surface:  #F7F7F5;
  --hairline: #E6E6E3;

  /* ── Semantische Oberflächen-Aliase (Dark-Mode-fähig) ───────────── */
  --ecg-card-bg:   #FFFFFF;   /* Karten-Hintergrund (= --paper)          */
  --ecg-bg-subtle: #F7F7F5;   /* Subtiler Hintergrund (= --surface)      */
  --ecg-border:    #E6E6E3;   /* Rahmenfarbe (= --hairline)               */
  --ecg-text-muted: #8C8C8C;  /* Gedämpfter Text                          */

  /* ── Score-Band — Tints aus ECG-Grün / zurückhaltendem Warn-Rot ── */
  --score-high-bg:  #E8EED1;
  --score-high-fg:  #5E6F1F;
  --score-mid-bg:   #F1F1EE;
  --score-mid-fg:   #5A5A5A;
  --score-low-bg:   #F1DCDA;
  --score-low-fg:   #9A2A2A;

  /* ── Score-Chip-Farben (Fraktions-Tabelle) ──────────────────────── */
  --score-chip-green-bg: #CDDAA1;  /* = --redline-ins-bg */
  --score-chip-green-fg: #236020;  /* AA 5.1:1 auf chip-green-bg */
  --score-chip-mid-bg:   #fff3cd;
  --score-chip-mid-fg:   #7d5a00;
  --score-chip-red-bg:   #EFC9C3;  /* = --redline-del-bg */
  --score-chip-red-fg:   #a00000;

  /* ── Redline-Farben (nur für diff-Markup, nie als UI-Chrome) ────── */
  --redline-del-bg:  #EFC9C3;
  --redline-ins-bg:  #CDDAA1;
  --redline-contra:  #9A2A2A;

  /* ── Typografie ─────────────────────────────────────────────────── */
  --font-sans: "Avenir Next", "Avenir", "Nunito Sans", Arial, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Mono", monospace;

  /* ── Spacing-Raster (4-px-Basis) ───────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ── Layout ─────────────────────────────────────────────────────── */
  --sidebar-width: 230px;
  --content-max:  1180px;
  --breakpoint-mobile: 900px;

}

/* ── Dark-Mode-Variante ─────────────────────────────────────────────── */
[data-theme="dark"] {
  --ecg-dark:  #D0D0CC;
  --ecg-light: #444440;
  --paper:     #1A1A18;
  --surface:   #222220;
  --hairline:  #333330;

  /* ── Semantische Oberflächen-Aliase (Dark) ──────────────────────── */
  --ecg-card-bg:    #222220;   /* = --surface */
  --ecg-bg-subtle:  #2A2A28;
  --ecg-border:     #333330;   /* = --hairline */
  --ecg-text-muted: #888884;

  /* Score-Bänder im Dark Mode: Chroma halten, Lightness leicht erhöht */
  --score-high-bg:  #2A3010;
  --score-high-fg:  #AABE55;
  --score-mid-bg:   #252523;
  --score-mid-fg:   #C0C0BC;
  --score-low-bg:   #2E1515;
  --score-low-fg:   #E07070;

  /* ── Score-Chip-Farben (Dark) ───────────────────────────────────── */
  --score-chip-green-bg: #1E3010;
  --score-chip-green-fg: #8FBF6F;
  --score-chip-mid-bg:   #2A2510;
  --score-chip-mid-fg:   #C9A840;
  --score-chip-red-bg:   #301010;
  --score-chip-red-fg:   #E07070;

  /* ── Redline (Dark) — Chroma gedämpft, lesbar auf dunklem Ground ── */
  --redline-del-bg:  #3A1A18;
  --redline-ins-bg:  #1E2E0A;
  --redline-contra:  #C04040;
}