/* ============================================================================= * design-tokens.css · ALs-Buchhaltung · Marke BridgeIT · Schema "Profil-Grün" * ----------------------------------------------------------------------------- * EINZIGE Farbquelle der App. Kein Hex-Wert darf ausserhalb dieser Datei in * Komponenten-CSS/HTML/JS stehen (docs/brand-guidelines.md Regel 1 · DESIGN-BRIEF §1.2). * * Farbentscheidung: DESIGN-BRIEF ⛳ ENTSCHIEDEN 2026-08-12 (live gemessen an bridgeit.at). * Ink #11202E · Petrol-Grün-Akzent #0E7C66 · helles UI + dunkles Theme. * NICHT das alte Navy/Kupfer-Set (verworfen). * * ----------------------------------------------------------------------------- * WARUM AUFGELÖSTE HEX-WERTE STATT color-mix() ZUR LAUFZEIT (geändert 15.08.2026) * ----------------------------------------------------------------------------- * Bis 0.10.2 standen hier `color-mix(in oklch, var(--c-primary), white 78.9%)` * & Co. Zwei GEMESSENE Gründe sprechen dagegen: * 1. `color-mix(in oklch, X, white P%)` hängt davon ab, ob der Browser den * Hue von Weiss als "powerless" behandelt (CSS Color 4). Ältere * Chromium-Stände interpolieren stattdessen gegen Hue 0 und färben die * Neutralen warm/rosa ein — dieselbe Tokendefinition sieht dann je nach * Browser anders aus. * 2. Selbst im korrekten Fall weicht das Browser-Ergebnis um eine Hex-Stufe * von der Referenzrechnung ab (gemessen, Chromium 148: `color-mix` → * #E1E4E6, Referenzrechnung → #E2E4E6). Der Kontrast-Test prüfte damit * einen anderen Wert als der Browser rendert. * Die Ableitungsformel ist deshalb NICHT verschwunden, sondern in * docs/design-tokens.json hinterlegt; `tests/unit/test_contrast.py` rechnet * jeden Wert aus seiner Quellfarbe nach UND vergleicht ihn mit dem Hex in * dieser Datei. Wer eine Quellfarbe ändert, bekommt einen roten Test statt * einer stillen Abweichung — die Bindung an die EINE Quellfarbe bleibt, nur * die Auflösung passiert jetzt vor dem Ausliefern statt im Browser. * Formel jeweils im Kommentar hinter dem Wert. * * ----------------------------------------------------------------------------- * FLÄCHENKONTRAST-KORRIDOR 1,25–1,45:1 (DESIGN-BRIEF §1.3) * ----------------------------------------------------------------------------- * Der Korridor gilt für REAL aneinandergrenzende Flächen. Nachgemessen sind das: * page→surface 1,378 (hell) / 1,430 (dunkel) Karte/Header/Footer auf dem Canvas * panel→surface 1,274 (hell) / 1,271 (dunkel) Tabellenkopf & Nav-Leiste an der Karte * border→surface 1,301 (hell) / 1,300 (dunkel) Linie auf der Karte * NICHT korridorgeprüft (bewusst subtil, dokumentiert statt erzwungen): * page→panel 1,082 / 1,125 Chrom auf Chrom * light→surface 1,121 / 1,095 Zebra-Zeile in der Karte * Das ist keine Bequemlichkeit, sondern Arithmetik: page und surface berühren * einander direkt (weisse Karte auf dem Canvas). Wären zusätzlich page→panel * UND panel→surface je ≥ 1,25, müsste page→surface ≥ 1,25² = 1,5625 sein — * also über dem Maximum 1,45. Ein dreistufiger Stapel kann den Korridor * paarweise nicht erfüllen, wenn die äusseren Stufen einander auch berühren. * Korrektur 15.08.2026: page lag vorher bei #C7CBCF = 1,631:1 zu Weiss — * ausserhalb des Korridors, und der Grund für den Eindruck "die weissen Karten * schweben zu kontrastreich auf zu dunklem Grund". Jetzt 1,378:1. * * ----------------------------------------------------------------------------- * ZWEI THEMES (Ausbaustufe eingelöst, 15.08.2026) * ----------------------------------------------------------------------------- * Umsetzung über `light-dark()` + `color-scheme` statt zweier duplizierter * Token-Blöcke: jeder Rollen-Token steht damit GENAU EINMAL mit beiden Werten * nebeneinander — ein Wert kann nicht mehr still auseinanderlaufen (genau die * Drift, die design-principles.md § Dual-Theme-Design-Tokens beschreibt). * • ohne `data-theme` am -> `color-scheme: light dark` * => Systemvorgabe (prefers-color-scheme) * • `data-theme="light"`/"dark" -> erzwingt das jeweilige Schema und * überschreibt die Systemvorgabe in BEIDE * Richtungen (public/js/shell.js::initTheme) * • `@media print` -> IMMER hell (Beleg-/Bilanz-Ausdrucke, * DESIGN-BRIEF §3.10) * Browser-Nachweis (Chromium 148, gemessen 15.08.2026): * CSS.supports('color','light-dark(red,blue)') === true. * * TOKEN-FAMILIEN NACH VERHALTEN GETRENNT (design-principles.md, ALs-SWD 2026-07): * --c-source-* = theme-UNABHÄNGIGE Quellfarben. Nur sie sind Handeingaben, * nur aus ihnen wird abgeleitet. Niemals direkt als UI-Farbe * verwenden — sonst folgt die Fläche dem Theme nicht. * --c-* = theme-ABHÄNGIGE Rollen-Tokens. Ausschliesslich diese * gehören in Komponenten-CSS. * * DUNKLE PALETTE — Herkunft und was daran GEMESSEN korrigiert wurde: * Geliefert (BridgeIT-Live-Tokens, DESIGN-BRIEF §1.12): Flächen #0F1E2E / * #16273A · Akzent #26B896 · Text #C8DFF0 · Border #253D52. * Übernommen wie geliefert: #0F1E2E (Seitengrund), #26B896 (Akzent), * #C8DFF0 (Text). * Verworfen: #16273A als zweite Fläche — gemessen liegt sie nur 1,112:1 * über #0F1E2E und damit deutlich unter der Korridor-Untergrenze 1,25. * Ebenso #253D52 als Linie (passt nur zu der verworfenen Fläche). Beide * sind aus derselben Quellfarbe neu abgeleitet. * Die Kartenfläche ist zusätzlich nach oben gedeckelt: `.btn-primary` setzt * --c-surface als Label auf --c-accent; das braucht AA 4,5:1 und erlaubt der * Karte höchstens die Helligkeit, die jetzt gesetzt ist (gemessen 4,705:1). * ============================================================================= */ :root { /* Ohne data-theme entscheidet die Systemvorgabe; die beiden Regeln weiter unten (data-theme) überschreiben das in beide Richtungen. */ color-scheme: light dark; /* ==== QUELLFARBEN — theme-unabhängig, einzige Handeingaben =============== * * Alles andere ist hieraus abgeleitet (Formeln in docs/design-tokens.json, * * je Token unten im Kommentar). Wer hier etwas ändert, ändert die ganze App * * und muss tests/unit/test_contrast.py erneut grün bekommen. */ --c-source-ink: #11202E; /* Marken-Ink, Quelle ALLER Flächen (hell+dunkel) */ --c-source-text: #1E2733; /* Fliesstext hell */ --c-source-accent: #0E7C66; /* Petrol-Grün, helles Theme */ --c-source-accent-dk: #26B896; /* Petrol-Grün, dunkles Theme (geliefert, exakt) */ --c-source-text-dk: #C8DFF0; /* Textfarbe dunkles Theme (geliefert, exakt) */ --c-source-negative: #B5462F; --c-source-warning: #C77D11; /* ==== Flächen-Stapel ==================================================== * * Rollen-Reihenfolge in BEIDEN Themes gleich (surface = höchste Ebene), * * nur die Helligkeitsrichtung dreht sich um. Ist-Werte oben im Kopf. */ --c-surface: light-dark(#FFFFFF, #2C3946); /* dunkel: mix(ink, white 13.30%) */ --c-light: light-dark(#F1F2F3, #253340); /* mix(ink, white 95.00% / 9.87%) · Zebra/Hover, bewusst subtil */ --c-panel: light-dark(#E2E4E7, #1A2836); /* mix(ink, white 89.40% / 4.36%) · panel→surface 1,274 / 1,271 */ --c-page: light-dark(#D9DCDE, #0F1E2E); /* hell: mix(ink, white 85.79%) · dunkel: geliefert · page→surface 1,378 / 1,430 */ /* Linie: im Hellen DUNKLER als die Karte, im Dunkeln HELLER — sonst verschwindet sie. Der Korridor misst den Betrag, nicht die Richtung. */ --c-border: light-dark(#DFE2E4, #3D4A57); /* mix(ink, white 88.30% / 21.74%) · border→surface 1,301 / 1,300 */ /* ==== Marken-/Ink-Rollen ================================================ * * Ink = Überschriften, Logo, dunkle Betonungsflächen. Im dunklen Theme * * kippt die Rolle zwangsläufig auf einen HELLEN Ton (sonst wären h1/h2/h3 * * und das Logo unsichtbar); `.btn-ink` wird dadurch zum hellen Knopf mit * * dunklem Label — gemessen 8,55:1, also weiterhin korrekt. */ --c-primary: light-dark(#11202E, #CCE2F1); /* dunkel: mix(text-dk, white 8%) */ --c-primary-dark: light-dark(#0A1722, #D3E5F3); /* dunkel: mix(text-dk, white 20%) */ --c-accent: light-dark(#0E7C66, #26B896); /* 5,13:1 / 4,71:1 auf der Karte */ /* Akzent als TEXT/Icon — im Dunkeln muss er dafür heller sein als die Füllfarbe (gemessen: #26B896 als Text auf der Karte 4,71:1, der abgeleitete Ton 5,53:1). Gleiche Rollentrennung wie im hellen Theme, nur in die andere Richtung. */ --c-accent-ink: light-dark(#0A5C4A, #5BC4A6); /* dunkel: mix(accent-dk, white 15.80%) */ /* Teal-Tint (Chips, Bänder, Icon-Flächen). Im Dunkeln ein TIEFER Tealton UNTER der Kartenfläche: ein aufgehellter Tint würde die tonale Fläche heller als die Karte machen und den darauf liegenden Ink unlesbar drücken (app.css leitet den Fehler-Ink als mix(--c-negative, black 10%) ab). */ --c-primary-pale: light-dark(#E1EEE9, #032B21); /* dunkel: mix(accent-dk, black 62.88%) */ /* ==== Textstufen ======================================================== * * Hell: `muted` ist seit 15.08. aus --c-source-text abgeleitet statt fix * * #64707E — auf dem (korrigierten) Seitengrund erreichte der alte Wert nur * * 3,66:1 und verfehlte AA für kleine Meta-Texte. Jetzt 4,54:1 dort und * * 6,26:1 auf der Karte; der Abstand zu --c-text-mid (8,10:1) bleibt * * deutlich, die dreistufige Textleiter also erhalten. * * Dunkel: aus der gelieferten Textfarbe abgedunkelt, bis die Stufe gerade * * noch ihr Ziel gegen die HELLSTE dunkle Fläche hält (6,0 / 4,75). */ --c-text: light-dark(#1E2733, #C8DFF0); /* 15,07:1 / 8,55:1 auf der Karte */ --c-text-mid: light-dark(#45515E, #A8BCCA); /* 8,10:1 / 6,06:1 · dunkel: mix(text-dk, black 12.1%) */ --c-text-muted: light-dark(#5A616B, #95A7B4); /* 6,26:1 / 4,79:1 · mix(text, white 30.3%) / mix(text-dk, black 19.5%) */ /* ==== Statusfarben nach ROLLE =========================================== * * Dunkel: aufgehellt, bis 4,5:1 auf der Karte erreicht ist — ein dunkles * * Rot/Orange kommt dort nur auf ~2:1 (gemessen). Die Aufhellung per * * OKLCH-Mischung senkt zwangsläufig auch die Sättigung; das ist der Preis * * für AA auf dunklem Grund und bewusst so gewählt. */ --c-positive: var(--c-accent); --c-negative: light-dark(#B5462F, #D89080); /* 5,41:1 / 4,66:1 · dunkel: mix(negative, white 39.4%) */ --c-warning: light-dark(#C77D11, #D39650); /* 3,30:1 / 4,66:1 · dunkel: mix(warning, white 18.6%) */ /* hell: NUR Icon/Large/tonaler Grund, NIE kleiner Fliesstext (§1.4) */ /* ==== Interaktionszustände ============================================== * * Hell: abdunkeln. Dunkel: AUFhellen — ein dunkler gemischter Hover würde * * das Label (--c-surface auf --c-accent) unter AA drücken (gemessen). */ --c-accent-hover: light-dark(#0A6855, #51C1A2); /* mix(accent, black 12% / white 12%) */ --c-accent-active: light-dark(#075747, #6AC8AC); /* mix(accent, black 22% / white 22%) */ --c-primary-hover: var(--c-primary-dark); /* folgt dem Theme automatisch mit */ --c-focus: var(--c-accent-ink); /* Fokus-Ring — AA-lesbar in beiden Themes */ /* ==== Tonale Status-Hintergründe + lesbare Ink-Töne (§1.4-Muster) ======== * * Grund = Tönung der Statusfarbe; Text = separat AA-geprüfter Ton derselben * * Farbe (nie die Statusfarbe selbst als Fliesstext). * * Dunkel: die Gründe liegen UNTER der Karte. Gemessen, nicht Geschmack: * * app.css leitet den Fehler-Ink als mix(--c-negative, black 10%) ab — auf * * einem AUFgehellten Grund käme der nur auf 2,98:1, auf dem abgesenkten * * Grund auf 4,69:1. */ --c-positive-pale: light-dark(#E9F1EF, #032B21); /* mix(accent, white 90% / black 62.88%) */ --c-negative-pale: light-dark(#FAECE9, #34201B); /* mix(negative, white 90% / black 62.94%) */ --c-warning-pale: light-dark(#F8EDE1, #33210D); /* mix(warning, white 86% / black 62.88%) */ /* Warn-Ink: hell ein eigener dunkler Ton (7,1:1 auf warning-pale); dunkel genügt --c-warning selbst bereits (6,3:1 auf dem abgesenkten Grund) — derselbe Wert, bewusst kein zusätzlicher Ton ohne Nutzen. */ --c-warning-ink: light-dark(#714505, #D39650); /* ==== Ink-Header (DESIGN-SYSTEM-2026 §3.2, freigegeben 16.08.2026) ====== * * Der dunkle Marken-Anker oben. Bewusst AUSSERHALB des Flächen-Korridors * * (Kante zu page 12,00:1): der Header ist CHROME-Anker, kein benachbartes * * Flächenpaar der Arbeitsfläche — dieselbe Logik wie bridgeit.at. * * Messwerte (Anhang DESIGN-SYSTEM-2026): fg/bg 16,54:1 · dim/bg 8,44:1 · * * accent/bg 6,60:1 · chip/bg 1,25:1 (innere Tönung, Weiß darauf 13,26:1). */ --c-header-bg: light-dark(#11202E, #0A1622); --c-header-fg: light-dark(#FFFFFF, #C8DFF0); --c-header-dim: light-dark(#A8BCCA, #8FA5B5); --c-header-accent: light-dark(#26B896, #26B896); --c-header-chip: light-dark(#1C3242, #152534); /* ==== Datenvisualisierung (DESIGN-SYSTEM-2026 §3.3–3.6, validiert) ====== * * Kategoriale Slots 1–4 (dataviz-Validator: Band/Chroma/CVD/Kontrast alle * * bestanden, Protokoll im Anhang des Design-Systems). --c-viz-1 ist die * * chart-getunte Petrol-Stufe (das UI-Petrol #0E7C66 fiel als Chart-Farbe * * durch: Chroma 0,097 < 0,10) — zwei Rollen, zwei Tokens. * * Serienfarben sind NIE Textfarben; Labels tragen Text-Tokens. */ --c-viz-1: light-dark(#0B8A6D, #189B7E); /* Petrol — Serie 1, 4,31 / 3,39:1 */ --c-viz-2: light-dark(#4467C6, #5A7FD6); /* Indigo — Serie 2, 5,25 / 3,06:1 */ --c-viz-3: light-dark(#B98A1F, #BE8B26); /* Amber — Serie 3, 3,13 / 3,88:1 */ --c-viz-4: light-dark(#A34E86, #B972AB); /* Beere — Serie 4, 5,26 / 3,40:1 */ --c-viz-other: light-dark(#8A939C, #6E7B87); /* "Sonstige"-Bucket, nie 5. Buntfarbe */ --c-viz-grid: light-dark(#E8EAEC, #3A4653); /* Hairline 1px, 1,21 / 1,23:1 zur Karte */ --c-viz-axis: light-dark(#C9CED2, #4C5A68); /* Nulllinie/Baseline, 1,59 / 1,67:1 */ /* Sequenzielle Petrol-Rampe (§3.4) — nur für kontinuierliche Magnitude (Heat-Kalender); Stufe 0 einer Heat-Skala ist --c-light. */ --c-viz-seq-2: light-dark(#B2DFD2, #20604F); --c-viz-seq-4: light-dark(#5FB8A1, #2E937A); --c-viz-seq-5: light-dark(#2E9D83, #3FAE91); --c-viz-seq-6: light-dark(#0E7C66, #66CBAF); /* ---- Typografie ------------------------------------------------------- */ --font-base: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-num: var(--font-base); /* Zahlen im selben Stack, aber tabular (siehe utils) */ /* Fluid-Skala mit rem-Anteil im Mittelwert (zoombar, A11y §1.5) */ --fs-eyebrow: 0.6875rem; /* 11px Versalien-Label */ --fs-caption: 0.8125rem; /* 13px Meta */ --fs-body: 1rem; /* 16px Fliesstext */ --fs-lead: clamp(1.0625rem, 1rem + 0.4vw, 1.1875rem); --fs-h3: clamp(1.125rem, 1.02rem + 0.5vw, 1.375rem); --fs-h2: clamp(1.375rem, 1.1rem + 1.4vw, 1.9rem); --fs-h1: clamp(1.75rem, 1.35rem + 2vw, 2.6rem); --fw-normal: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; --fw-black: 800; --lh-tight: 1.12; --lh-snug: 1.35; --lh-body: 1.6; --ls-eyebrow: 0.12em; /* Versalien weiter */ --ls-head: -0.015em; /* grosse Headlines enger */ --measure: 68ch; /* max. Lesezeilenlänge */ /* ---- Abstände (4px-Raster) -------------------------------------------- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-8: 3rem; --sp-10: 4rem; /* ---- Radien / Linien / Schatten --------------------------------------- * * Schatten im Dunkeln kräftiger und neutral schwarz: ein Ink-getönter * * Schatten ist auf dunklem Grund praktisch unsichtbar. */ --radius-sm: 6px; --radius: 10px; --radius-lg: 16px; --radius-pill: 999px; --border-w: 1px; --shadow-sm: 0 1px 2px light-dark(rgba(17, 32, 46, 0.06), rgba(0, 0, 0, 0.40)); --shadow: 0 2px 8px light-dark(rgba(17, 32, 46, 0.08), rgba(0, 0, 0, 0.50)); --shadow-lg: 0 8px 28px light-dark(rgba(17, 32, 46, 0.12), rgba(0, 0, 0, 0.60)); --ring: 0 0 0 3px color-mix(in oklch, var(--c-accent-ink), transparent 70%); /* ---- Layout-Maße ------------------------------------------------------ */ /* Header 56px statt 60px (DESIGN-SYSTEM-2026 §3.2 — der Ink-Anker darf kompakt sein, H5 spart ohnehin Kopfhöhe). */ --header-h: 56px; --nav-h: 48px; /* Vollbreiten-Kappe 1840px statt 1180px (DESIGN-SYSTEM-2026 §5.1, freigegeben mit der Design-Vorschau 16.08.2026): 27"-Monitor minus Fensterrahmen bei 2560px/125% — gemessene Arbeitsbreite, kein Zwang (Kappe, kein randloses Fluten: ungekappte Tabellenzeilen auf 2560px erzeugen ~40cm Blickweg Buchungstext -> Betrag). */ --content-max: 1840px; --pad-inline: clamp(20px, 2.5vw, 56px); /* fluides Seitenpolster (§5.1) */ --z-header: 100; --z-nav: 90; --z-dialog: 200; --z-toast: 300; --tap-min: 44px; /* Non-negotiable Touch-Trefferfläche (§1.7) */ /* ---- Bewegung (Seitenübergang "Fluid", DESIGN-VORSCHAU Abschnitt 8, freigegeben 16.08.2026 — ersetzt die bisherige "dezent"-Stufe 130/180ms). Werte exakt aus der abgenommenen Vorschau: alte Seite 230ms raus, neue 360ms rein ("Liquid Glance" — weiches Ineinanderfliessen mit kurzem Tiefenschärfe-Moment, Bewegungsqualität statt Milchglas-Textur). ------ */ --motion-page-out: 230ms; /* alte Seite fliesst aus */ --motion-page-in: 360ms; /* neue Seite fliesst ein */ --motion-ease: cubic-bezier(.2, .8, .2, 1); } /* Manuelle Wahl schlägt die Systemvorgabe — in BEIDE Richtungen. Gesetzt von public/js/shell.js aus localStorage; ist nichts gespeichert, entfernt shell.js das Attribut, damit `color-scheme: light dark` oben wieder greift (= Systemvorgabe). `[data-theme-ready]` ist KEIN Zierrat, sondern die Flimmer-Bremse: alle 25 Modul-Templates tragen `data-theme="light"` hart im (Scaffold-Rest aus T004, Dateien einer anderen Welle). Ohne diese Zusatzbedingung wuerde der Browser den ERSTEN Anstrich hell zeichnen, auch wenn System oder gespeicherte Wahl dunkel sagen. GEMESSEN (Chromium 148, lokaler Pruefstand): erster Anstrich bei 116 ms, shell.js setzt das Thema bei 129 ms -- ein sichtbarer heller Frame. Mit `[data-theme-ready]` greift bis zum Skriptlauf `color-scheme: light dark` von oben, der erste Anstrich folgt also der SYSTEMVORGABE. Stimmt die gespeicherte Wahl damit ueberein (Regelfall), flimmert nichts mehr. Nur wer bewusst gegen seine Systemeinstellung waehlt, sieht weiterhin einen Frame -- frueher ginge es ausschliesslich mit einem Inline-