/* ══════════════════════════════════════════════════════════════════ MARCHER LAB — DESIGN TOKENS (Single Source of Truth) ──────────────────────────────────────────────────────────────── Quelle: marcher.li/shared/tokens.css — NUR dort editieren. Verteilt per `./sync-tokens.sh` (Repo-Root, reines Copy, byte-identisch) an alle Kopien: • starterkit.li/shared/tokens.css • finanzbuch.li/shared/tokens.css • marcherlab.com/shared/tokens.css • business.marcherlab.com/shared/tokens.css • reisebuch.li/shared/tokens.css • app.marcherlab.com/_shell/tokens.css (liefert auch mod.marcherlab.com, das die Datei per von app.marcherlab.com laedt — eine eigene Kopie unter mod.marcherlab.com/_shell/ gab es nie) • app.reisebuch.li/_shell/tokens.css Steht diese Datei in einer Kopie: dort NICHT editieren, der naechste Sync ueberschreibt sie. `./sync-tokens.sh --check` prueft ohne zu schreiben. ══════════════════════════════════════════════════════════════════ */ :root { /* ── Brand ─────────────────────────────────────────────────────── */ --navy: #1E2A4A; --navy-dark: #162039; --navy-light: #2D3F6B; --gold: #F5C518; --gold-dark: #D4A017; --gold-light: #FEF3C7; /* Gold als TEXT auf hellen Flaechen: 5.0:1 auf #F4F3EF/#F0F2F8, 5.6:1 auf Weiss (das Marken-Gold --gold hat dort nur ~1.45:1 und ist als Textfarbe nicht AA-lesbar). Additiv, vorher nur lokal in marcher.li/index.html definiert -- Domains ohne eigenes Dark-Mapping fuer dieses Token sehen dadurch keine Aenderung: der Wert ist neu, keine bestehende Variable wird umbenannt. Im Dark Mode auf allen Navy-Flaechen bleibt es das echte --gold (siehe marcher.li/shared/marcher-dark.css). */ --gold-text: #806400; /* ── Neutral / Surface ─────────────────────────────────────────── */ --white: #FFFFFF; --bg: #F4F6F9; /* Haupt-Hintergrund (Lab + Public, vereinheitlicht) */ --bg-2: #EEF1F5; /* Alternativer Hintergrund */ --surface: #FFFFFF; --text: #1A1A2E; --text-muted: #6B7280; --muted: #6B7280; /* Alias für Rückwärtskompatibilität */ --card: var(--surface); /* Alias für Rückwärtskompatibilität (App-Shell nutzt --card) */ --border: #E5E7EB; --border-dark: #D1D5DB; /* ── Status (Tool-Stati, Tier-Pills, Roadmap-Badges) ───────────── */ --status-live: #10B981; --status-beta: #3B82F6; --status-early-access: #3B82F6; --status-preview: #F59E0B; --status-backlog: #94A3B8; /* ── Feedback (Forms, Alerts, Inline-Validation) ───────────────── */ --danger: #B91C1C; --danger-bg: #FEF2F2; --success: #047857; --success-bg: #ECFDF5; /* ── Shadows ───────────────────────────────────────────────────── */ --shadow-sm: 0 1px 3px rgba(30,42,74,0.08); --shadow-md: 0 4px 12px rgba(30,42,74,0.10); --shadow-lg: 0 8px 24px rgba(30,42,74,0.15); --shadow-xl: 0 20px 40px rgba(30,42,74,0.15); /* ── Layout (Shell-Geometrie) ──────────────────────────────────── */ --sidebar-width: 240px; --header-height: calc(64px + env(safe-area-inset-top, 0px)); /* ── Business.-Erweiterung ──────────────────────────────────── Additiv: neue Variablen + ein html[data-theme="dark"]-Block, der bestehende Variablen überschreibt. Eine Seite ohne data-theme (alle Domains ausser business.marcherlab.com) bleibt dadurch unverändert -- der Dark-Block greift nur, wenn das Attribut gesetzt ist, und die neuen Variablen unten sind reine Ergänzungen, keine Änderung bestehender Werte. */ /* Zusätzliche Flächen (business.marcherlab.com/shared/biz-app.css definiert --surface-2 lokal mit demselben Wert -- hier nachgezogen, damit auch die anderen 3 Konsumenten sie haben; die lokale Definition in biz-app.css bleibt bestehen und gewinnt dort unverändert per Kaskade, da sie nach tokens.css geladen wird). */ --surface-2: #F8FAFC; --surface-raised: #FFFFFF; /* Modals/Dropdowns; im Light-Mode optisch wie --surface, Abhebung nur über Shadow */ --text-2: rgba(26,26,46,0.78); /* zwischen --text und --muted */ --border-strong: #D1D5DB; /* = --border-dark, additiv unter neuem Namen für Konsistenz mit --border */ /* Status-Paare (Text/Fläche getrennt, damit Dark-Mode nur die Fläche abdunkeln kann ohne den Text mitzuziehen). --danger-fg/--success-fg sind reine Aliase auf die oben bereits bestehenden --danger/--success (kein Duplikat von --danger-bg/--success-bg, die bleiben wie sie sind); --warn-*/--info-* heben die nur lokal in business.marcherlab.com/shared/biz-app.css definierten --warn/--info auf Tokens-Ebene, mit denselben Werten. */ --danger-fg: var(--danger); --success-fg: var(--success); --warn-fg: #D97706; --warn-bg: #FFFBEB; --info-fg: #1E40AF; --info-bg: #EFF6FF; /* Radius-Skala (business.marcherlab.com/shared/biz-app.css definiert lokal --r-sm/--r-md/--r-lg mit denselben Werten -- eigener Name hier, um die bestehende lokale Definition nicht zu verdoppeln/zu kollidieren, Werte bewusst identisch gehalten). */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-full: 999px; /* Motion (--ease Wert deckungsgleich mit der lokalen Definition in biz-app.css, damit bestehende Übergänge sich nicht ändern, sobald Module direkt auf das Token wechseln). */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --dur-fast: 120ms; --dur: 200ms; /* Typo-Skala */ --fs-xs: 0.75rem; --fs-sm: 0.85rem; --fs-md: 1rem; --fs-lg: 1.25rem; --fs-xl: 1.75rem; --fs-display: 2.5rem; /* grosse KPI-Zahlen (Cockpit, Accounting-Cockpit) */ /* ── Dark-Mode-Werte ─────────────────────────────────────────── Rein additiv: NEUE Variablen mit Präfix --dark-*, keine bestehende Variable wird umbenannt oder überschrieben. Eine Site, die nur die Standard-Tokens liest, sieht exakt gleich aus. Wer Dark Mode will, mappt in seinem eigenen CSS unter @media (prefers-color-scheme: dark) seine Flächen auf diese Werte (Referenz: marcher.li/index.html). Bewusst KEIN globaler @media-Block hier, sonst würden alle Konsumenten dieser Datei ungefragt dunkel. Kontraste (WCAG): --dark-text auf --dark-bg 14.6:1, --dark-text-muted auf --dark-bg 7.9:1 und auf --dark-surface 6.8:1, --gold auf --dark-bg 10.6:1, --gold-dark auf --dark-surface 6.2:1 — alles über AA (4.5:1). */ --dark-bg: #111A30; /* Seitenfläche, etwas tiefer als --navy-dark */ --dark-bg-2: #162039; /* alternierende Fläche (= --navy-dark) */ --dark-surface: #1B2744; /* Karten, Chips, Eingabefelder */ --dark-text: #E8ECF4; /* Fliesstext */ --dark-text-muted: #A7B0C4; /* Nebentext, Labels */ --dark-border: #2B3A5E; /* Linien, Rahmen */ } /* ══════════════════════════════════════════════════════════════════ DARK MODE ──────────────────────────────────────────────────────────────── Kontraste gegen WCAG AA (4.5:1 normaler Text, 3:1 UI/grosser Text) nachgerechnet, jeweils gegen --bg (#0a0f1c) bzw. --surface (#111a30): --text (#E8ECF4) ~16.3:1 auf --bg, ~14.6:1 auf --surface --text-2 (rgba(...,.78)) ~10.0:1 auf --bg --muted (rgba(...,.68)) ~7.8:1 auf --bg --danger-fg dark (#F87171) ~6.3:1 auf --surface --warn-fg dark (#FBBF24) ~10.4:1 auf --surface --info-fg dark (#60A5FA) ~6.8:1 auf --surface --success-fg dark (#34D399) ~9.0:1 auf --surface Alle Werte liegen über der AA-Schwelle für Fliesstext. Bewusst eingehalten, um das nicht zu brechen: - Navy wird NIE als Textfarbe auf einer Surface verwendet (Navy ist im Dark ausschliesslich Akzent/Icon-Hintergrund, nie Fliesstext). - --surface wird NIE als "weisser Text" missbraucht (--surface ist eine Flächenfarbe, für Text gelten --text/--text-2/--muted). - Helle Status-Flächen (--warn-bg/--info-bg/--success-bg/--danger-bg) werden im Dark IMMER überschrieben (12% Alpha statt heller Fläche), nie stillschweigend übernommen. - Die Sidebar (biz-chrome/biz-app.css) braucht sowohl den html[data-theme]- als auch den prefers-color-scheme-Pfad, siehe beide Blöcke unten -- sie ist sonst nur im expliziten Dark dunkel, nicht im Auto-Modus mit dunklem System-Theme. Gold (--gold/--gold-dark/--gold-light) bleibt unverändert: der Marken- akzent ändert sich mit dem Theme nicht. --gold-light (#FEF3C7) bleibt als Icon-Plaque-Hintergrund vorerst hell -- Komponenten, die das als Fläche nutzen, muessen einzeln auf Dark-taugliche Flächen umgestellt werden, das ist mit dieser Token-Ergänzung allein nicht abgedeckt. */ html[data-theme="dark"] { --bg: #0a0f1c; --bg-2: #0a0f1c; --surface: #111a30; --surface-2: #162039; --surface-raised: #1a2240; --border: rgba(255,255,255,.08); --border-dark: rgba(255,255,255,.16); --border-strong: rgba(255,255,255,.16); --text: #E8ECF4; --text-2: rgba(232,236,244,.78); --text-muted: rgba(232,236,244,.68); --muted: rgba(232,236,244,.68); --danger-fg: #F87171; --danger-bg: rgba(248,113,113,.12); --success-fg: #34D399; --success-bg: rgba(52,211,153,.12); --warn-fg: #FBBF24; --warn-bg: rgba(251,191,36,.12); --info-fg: #60A5FA; --info-bg: rgba(96,165,250,.12); --shadow-sm: 0 1px 3px rgba(0,0,0,0.35); --shadow-md: 0 4px 12px rgba(0,0,0,0.40); --shadow-lg: 0 8px 24px rgba(0,0,0,0.50); --shadow-xl: 0 20px 40px rgba(0,0,0,0.55); } /* Kein globaler prefers-color-scheme-Fallback hier: tokens.css ist byte-identisch an alle im Kopf genannten Domains verteilt. Ein bare ":root"-Fallback in dieser Datei würde bei dunklem System-Theme auf ALLEN anderen Domains mit auslösen -- genau das verletzt "Seite ohne data-theme sieht unverändert aus". marcher.li loest seinen Dark Mode deshalb ueber die --dark-*-Werte in seinem eigenen index.html aus. Der Auto-Modus-Fallback steht darum in business.marcherlab.com/shared/ biz-app.css (domain-exklusiv), nicht hier. Analoges, bereits bestehendes Muster: app.marcherlab.com/_shell/finanzbuch-shell.css macht es genauso mit eigenem --fb-*-Namensraum -- dort ist es sicher, weil die Datei nur auf Finanzbuch.-Seiten lädt, nie auf den anderen 4 Domains. */ /* ══════════════════════════════════════════════════════════════════ APP-SHELL (app.marcherlab.com: Dashboard, Account, Admin, Login, Radar., Prisma., Screen.) ──────────────────────────────────────────────────────────────── Greift nur auf Seiten mit . Alle anderen Konsumenten dieser Datei sehen davon nichts, auch nicht die, die selbst html.is-dark oder --bottom-nav-h verwenden. :root:where(...) hat dieselbe Spezifität wie :root. Der Block schlägt damit die Grundwerte oben (steht später), eine Seite kann ihn aber mit ihrem eigenen :root/html.is-dark weiterhin übersteuern (z.B. screen/screen.css). Dark Mode läuft im App-Shell über die Klasse html.is-dark (gesetzt vom Theme-Umschalter), nicht über data-theme wie bei Business. Breakpoints (CSS-Variablen gehen in @media nicht, darum hier nur dokumentiert; neue Regeln bitte nur auf diesen vier Stufen): --bp-sm 560px Telefon quer / kleine Karten zweispaltig --bp-md 720px Tablet hoch, Formulare zweispaltig --bp-lg 960px Desktop-Layout: Sidebar statt Bottom-Nav --bp-xl 1100px breite Desktop-Raster (Cockpit, Tabellen) ══════════════════════════════════════════════════════════════════ */ :root:where([data-shell="app"]) { --sidebar-w: 240px; --header-h: 56px; --bottom-nav-h: 64px; --app-bottom-inset: 0px; } :root:where([data-shell="app"].is-dark) { --navy: #1A2541; --navy-dark: #0F1729; --gold-dark: #E0B520; --gold-light: rgba(245,197,24,0.15); --bg: #14182B; --bg-2: #1A1F36; --surface: #1B2238; --card: #1B2238; /* fest statt Alias: Seiten mit eigenem --surface (screen.css) behalten ihre Kartenfarbe */ --text: #E5E7EB; --text-muted: #8B92A8; --muted: #8B92A8; --border: #2A3052; --border-dark: #3A406A; --shadow-sm: 0 1px 3px rgba(0,0,0,0.3); --shadow-md: 0 4px 12px rgba(0,0,0,0.35); --shadow-lg: 0 8px 24px rgba(0,0,0,0.45); --shadow-xl: 0 20px 40px rgba(0,0,0,0.50); }