/* =============================================================================
agora-site-bridge.css — Agora Site auf das Design-System heben
-----------------------------------------------------------------------------
Zweck: Die Site (`frontend/public/app-styles.css`) behält jede Regel und jede
Klasse. Ausgetauscht wird nur der `:root`-Block: jeder alte Tokenname lebt
weiter, zeigt aber ab jetzt auf eine DS-Rolle. Damit erbt die Site in einem
Zug die DS-Werte, den Dark Mode und die Print-Fläche — ohne dass eine
Komponente angefasst wird.
Einbau in drei Zeilen:
1. tokens.css und diese Datei vor app-styles.css laden:
2. In app-styles.css den `:root{ … }`-Block (Zeile 1–52) löschen.
Sonst gewinnt er, weil er später kommt.
3. Figtree statt Inter im verlinken. Die Bridge setzt --font-ui;
die `font-family`-Regel in app-styles.css auf `var(--font-ui)` ziehen.
Dark Mode danach: . Nichts weiter.
ACHTUNG, eine echte Kollision: die Site nennt `--focus-ring` eine FARBE,
das DS nennt `--focus-ring` einen SCHATTEN. Die Bridge behält die Farbe
(weil ~40 Site-Regeln `outline:2px solid var(--focus-ring)` schreiben) und
stellt den DS-Schatten als `--focus-ring-shadow` daneben.
============================================================================= */
/* Kein @import: /public/tokens.css wird in shell/index.html explizit VOR
dieser Datei geladen (tokens -> bridge -> app-styles). */
/* Site-Abweichung (A11y): die DS-Rolle --text-muted (n-500, 3,7:1 auf Weiss)
traegt in der Site 12-13px-Fliesstext (Meta-Zeilen, Tabellen-Zweitzeilen mit
eigenstaendiger Information) und faellt damit unter AA. Die Site bindet
--muted/--ink-3 deshalb auf n-600 (6,0:1); im Dark Mode reicht das DS-eigene
--text-muted (5,9:1 auf surface-1). Vgl. 01-foundations-spez.md Abs. 2.2
und CLAUDE.md (AA-Kontrast-Overrides bleiben erhalten). */
:root { --site-text-muted: var(--n-600); }
[data-theme="dark"] { --site-text-muted: var(--text-muted); }
:root,
[data-theme="dark"] {
/* ---- Schrift: Figtree im ganzen Kosmos --------------------------------- */
--font-site: var(--font-ui);
/* ---- Text ------------------------------------------------------------------
Die Site hat fünf Stufen, das DS vier. `--ink-3` und `--muted` lagen in der
Site nur 16 Helligkeitspunkte auseinander (#5b5e68 / #6b6f78) — eine
Unterscheidung, die auf dem Schirm niemand sieht. Beide gehen auf
--text-muted; wer wirklich eine fünfte Stufe braucht, nimmt --text-disabled. */
--ink: var(--text-primary);
--ink-2: var(--text-secondary);
--ink-3: var(--site-text-muted);
--muted: var(--site-text-muted);
--faint: var(--text-disabled);
/* ---- Flächen ---------------------------------------------------------------
Die Site trennt `--paper` (Grundfläche), `--canvas` (Arbeitsfläche im
Chat/Plan) und `--card` (Weiß). Im DS ist das surface-page / surface-page /
surface-1. `--canvas` behält absichtlich dieselbe Bindung wie `--paper`:
zwei fast gleiche Töne (#fbfaf5 / #faf8f3) waren nie als zwei Ebenen
gemeint, sondern ein Versehen. */
--paper: var(--surface-page);
--paper-2: var(--surface-2);
--canvas: var(--surface-page);
--card: var(--surface-1);
--hover: var(--interactive-ghost-hover);
/* ---- Ränder ----------------------------------------------------------------
Vier Site-Stufen auf drei DS-Rollen. `--line-3`/`--line-4` kamen nur in
Tabellen-Innenlinien vor und sind dort dasselbe wie subtle. */
--line: var(--border-subtle);
--line-2: var(--border-subtle);
--line-3: var(--border-subtle);
--line-4: var(--border-default);
/* ---- Marke: war schon deckungsgleich, bleibt deckungsgleich ------------- */
--accent: var(--o-500);
--accent-2: var(--o-400);
/* Akzent-Tints als ROLLEN, nicht als Rampen: im Dark Mode flippen sie auf
die dunklen Toene (#3a2114/#2a1810) aus tokens.css. Die Rampenbindung
(o-100/o-50) liess aktive Nav-Pills, Heute-Zellen und Orange-Chips als
helle Inseln im Dunkelthema stehen (Screenshot-QA 20.08.). */
--accent-soft: var(--surface-accent-soft);
--accent-soft-2: var(--surface-accent-soft-2);
--accent-text: var(--text-accent);
--accent-strong: var(--interactive-solid);
--accent-strong-hover: var(--interactive-solid-hover);
/* Farbe (Site-Bedeutung) + Schatten (DS-Bedeutung) nebeneinander */
--focus-ring: var(--focus-ring-color);
--focus-ring-shadow: 0 0 0 2px var(--surface-1), 0 0 0 4px var(--focus-ring-color);
/* ---- Status: DS-Werte gewinnen ---------------------------------------------
Die Site war heller und gesättigter (#2f9b6f, #3a7bd5, #d6453a, #e2a32a).
Auf den warmen Papierflächen kippten diese Töne ins Bonbonhafte, und das
Gelb war vom Marken-Orange kaum zu trennen. Das DS zieht Gelb bewusst ins
Gold (Hue ~85) und nimmt allen vier Tönen Sättigung. */
--green: var(--status-success-solid);
--green-soft: var(--status-success-surface);
--green-text: var(--status-success-fg);
--green-mild-bg: var(--status-success-mild);
--green-mild-fg: var(--status-success-mild-fg);
--blue: var(--status-info-solid);
--blue-soft: var(--status-info-surface);
--blue-text: var(--status-info-fg);
--blue-mild-bg: var(--status-info-mild);
--blue-mild-fg: var(--status-info-mild-fg);
--red: var(--status-danger-solid);
--red-soft: var(--status-danger-surface);
--red-text: var(--status-danger-fg);
--red-mild-bg: var(--status-danger-mild);
--red-mild-fg: var(--status-danger-mild-fg);
--yellow: var(--status-warning-solid);
--yellow-soft: var(--status-warning-surface);
--yellow-text: var(--status-warning-fg);
--yellow-mild-bg: var(--status-warning-mild);
--yellow-mild-fg: var(--status-warning-mild-fg);
--grey: var(--status-neutral-solid);
--grey-soft: var(--status-neutral-surface);
--grey-text: var(--status-neutral-fg);
/* Plattform-Konsole: war Inline-Lila, ist jetzt eine Rolle */
--purple: var(--status-admin-solid);
--purple-soft: var(--status-admin-surface);
--purple-text: var(--status-admin-fg);
/* Neutrales Etikett ohne Status */
--sand-bg: var(--status-sand-surface);
--sand-fg: var(--status-sand-fg);
/* Marker auf Bauplan und Karte, Diagrammblau getrennt vom Statusblau:
beide Namen existieren im DS wortgleich (--marker-closed-ring, --chart-blue)
und brauchen daher keine Brücke. */
/* ---- Geometrie -------------------------------------------------------------
Die Site hatte drei Radien und benutzte daneben 9px, 10px, 11px, 14px
inline. Die DS-Skala hat für jeden dieser Griffe eine Stufe. */
--radius: var(--r-md);
--radius-lg: var(--r-lg);
--radius-xl: var(--r-xl);
--shadow-sm: var(--e-1);
--shadow: var(--e-2);
--shadow-lg: var(--e-3);
--shadow-modal: var(--e-4);
}
/* Site-Abweichung (A11y, Orchestrator-Entscheidung): die Site nutzt --green als
SOLID-FLAECHE mit weisser Schrift (Buttons, Badges, Wizard-Step-Dots). Im Dark
Mode bindet --green (= --status-success-solid) auf success-500 (#1f8a5f) —
Weiss darauf nur 4,32:1 (AA-Fail). success-600 (#17714d) ist theme-konstant
und liefert 5,99:1. DS-Punkte/Balken, die bewusst die hellere 500er-Stufe
brauchen, nutzen weiterhin --status-success-solid bzw. --marker-closed-solid
direkt und sind von diesem Override nicht betroffen. */
[data-theme="dark"] { --green: var(--success-600); }
/* -----------------------------------------------------------------------------
Was die Bridge NICHT kann
-----------------------------------------------------------------------------
Alles, was in den JSX-Dateien als Literal steht, bleibt hell — auch im Dark
Mode. Aufgeräumt wird das nicht hier, sondern an der Fundstelle. Die
Reihenfolge steht in 06-agora-site-spez.md § 5; die drei größten Nester:
app-styles.css `background:#fff` ~180 Fundstellen → var(--card)
app-console*.jsx Admin-Lila inline ~24 Fundstellen → var(--purple*)
app-chat.jsx `rgba(0,0,0,.18)` Schatten ~11 Fundstellen → var(--shadow-lg)
Bis dahin gilt: Light ist vollständig, Dark ist tragfähig, aber nicht dicht.
----------------------------------------------------------------------------- */