/* =========================================================================== tokens.css — die EINZIGE Quelle für Farbe, Abstand, Radius, Schatten, Schrift. Hausregel (ADR-075, bindend): keine Farb-Literale in *.razor, *.razor.css oder Komponenten-CSS. Nur var(--token). ZWEI FARBWELTEN, bewusst getrennt (ADR-075, Entscheidung 1): --color-* App-Chrome. Die eingeloggte Arbeitsfläche (Richtung C „Kontrast"): weiß-neutraler Arbeitsbereich, dunkle Navigations-Schiene als Markenanker, Gold NUR als Akzent. Ein Werkzeug, in dem der Wirt zehn Minuten arbeitet, muss zurücktreten. --brand-* Markenwelt. Landingpage, Rechtstexte, Signup und die Vorschauen der SkiaSharp-Komposition. Gold auf Dunkel, wie bisher — diese Werte sind mit den Kompositionsfarben (ADR-038/039) identisch und werden hier NICHT verändert. Wer sie anfasst, ändert jeden Kundenpost. --status-* Die fünf Beitragszustände. EINE Quelle für Panel, Liste, Grid, FB-Feed und Kalender (ADR-075, Entscheidung 5). FALLSTRICK, warum diese Datei nicht *.razor.css heißen darf: Blazor hängt an jeden Selektor einer Scoped-Datei ein Scope-Attribut — aus :root würde :root[b-abc123], das matcht nie, und der Build meldet das NICHT. Umgekehrt darf Scoped CSS var() frei benutzen, weil Custom Properties vererben. Das ist der ganze Grund, warum diese Schicht funktioniert. =========================================================================== */ :root { /* ==== App-Chrome: Flächen ============================================= */ --color-page: #FBFBFA; --color-surface: #FFFFFF; --color-surface-muted: #F0EEEA; --color-surface-sunken: #F8F8F6; --color-border: #E5E3DF; --color-border-strong: #C9C5BC; /* ==== App-Chrome: Navigations-Schiene (dunkel) ========================= */ --color-rail: #1B1A18; --color-rail-fg: #A39E92; --color-rail-fg-strong: #F5F0E6; --color-rail-border: rgba(245, 240, 230, 0.08); /* Ton des Marken-Claims unter dem Lockup. Übernommen aus dem Print-Lockup (vicini-lockup-dark.svg), damit Schiene und Druck denselben Wert tragen — deshalb ein eigenes Token statt einer Mischung, die auseinanderdriften könnte. */ --color-rail-claim: #CBBC92; --color-rail-hover: rgba(245, 240, 230, 0.07); --color-rail-active: rgba(205, 168, 81, 0.16); /* ==== App-Chrome: Text ================================================ */ --color-text: #1B1A18; --color-text-muted: #57544E; /* War #8C8880. Beim Zusammenführen von Markenwelt und App-Chrome (Nachtrag ADR-075, 07.08.2026) nachgerechnet: #8C8880 erreicht auf Weiß nur 3,53:1 und verfehlt AA für Normaltext. Der Wert der Landingpage (#77726A, 4,77:1) besteht — also wird ER der gemeinsame. Angleichen darf Kontrast nie kosten, sonst ist Einheitlichkeit teuer erkauft. Der Ton wird dadurch app-weit etwas dunkler: Build-Footer, Rechtstext-Links und alle Hilfszeilen. */ --color-text-subtle: #77726A; --color-text-placeholder:#9AA0A6; /* ==== App-Chrome: Marke als Akzent ==================================== brand = FLÄCHE, dazu on-brand als Textfarbe darauf. brand-ink = Gold ALS TEXT auf hellem Grund. Bewusst abgedunkelt: #CDA851 auf Weiß erreicht nur ca. 2:1 und ist nicht barrierefrei lesbar. Der Wert ist der bestehende, bereits app-weit benutzte (~5,6:1) — NICHT der hellere Entwurfswert; mehr Kontrast ist kein Nachteil. Zwei Token, ein Markenwert: das ist Absicht, kein Widerspruch. */ --color-brand: #CDA851; --color-brand-hover: #BB9742; --color-brand-ink: #7A5E2E; --color-brand-wash: #FBF6EA; --color-on-brand: #1B1A18; /* ==== Nicht-Produktions-Umgebung (ADR-058) ============================ env = FLÄCHE für alles, was „du bist nicht in Produktion" sagt: die Umgebungs-Kennung im Schienenfuß und — nur ausserhalb von Prod — die Kontext-Zeile. Rostrot statt Gold, weil Gold in dieser App bereits „aktiver Zustand / Marke" bedeutet und der Ton sonst nichts aussagt. env-fg ist reines Weiss, NICHT --color-rail-fg-strong (#F5F0E6): das erreicht auf dieser Fläche nur 4,2:1 und verfehlt AA für die kleine Schriftgrösse, Weiss liegt bei 4,8:1. */ --color-env: #b35a11; --color-env-fg: #FFFFFF; /* ==== App-Chrome: Overlays / Backdrops ================================= */ --color-backdrop: rgba(27, 26, 24, 0.8); --color-backdrop-soft: rgba(27, 26, 24, 0.5); --color-scrim: rgba(27, 26, 24, 0.55); /* ==== Rückmeldung: Erfolg / Fehler in Formularen ======================= */ --color-danger: #B02A37; --color-danger-border: #E50000; --color-success-border: #26B050; /* ==== Status: EINE Quelle für Panel, Liste, Grid, FB-Feed, Kalender ==== Je Zustand drei Token: Spine (Kante/Rahmen), Badge-Fläche, Badge-Text. Die -fg-Werte sind auf ihrer -bg-Fläche auf AA geprüft. */ --status-draft: #C9C5BC; --status-draft-bg: #F0EEEA; --status-draft-fg: #57544E; --status-approved: #CDA851; --status-approved-bg: #FBF6EA; --status-approved-fg: #7A5E2E; --status-scheduled: #6E8CAE; --status-scheduled-bg: #EDF1F6; --status-scheduled-fg: #3E5A78; --status-published: #4E8C67; --status-published-bg: #E9F2EC; --status-published-fg: #2E6142; --status-failed: #C0492C; --status-failed-bg: #FBEAE7; --status-failed-fg: #9A3521; --status-discarded: #8C8880; --status-discarded-bg: #E8E6E1; --status-discarded-fg: #45423D; /* ==== Post-Typ-Marker (Kalender-Kachel: macht den Content-Mix sichtbar) = */ --type-aktion-bg: #F8E3C4; --type-aktion-fg: #7A5E2E; --type-kategorie-bg: #D9E7F5; --type-kategorie-fg: #1C4F7C; --type-produkt-bg: #DCEFDC; --type-produkt-fg: #24632A; --type-stimmung-bg: #EDE0F2; --type-stimmung-fg: #5B3A6E; --type-beitrag-bg: #E9ECEF; --type-beitrag-fg: #495057; /* ==== Markenwelt (Landingpage, Rechtstexte, Signup, Komposit-Vorschau) == NACHTRAG 07.08.2026: Die Abgrenzung „die Landingpage ist außen vor" ist aufgehoben. Grund ist nicht Ordnungsliebe, sondern die Anmeldestrecke aus ADR-066: ein Interessent läuft Landingpage → /start → Owner-Redeem → App. Die ersten drei tragen die Markenwelt, die vierte das App-Chrome — der Bruch liegt also genau im Moment des ersten Logins. Was NICHT verhandelbar ist, steht jetzt belegt statt behauptet: `SkiaImageComposer.cs` kennt genau zwei Farben — `Gold = #CDA851` (Zeile 16) und `#1B1A18` in verschiedenen Deckungen. NUR diese beiden sind an die Komposition gekoppelt; wer sie ändert, ändert jeden Kundenpost. Beide sind ohnehin identisch mit --color-brand/--color-rail, hier war also nie ein Konflikt. Die übrigen Werte kommen in keiner .cs-Datei vor. Die vier Token, die sich unterschieden, zeigen deshalb jetzt auf das App-Chrome. Sie bleiben als eigene Namen bestehen: die Landingpage soll weiter von „Markenwelt" reden, nicht von „App-Chrome" — und sollte eine der beiden Welten später wieder auseinander laufen, ist das hier eine Zeile statt einer Suche durch 585 Zeilen Home.razor.css. */ --brand-gold: #CDA851; /* == Gold in SkiaImageComposer.cs — nicht ändern */ --brand-gold-hover: #BB9742; --brand-gold-ink: #7A5E2E; --brand-dark: #1B1A18; /* == Scrim/Panel in SkiaImageComposer.cs — nicht ändern */ --brand-cream: var(--color-page); --brand-surface: #FFFFFF; --brand-on-dark: #ECE6D8; --brand-on-dark-strong: #FFFFFF; --brand-on-gold: #1B1A18; --brand-text-body: var(--color-text-muted); --brand-text-muted: var(--color-text-subtle); --brand-text-subtle: #A8A29A; --brand-border: var(--color-border); --brand-border-input: #D8D2C6; --brand-dark-wash: rgba(255, 255, 255, 0.05); --brand-dark-border: rgba(255, 255, 255, 0.12); /* Heller Gold-Untergrund für Badges/Pills auf hellem Grund (Preis-Badge, Eyebrow-Chip). == --color-brand-wash (Nachtrag 07.08.2026, Landingpage-Übernahme): dieselbe blasse Goldfläche, die App-Chrome schon für den „approved"-Status benutzt — kein neuer Hexwert, nur ein zweiter Name dafür in der Markenwelt. --brand-gold-ink (6,06:1) ist der geprüfte Text dazu. */ --brand-gold-wash: var(--color-brand-wash); --brand-outline: rgba(27, 26, 24, 0.18); --brand-gold-ring: rgba(205, 168, 81, 0.25); --brand-error-bg: #FDECEB; --brand-error-border: #F0C2BD; --brand-error-fg: #8C2F26; --brand-error-strong: #B3392C; /* Weicher, weiter Schatten der Landingpage-Karten — bewusst NICHT --shadow-md (anderer Radius/Streuung): die Landingpage soll pixelgleich bleiben. */ --brand-shadow-card: 0 8px 30px rgba(27, 26, 24, 0.07); /* ==== Typografie ====================================================== ADR-075 Punkt 7, erledigt 07.08.2026: Fraunces (Display, Schnitt 600) liegt selbst gehostet als woff2 in wwwroot/fonts/, @font-face in app.css, Lizenzen unter docs/licenses/OFL-*.txt. Kein Google-Fonts-Link — siehe Kommentar dort. Der Stack fällt auf denselben System-Stack zurück wie zuvor, falls die Datei aus irgendeinem Grund nicht lädt. Body-Font auf Inter vereinheitlicht (07.08.2026, siehe ENTSCHEIDUNGEN.md): vorher Libre Franklin, jetzt dieselbe Familie wie die serverseitig generierten Social-Media-Bilder (SkiaSharp, ADR-039, PanelFonts.cs) — eine Markenstimme über Landingpage, App und Post-Bild hinweg statt zwei. Die Web-woff2 hier ist eine eigene Kopie, unabhängig von den ttf- Ressourcen, die PanelFonts.cs einbettet — Server-Rendering und Browser sind zwei Zwecke, zwei Kopien sind korrekt. */ --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; /* Skala gegen eine Wurzel von 16px (Browser-Default). Die Wurzel wird NICHT verkleinert — siehe die Begründung an html/body in app.css: ein font-size dort schrumpft jedes rem mit, also auch Abstände und Knopfhöhen, und die ganze App wirkt zu klein. */ --text-xs: 0.75rem; /* 12px — Eyebrows, Zähler, Uhrzeiten */ --text-sm: 0.875rem; /* 14px — Sekundärtext, Hinweise */ --text-base: 1rem; /* 16px — App-Grundgröße */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.5rem; /* 24px — Seitentitel */ /* ==== Raster: 4px-Basis =============================================== */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; /* ==== Form ============================================================ */ --radius-sm: 5px; --radius-md: 7px; --radius-lg: 10px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(27, 26, 24, 0.05); --shadow-md: 0 4px 12px rgba(27, 26, 24, 0.08); --shadow-lg: 0 10px 40px rgba(27, 26, 24, 0.35); /* ==== Layout ========================================================== */ --rail-width: 236px; --topbar-height: 58px; --content-max: 1120px; }