/* ════════════════════════════════════════════════════════════ LifeOn Central — Fluent 2 Design Tokens v1.5.0 · CSS-only implementation of Microsoft Fluent 2 ════════════════════════════════════════════════════════════ */ :root { /* ── LoD Markenfarben ────────────────────────────────── --lod-blue-dark ist die Topbar/Loading-Hintergrundfarbe. --lod-blue-50/-700 sind helle Info-Akzent-Werte. --lod-accent ist der orange Tertiaer-Accent. */ --lod-blue-dark: #1a2b4a; --lod-blue-50: #E6F0FA; --lod-blue-700: #0A4B8C; --lod-accent: #f97316; /* Loading Overlay — einfarbig, muss bitweise identisch zum iOS-Splash sein. Historisch war hier ein 160deg-Gradient, der sich aber nicht 1:1 mit einem statischen Splash-PNG/Storyboard-Background matchen laesst. Einfarbig = Identitaet. */ --loading-grad-start: #0f1b30; --loading-grad-mid: #0f1b30; --loading-grad-end: #0f1b30; /* Toast Warning (kräftiger als status-warning-fg für weißen Text auf Hintergrund) */ --status-warning-toast: #c27c00; /* ── Fluent 2 Brand Tokens (aus LoD-Blau #2563eb) ───── */ --brand-default: #2563eb; --brand-hover: #1d4ed8; --brand-pressed: #1e40af; --brand-light: #dbeafe; --brand-light-hover: #bfdbfe; --brand-text-on: #ffffff; /* Brand-Aliase fuer Lesbarkeit / Migration aus aelterem Code */ --brand-primary: var(--brand-default); --color-brand: var(--brand-default); --color-brand-soft: var(--brand-light); --color-brand-accent: var(--brand-hover); /* ── Fluent 2 Neutral Palette ─────────────────────────── */ /* Foreground (Text) */ --color-text: #242424; --color-text-primary: var(--color-text); /* Alias */ --color-text-secondary: #424242; --color-text-tertiary: #616161; --color-text-muted: #707070; --color-text-disabled: #bdbdbd; /* Background */ --color-bg: #f5f5f5; --color-bg-muted: #fafafa; --color-surface: #ffffff; --color-bg-surface: var(--color-surface); /* Alias */ --card-bg: var(--color-surface); /* Karten-/Panel-Fläche. War bisher nur als var(--card-bg,#fff)-Fallback genutzt (button.css, Postfach-Cockpit u.a.) → jetzt echter Token, damit ein späterer Theme-Pass eine Stelle hat. Wert identisch zu #fff. */ --color-surface-soft: var(--color-bg-muted); --color-bg-subtle: #e8e8e8; --color-bg-selected: #ebebeb; /* Card / Section backgrounds */ --bg-secondary: var(--color-bg); /* Border */ --color-border: #e0e0e0; --color-border-hover: #c7c7c7; --color-border-pressed: #b3b3b3; --color-border-disabled: #e8e8e8; --color-border-light: #f0f0f0; --color-border-subtle: var(--color-border-light); /* Alias */ --color-border-strong: var(--color-border-pressed); --color-bg-default: var(--color-bg); /* Alias */ --color-bg-hover: #f0f0f0; --color-surface-hover: var(--color-bg-muted); --color-focus: var(--brand-default); /* Accent (Turquoise als Akzent fuer Highlights / Hover-States) */ --color-accent: var(--lod-turquoise); --color-accent-bg: var(--lod-turquoise-100); --color-accent-bg-soft: var(--lod-turquoise-50); /* Semantic Color Aliase auf bestehende Status-Tokens (gleichwertige Namen in alten Code-Stellen, hier konsolidiert). */ --color-danger-bg: var(--status-danger-bg); --color-danger-fg: var(--status-danger-fg); --color-danger-border: var(--status-danger-border); --color-danger-strong: var(--status-danger-fg); --color-warning-bg: var(--status-warning-bg); --color-warning-fg: var(--status-warning-fg); --color-warning-border: var(--status-warning-border); --color-warning-strong: var(--status-warning-fg); --color-warn-bg: var(--status-warning-bg); --color-warn-text: var(--status-warning-fg); --color-warn-border: var(--status-warning-border); --color-success-strong: var(--status-success-fg); --color-brand-bg-subtle: var(--brand-light); /* Alias */ --brand-bg-subtle: var(--brand-light); --brand-soft: var(--brand-light); --status-info-default: var(--status-info-fg); --status-warning-default: var(--status-warning-fg); --status-success-default: var(--status-success-fg); --status-danger-default: var(--status-danger-fg); /* ── Semantic Status Tokens ───────────────────────────── */ /* Danger / Error */ --status-danger-bg: #fde7e9; --status-danger-soft: #FDECEA; /* Etwas heller — Hover-Backgrounds, Status-unassigned */ --status-danger-fg: #c4314b; --status-danger-border: #e8384f; /* Warning */ --status-warning-bg: #fff4ce; --status-warning-fg: #835c00; --status-warning-border: #f2c94c; /* Success */ --status-success-bg: #dff6dd; --status-success-fg: #107c10; --status-success-border: #54b054; /* Info */ --status-info-bg: #dbeafe; --status-info-fg: #2563eb; --status-info-border: #5b8def; /* Pressed states (derived). */ --status-danger-pressed: color-mix(in srgb, var(--status-danger-fg), #000 15%); /* Review (Lila) */ --status-review-bg: #e8d5f5; --status-review-fg: #6b21a8; /* Planungsstatus-spezifisch (ergänzen Standard-Status-Tokens) */ --status-vorgeschlagen-bg: #ede9fe; --status-vorgeschlagen-fg: #5b21b6; --status-zurueckgestellt-bg: #fef3e2; --status-zurueckgestellt-fg: #9a6700; --status-keine-prio-bg: #f0f0f0; --status-keine-prio-fg: #616161; /* Status aliases. */ --status-aktiv: #107c10; --status-ueberfaellig: #c4314b; /* ── Typography ───────────────────────────────────────── */ --font-sans: 'Segoe UI Variable', 'Segoe UI', system-ui, -apple-system, sans-serif; --font-mono: 'Cascadia Code', 'Consolas', 'SF Mono', ui-monospace, monospace; /* Size scale */ --font-size-xs: 10px; --font-size-sm: 12px; --font-size-base: 14px; --font-size-body: var(--font-size-base); /* Alias */ --font-size-md: 16px; --font-size-lg: 20px; --font-size-h4: 22px; /* Drawer-Section-Headlines, Card-H4 */ --font-size-xl: 24px; --font-size-xxl: 28px; /* App typography aliases (kanonisch, Mein Tag) */ --fs-section: 16px; --fs-card-title: 14px; --fs-body: 13px; --fs-meta: 12px; --fs-badge: 11px; /* Aliase auf die font-size-Skala (alter Name) — beide werden im Code genutzt. */ --fs-xs: var(--font-size-xs); --fs-sm: var(--font-size-sm); --fs-md: var(--font-size-md); --fs-lg: var(--font-size-lg); --fs-caption: var(--font-size-xs); /* Font weight */ --fw-regular: 400; --fw-normal: var(--fw-regular); /* Alias */ --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Line height */ --lh-tight: 1.2; --lh-base: 1.4; --lh-normal: var(--lh-base); /* Alias */ --lh-comfortable: 1.5; /* Drawer-Body, Modal-Message — etwas luftiger als base */ --lh-relaxed: 1.6; --lh-loose: 1.65; /* Modal-Long-Form-Text, lockere Block-Beschreibungen */ /* Letter spacing */ --ls-caps: 0.08em; /* Uppercase-Section-Headers, KPI-Labels */ /* ── Spacing (Fluent 2 scale) ─────────────────────────── */ --space-px: 1px; /* Ultra-tight: Badge-Padding, Dot-Margins */ --space-xxs: 2px; --space-xs: 4px; --space-1: 4px; --space-1-5: 6px; /* Zwischen space-1 und space-2: Gaps in Meta-Zeilen, Filter-Bars */ --space-2: 8px; --space-2-5: 10px; /* Zwischen space-2 und space-3: Timeline-Gaps, mittlere Abstaende */ --space-3: 12px; --space-3-5: 14px; /* Zwischen 3 und 4 */ --space-4: 16px; --space-4-5: 18px; /* Zwischen 4 und 5 */ --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-10: 40px; --space-12: 48px; /* ── Border Radius (Fluent 2) ─────────────────────────── */ --radius-xxs: 2px; /* Dekorative Striche, Linien-Enden */ --radius-xs: 3px; /* Checkboxen, kleine Bild-Vorschauen */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-circular: 9999px; --radius-pill: var(--radius-circular); /* Alias */ --radius-full: var(--radius-circular); /* Alias */ --radius-pill-sm: 10px; /* Sub-token zwischen --radius-lg (8) und --radius-xl (12) */ --radius-counter: 11px; /* Counter-Badges (mein-tag-fokus etc.) */ --radius-grouped-count: 9px; /* Group-Count-Badges (GroupedList) */ /* ── Surface — Flächen-SSOT (Karten/Kacheln/Panels/Drawer-Boxen/Hero) ── EINE kanonische Flächen-Sprache für alle bordered/bg Content-Blöcke. Vor dieser Gruppe existierten 4 Radien (6/8/10/12), 4 Border-Tokens und 3 „Weiß"-Tokens für dasselbe visuelle Konzept — Ursache des „jede Karte hat andere Abstände"-Eindrucks. Konsumenten referenzieren diese Tokens (oder die Utility `.lod-surface` in primitives/panel.css) statt eigener radius/border/bg/shadow-Werte. Innere Chips/Rows innerhalb einer Fläche dürfen weiterhin --surface-radius-inner nutzen. */ --surface-radius: var(--radius-lg); /* 8px — DER Karten-/Kachel-/Panel-Radius */ --surface-radius-inner: var(--radius-md); /* 6px — nur innere Chips/Rows */ --surface-border-color: var(--color-border); --surface-border: 1px solid var(--surface-border-color); --surface-bg: var(--color-surface); --surface-shadow: var(--shadow-2); /* Ruhe-Elevation (nur Panels/Hero, Karten bleiben flach) */ --surface-shadow-hover: var(--shadow-4); /* Hover-Elevation */ --surface-accent-width: 3px; /* Links-Akzent-„Spine" (konsistent app-weit) */ /* KPI-/Stat-Wert-Größen — die „große Zahl" einer Kachel. Drei Stufen statt 6+ hartkodierter px-Werte (22/23/24/26/28/30). Wer eine KPI/Stat-Zahl rendert, nimmt eine dieser Stufen — keine rohen px mehr. */ --kpi-value-lg: 26px; /* prominente Dashboard-/Hero-KPI */ --kpi-value-md: 22px; /* Standard-Kachel / Stat-Tile */ --kpi-value-sm: 18px; /* kompakt (Drawer / Zeit-Widget) */ /* ── Elevation / Shadows (Fluent 2) ───────────────────── */ --shadow-2: 0 1px 2px rgba(0, 0, 0, 0.12), 0 0 2px rgba(0, 0, 0, 0.06); --shadow-4: 0 2px 4px rgba(0, 0, 0, 0.14), 0 0 2px rgba(0, 0, 0, 0.06); --shadow-8: 0 4px 8px rgba(0, 0, 0, 0.14), 0 0 2px rgba(0, 0, 0, 0.06); --shadow-16: 0 8px 16px rgba(0, 0, 0, 0.14), 0 0 2px rgba(0, 0, 0, 0.06); --shadow-64: 0 32px 64px rgba(0, 0, 0, 0.24), 0 0 8px rgba(0, 0, 0, 0.06); /* Shadow-Aliase fuer Konsumenten ohne nummerierte Variante. */ --shadow-sm: var(--shadow-2); --shadow-md: var(--shadow-8); /* Weiche, breite Elevation fuer body-appended Tooltip-/Popover-Karten (Nav-Rail-Tooltip, Kennzahl-Legende) — bewusst weicher/groesser als --shadow-16, damit die schwebende Karte klar abhebt. */ --shadow-tooltip: 0 8px 24px rgba(0, 0, 0, 0.18); /* ── Layout ───────────────────────────────────────────── */ --topbar-height: 56px; /* Nav-Rail (links): collapsed = Icon-Rail, expanded = Label-Panel mit Gruppen. 56px ist der Default (Icon-only), 256px deckt sich mit der Fluent-2-Nav- Spezifikation (260). Umschaltung via .nav-rail.is-expanded, Zustand persistiert in prefs.js (Bereich 'nav'). */ --rail-w: 56px; --rail-w-exp: 256px; /* Page-Header-Title-Spalte (Modul-Icon + Label). Fix damit der ViewSwitcher in jeder Section an derselben X-Position startet. Laengster Modul-Label heute "Mein Bereich" (12 Zeichen) → 220px reicht inkl. Icon + Buffer. Bei laengerem Label hier erhoehen. */ --page-header-module-width: 220px; /* ── Komponenten-Breiten ─────────────────────────────────────────────── Tokens fuer hartcodierte 300/420/360/240 Werte: Listen-Spalten, Side-Panels, Org-Nodes und Form-Controls. Tokens werden in legacy-shared.css (Board), mein-bereich.css (Org) und app-toolbar.css genutzt. Andere Pixelangaben (Container-Queries, Text-Wrap-Limits, Single-Use-Sizes) bleiben semantisch eigenstaendig und sind kein Token-Ziel. */ --width-list-column: 300px; /* Board-Spalte / Org-PK-Card (Desktop) */ --width-list-column-md: 240px; /* Board-Spalte (Tablet) / Org-Node */ --width-input-search-max: 360px; /* Search-Input Max (Toolbar) */ /* ── Z-Index-Schichten (semantische SSOT) ────────────── Statt hardcodierter Zahlen ueberall, hier zentrale Stacking-Order. Aenderungen brauchen Bewusstsein fuer den Stack — nicht einfach "+1" auf existierendes Feld, sondern echte Layer-Position waehlen. 2026-05-07 zusammengetragen aus 60+ Hardcodes ueber 14 Dateien. Hinweis: Tab-Bars/Sub-Tabs/Sticky-Header nutzen lokale z-index-Werte (1/2/5/10/80) INNERHALB des Tab-Containers — kein eigener globaler Token noetig, weil der Stacking-Kontext jeweils per Tab-Container neu beginnt. */ --z-page-header: 999; /* Page-Header (innerhalb Tab-Container) */ /* Drawer-internes Modal-Stacking (240-320) — Confirm-Modal kann ueber einem geoeffneten Drawer geoeffnet werden, braucht eigene kleine Skala. */ --z-drawer-backdrop: 240; /* Drawer-Backdrop */ --z-drawer-stack: 249; /* Stack-Backdrop (mehrere Drawer offen) */ --z-drawer-panel: 250; /* Drawer-Panel selbst */ --z-drawer-modal-bg: 300; /* Modal-Backdrop ueber Drawer */ --z-drawer-modal-bg-strong: 310; /* Verstaerkter Modal-Backdrop ueber Drawer */ --z-drawer-modal: 320; /* Modal-Inhalt ueber Drawer */ --z-dev-banner: 899; /* DEV-Banner — bewusst UNTER Modal-Overlay */ --z-modal-overlay: 900; /* Modal-Backdrop */ --z-nav-rail: 1000; /* Nav-Rail (Sidebar fixed) */ --z-bm-overlay: 1100; /* Board-Modal Overlay (.bm-overlay) */ --z-bm-modal: 1101; /* Board-Modal Content (.bm-modal) */ --z-gs-backdrop: 1350; /* Globale Such-Palette Backdrop (unter Toast) */ --z-gs-panel: 1351; /* Globale Such-Palette Panel */ --z-admin-preview: 1200; /* Admin Mail-Template Preview */ --z-admin-preview-modal:1201; /* Admin Preview innerer Modal */ --z-admin-test: 1300; /* Admin Mail-Template Test (nested) */ --z-admin-test-modal: 1301; /* Admin Test innerer Modal */ --z-toast: 1400; /* Toast (immer obenauf, ueber Drawer + Modal) */ --z-error-overlay: 1500; /* 404 / Critical-Error-Overlay (deckt alles ab) */ --z-bottom-sheet-backdrop: 1050; /* Mobile Bottom-Sheet-Backdrop */ --z-bottom-sheet: 1051; /* Mobile Bottom-Sheet-Inhalt */ /* Body-gemountetes Modal (Confirm-Dialog etc.) auf Mobil: MUSS ueber dem Bottom-Sheet (1051) liegen. Die Confirm-Skala (--z-drawer-modal* 300-320) stapelt nur ueber Drawern und lag daher HINTER dem Vollbild-Sheet-Scrim — der Dialog war unsichtbar/nicht bestaetigbar ("alles graut aus"). Knapp ueber Palette/Cursor, unter Toast (1400) und Error-Overlay (1500). */ --z-modal-over-sheet: 1395; /* Confirm/Body-Modal ueber Bottom-Sheet (Mobil) */ /* Co-Editing Live-Cursor-Layer (fixed Overlay ueber Drawer/Modal/Nav) — bewusst KNAPP UNTER Toast: die Peer-Cursor liegen ueber der Arbeitsflaeche, verdecken aber Toast/Error-Overlay/Popover/Tooltip nicht. */ --z-collab-cursor: 1390; /* Live-Cursor-Layer (unter --z-toast) */ --z-popover: 9999; /* Popover, Dropdown */ --z-popover-elevated: 10000; /* Popover ueber Drawer */ --z-tooltip: 10001; /* Tooltip */ /* App-Toolbar-Tier-System (10010-10071) — 6 Toolbar-Layer, jeder einzeln nutzbar. Tier 9 = 10070, Tier 10 = 10071 (compact mode). */ --z-app-toolbar-base: 10010; /* Toolbar-Container */ --z-app-toolbar-tier-1: 10050; --z-app-toolbar-tier-2: 10051; --z-app-toolbar-tier-9: 10060; --z-app-toolbar-tier-10:10070; --z-app-toolbar-tier-11:10071; --z-mention-autocomplete: 10500; /* Mention-Autocomplete-Dropdown */ /* ── Focus ring ───────────────────────────────────────── */ /* Focus ring (legacy box-shadow version for backwards compat) */ --focus-ring: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--brand-default); /* Fluent 2 focus: use outline: 2px solid var(--brand-default); outline-offset: 2px; */ /* ── Duration ─────────────────────────────────────────── */ --duration-instant: 80ms; /* Mikro-Feedback (Hover-Color-Shift) */ --duration-snap: 100ms; /* Schnelle Background/Color-Wechsel */ --duration-quick: 120ms; /* Standard fuer kleine Hover/Background-Wechsel */ --duration-snappy: 140ms; /* Knapp unter fast — historisch 140ms-Cluster */ --duration-fast: 150ms; --duration-balanced: 160ms; /* Cluster fuer Cards/Buttons */ --duration-medium: 180ms; /* Zwischen fast und normal */ --duration-normal: 200ms; --duration-flow: 220ms; /* Sheet/Drawer-Flow */ --duration-relaxed: 240ms; --duration-spring: 260ms; /* Bottom-Sheet/Drawer-Slide mit cubic-bezier */ --duration-bounce: 280ms; /* Spring-Animationen mit cubic-bezier */ --duration-slow: 300ms; --duration-shimmer: 1.4s; /* Skeleton-Shimmer-Loop (sk-shimmer / tbb-skeleton-shimmer / loadingDot) — eine Geschwindigkeit, kein Async */ --duration-spinner: 0.9s; /* Standard-Spinner-Rotation (lod-spin / pt-spin) — eine Geschwindigkeit */ --duration-slower: 400ms; /* Laengere Transitions (Loading-Overlay-Fade, Progress-Fill) */ --duration-slowest: 500ms; /* Einmal-Emphasis-Puls (confirmPulse) */ --duration-pulse: 1.5s; /* Langsame Attention-/Dirty-Puls-Loops (pt-pulse, gastDirtyPulse) */ --duration-glow: 2s; /* Glow-/Highlight-Fade-Out (notifGlow) */ /* ── Curve ────────────────────────────────────────────── */ --ease-default: cubic-bezier(0.33, 0, 0.67, 1); --ease-decelerate: cubic-bezier(0, 0, 0, 1); /* ══ Premium Motion-System (Charakter B, 2026-06-30) ════════════════════════ Gelocktes Set fuer neuen/migrierten Code. Prinzipien: ease-out als Enter- Default (nie ease-in fuer Enter), <300ms, Enter≠Exit (Exit ≈ 0.65× Enter), NUR transform/opacity animieren (60fps). Die aelteren --duration-* / --ease-default/-decelerate / --lod-ease bleiben als Aliase bestehen (kein Bruch); neuer Code nutzt die Intent-Namen hier. ──────────────────────────────────────────────────────────────────────── */ /* Easing — Intent-basiert */ --ease-enter: cubic-bezier(0.23, 1, 0.32, 1); /* easeOutQuint — Default Enter/Feedback */ --ease-enter-strong: cubic-bezier(0.16, 1, 0.3, 1); /* easeOutExpo — grosse Reveals (Drawer/Panel) */ --ease-exit: cubic-bezier(0.3, 0, 0.8, 0.15); /* Accelerate — alle Exits */ --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); /* iOS-Sheet-Kurve — Drawer/Sheet */ --ease-move: cubic-bezier(0.77, 0, 0.175, 1); /* On-Screen-Bewegung / Morph */ --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* In-Place, neutral (Fluent-nah) */ --ease-overshoot: cubic-bezier(0.22, 1, 0.36, 1); /* dezenter Ueberschwung — Toast/Sheet */ /* Behavior-preserving Aliase der CSS-nativen Easing-Keywords — damit AUCH die Easings 100% Token sind (zentral tunebar/lint-bar), OHNE Verhalten zu aendern. Werte = exakt die CSS-Keywords. */ --ease-linear: linear; /* Spinner/Progress — konstante Rate */ --ease-soft: ease; /* CSS-Default — sanfter Hover/Color-Shift */ --ease-out-soft: ease-out; /* schneller Start, weiches Ende */ --ease-inout-soft: ease-in-out; /* symmetrisch */ --ease-in-soft: ease-in; /* langsamer Start (selten) */ /* Dauer — semantisch */ --motion-instant: 80ms; /* Farb-/Hover-Mikrofeedback */ --motion-fast: 140ms; /* Press, Toggle, kleine States */ --motion-quick: 180ms; /* Hover, Tooltip, Popover */ --motion-exit: 180ms; /* Standard-Exit (≈ 0.65× Enter) */ --motion-enter: 260ms; /* Standard-Enter, Listen, Toast */ --motion-overlay: 300ms; /* Modal, Dialog */ --motion-drawer: 340ms; /* Drawer / Sheet Enter */ --motion-stagger: 55ms; /* Schrittweite Listen-Stagger (max ~8 Items staffeln) */ /* * ── Farbkontrast-Audit (WCAG AA) ───────────────── * Geprueft: 2026-04-08 * Anforderung: Normaler Text ≥4.5:1, grosse Texte/UI ≥3:1 * * PASS (≥4.5:1): * --color-text on white: 15.5:1 * --color-text-secondary on white: 10.0:1 * --color-text-tertiary on white: 6.2:1 * --color-text-muted on white: 5.0:1 * --brand-text-on on brand: 5.2:1 * --brand-default on white: 5.2:1 * --status-danger-fg on danger-bg: 4.6:1 * --status-warning-fg on warning-bg:5.5:1 * --status-success-fg on success-bg:4.7:1 * --status-review-fg on review-bg: 6.3:1 * --color-text-muted on bg-secondary:4.5:1 * white on lod-blue-dark (topbar): 14.1:1 * * BEWUSSTER KOMPROMISS: * --color-text-disabled on white: 1.9:1 — WCAG erlaubt niedrigen Kontrast fuer Disabled-States * --status-abgeschlossen on white: 2.7:1 — grauer Badge-Text, immer mit groesserem Font oder Icon; akzeptabel als UI-Element (≥3:1 knapp verfehlt) */ /* ── Calendar/PZE specific ──────────────────────── */ --pze-approved-fg: #155724; --pze-approved-bg: #d4edda; /* * ── Responsive Breakpoints (Konvention) ────────── * Desktop: >=1400px (Standard, kein media query) * Notebook: 1000px - 1399px -> @media (max-width: 1399px) * Tablet: <1000px -> @media (max-width: 999px) * * Nur diese drei Werte verwenden - nie andere. * CSS Custom Properties koennen keine @media steuern, * daher Breakpoints als Konvention dokumentiert. */ /* ════════════════════════════════════════════════════════════════════════ v2 DESIGN-SYSTEM TOKENS (ergaenzend, KANBAN-v2 Kombi A) ════════════════════════════════════════════════════════════════════════ Quelle: ursprünglich aus dem Stakeholder-Handoff-Paket übernommen (Verzeichnis docs/design_handoff_lod/ wurde nach Integration entfernt) Namensraum: --lod-* (Namensmuster kollidieren nicht mit Bestand, siehe docs/reference/migration/css-collision-report.md) Nutzung: global in :root. Altseiten konsumieren sie aktuell nicht, v2-Seiten laden zusaetzlich /styles/app.css fuer die Handoff-Primitive. Die Base-Typography-Regeln des Handoffs (html/body/h1-h4/p/a/code) liegen bewusst NICHT hier, sondern in app.css — sonst greifen sie auf Altseiten. ════════════════════════════════════════════════════════════════════════ */ /* Brand (v2) */ --lod-darkblue: #1A4B76; --lod-violet: #4D6493; --lod-turquoise: #70B1B6; /* Darkblue scale */ --lod-darkblue-900: #0F2E48; --lod-darkblue-800: #153A5C; --lod-darkblue-700: #1A4B76; --lod-darkblue-600: #2A5F8D; --lod-darkblue-500: #3D77A6; --lod-darkblue-400: #6A98BD; --lod-darkblue-300: #9BBAD3; --lod-darkblue-200: #CADCE8; --lod-darkblue-100: #E6EEF5; --lod-darkblue-50: #F3F7FB; /* Turquoise scale */ --lod-turquoise-900: #3C6669; --lod-turquoise-700: #70B1B6; --lod-turquoise-500: #8FC3C7; --lod-turquoise-300: #BADCDE; --lod-turquoise-100: #E4F1F2; --lod-turquoise-50: #F1F7F8; --lod-turquoise-cyan: #20C1C9; /* Saturierter Cyan fuer Bar-Charts/Fills */ /* Amber scale (fuer Warning-States, Tailwind-kompatibel) */ --lod-amber-800: #8a5410; /* Dunkler Amber-Ton fuer PZE-Text (Abwesenheits-Labels) */ --lod-amber-700: #b45309; --lod-amber-600: #d97706; --lod-amber-500: #f59e0b; --lod-amber-200: #fcd49a; --lod-amber-50: #fff4e0; /* Violet scale */ --lod-violet-900: #2E3E5C; --lod-violet-700: #4D6493; --lod-violet-500: #7B8DB3; --lod-violet-300: #B0BCD2; --lod-violet-100: #E2E7EF; --lod-violet-50: #F0EDF5; /* Sehr-hell — Wissen-Kategorie + Status-noprio */ /* Neutrals */ --lod-white: #FFFFFF; --lod-gray-50: #F7F8FA; --lod-gray-100: #EEF0F3; --lod-gray-200: #DEE2E8; --lod-gray-300: #C2C8D0; --lod-gray-400: #A6ACB4; /* Mittel zwischen 300 + 500 */ --lod-gray-500: #8A9099; --lod-gray-600: #6B7280; /* Tailwind-kompatibel, am haeufigsten als Fallback */ --lod-gray-700: #555A63; --lod-gray-800: #3A4A5C; --lod-gray-900: #1F1F1F; --lod-muted: var(--lod-gray-600); /* Generischer "muted text"-Alias */ --lod-bg-soft: var(--lod-gray-50); --lod-border-light: #E5E7EB; /* Semantic — nur die genutzten. */ --lod-fg-1: var(--lod-gray-900); --lod-border: var(--lod-gray-200); /* Status */ --lod-success: #3F8F6F; --lod-success-50: #E8F6EE; --lod-success-700: #1F7A3F; --lod-warning: #C98A1A; --lod-warning-100: #FFF6E5; --lod-warning-300: #E8B960; --lod-warning-800: #7A5200; --lod-danger: #B1483A; --lod-danger-300: #F5C2C2; /* Tone-Paletten (soft + text) — fuer Admin-Badges, Tag-Highlights etc. Nutzt eine bewusst von --status-*-bg/-fg unabhaengige hellere Tonalitaet, damit dichte Badge-Grids nicht so dominant wirken wie Status-Pills. */ --tone-info-soft: #E1EFFE; --tone-info-text: #1E429F; --tone-success-soft: #DEF7EC; --tone-success-text: #03543F; --tone-warn-soft: #FEF3C7; --tone-warn-text: #92400E; --tone-danger-soft: #FDE2E2; --tone-danger-text: #9B1C1C; /* Herkunft-Tag-Farben (proj-support hat eigene Braun-Tonalitaet, proj-projekt nutzt darkblue, proj-intern grau, proj-vertrieb Lila). */ --tag-support-bg: #FAEED5; --tag-support-fg: #7A4F1C; --tag-vertrieb-bg: #EEE6F4; --tag-vertrieb-fg: #5A3A7A; /* Mentions/Gast/Indigo-Akzent — eigene Lila-Familie fuer @-Mentions, Gast- Markierungen, Wissens-Kategorien. Bewusst andere Tonalitaet als --lod-violet (das ist die Brand-Farbe). */ --mention-fg: #5c2d91; /* Dunkles Lila — Text */ --mention-bg: #f2ebfa; /* Sehr helles Lila — BG */ --indigo-50: #e0e7ff; /* Indigo-soft fuer Gast-Highlights */ --indigo-100: #c7d2fe; --indigo-700: #3730a3; /* Indigo-Text */ --indigo-800: #312e81; --purple-100: #ede9fe; --purple-500: #8b5cf6; /* Kategorie-Marker */ --purple-700: #6b21a8; /* Avatar-Praesenz (Teams-Status) — extern definierte Brand-Werte. */ --presence-available: #92c353; --presence-busy: #c4314b; --presence-away: #fcd116; /* Slate-Skala (Tailwind-kompatibel) fuer Dashboard-Charts/Tooltips, wo eine etwas blau-stichigere Gray-Variante besser zur Daten-Visualisierung passt als die warm-graue --lod-gray-Skala. */ --slate-500: #64748b; --slate-600: #475569; --slate-700: #334155; --slate-900: #1f2328; /* Green-Skala (Tailwind-kompatibel, parallel zu --lod-success) — verschiedene Sub-Modi (Save-Feedback, Pillen, Kategorie) brauchen abgestufte Gruen-Toene. */ --green-100: #dcfce7; --green-600: #16a34a; --green-700: #15803d; /* Orange-Skala fuer Kategorie/Status-Marker (parallel zu --lod-amber, da Tailwind-Orange visuell anders als Amber ist). */ --orange-600: #ea580c; --orange-700: #c2410c; --orange-100: #ffedd5; --orange-50: #fff3e6; /* Red-Skala (Tailwind) fuer Error-Banners + spezifische Hover-Reds. Parallel zu --status-danger-* die etwas weicher sind. */ --red-50: #fef2f2; --red-100: #fde7e7; --red-200: #fecaca; --red-700: #b42318; --red-800: #b91c1c; --red-900: #8b1f1f; /* Yellow-Skala (Bootstrap-Style fuer Warning-Alerts, Highlight-Marks). Parallel zu --lod-amber-* (Tailwind) — leicht andere Tonalitaet. */ --yellow-100: #fff3cd; --yellow-200: #ffe69c; --yellow-300: #FFF3B0; /* Highlight-Mark in Pickers */ --yellow-800: #664d03; --yellow-900: #a15c00; /* Indigo Pale (helle Indigo-Tonalitaet — Admin-Info-Boxes) */ --indigo-25: #eef4ff; /* Sehr-hell */ --indigo-200: #c7d7ff; /* Mention-erweitert: Hover-Variante + Dark-Mode-Vorbereitung */ --mention-bg-hover: #e4d4f5; --mention-fg-deep: #3b1d5e; --mention-fg-light: #c4b5fd; --mention-fg-light-2: #ddd6fe; /* SLA-Warn-Akzent (Karten mit ablaufender SLA — bewusst weicher als danger) */ --sla-warn: #f87171; /* Microsoft-Brand-Farben (extern definiert, Identifikation in UI). */ --ms-docs-purple: #7c3aed; --brand-teams: #4049B9; /* Microsoft Teams Indigo */ --brand-teams-meeting:#0e7a0d; /* Teams Meeting-Status (Gruen) */ /* Mein-Bereich Teal-Action — sekundaere Action-Farbe (vs. brand-default). */ --action-teal: #0d7377; /* Kategorie-Marker (Admin-Wissensbereich) — palette fuer kat-card-*-Modifier */ --kat-blue-fg: var(--brand-default); --kat-blue-bg: var(--brand-light); --kat-purple-fg: var(--purple-500); --kat-purple-bg: var(--purple-100); --kat-green-fg: var(--green-600); --kat-green-bg: var(--green-100); --kat-yellow-fg: var(--lod-amber-600); --kat-yellow-bg: var(--lod-warning-100); --kat-orange-fg: var(--orange-600); --kat-orange-bg: var(--orange-100); --kat-gray-fg: var(--lod-gray-600); --kat-gray-bg: #f3f4f6; /* Pill-Farben fuer Review/Rating (Amber-Familie + Hot-Rot). Bewusst von --status-warning-* unterscheidbar (kraeftiger). */ --pill-amber-bg: #FBF1D9; --pill-amber-fg: #8C5F0C; --rating-hot-bg: #FCE4EC; --rating-hot-fg: #B71C2C; --rating-warm-bg: #FFF3D9; --rating-warm-fg: var(--pill-amber-fg); /* Typography */ --lod-font-display: "Barlow", "Acumin Pro Wide", "Segoe UI", system-ui, sans-serif; --lod-font-body: "Segoe UI", "Inter", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --lod-font-sans: var(--lod-font-body); /* Alias */ --lod-font-mono: "Cascadia Code", "Consolas", "SF Mono", ui-monospace, monospace; /* Radii */ --lod-radius-lg: 12px; /* Shadows (blau-getoent) */ --lod-shadow-lg: 0 14px 32px rgba(26, 75, 118, 0.14); --lod-shadow-focus: 0 0 0 3px rgba(112, 177, 182, 0.35); /* Overlay-Scrims — SSOT fuer ALLE Dialog-/Panel-/Sheet-Backdrops. Bewusst leicht + brand-getoent (kein Voll-Verdunkeln): der Kontext dahinter bleibt erkennbar. Konsumenten: Confirm-/Board-Modal, Keyboard-Cheatsheet, Mobile-Nav, Bottom-Sheets, Topbar-Sheets, 404-Overlay. --strong nur fuer Kontexte, die klar dominieren muessen (Modal ueber gedimmtem Drawer, Vollbild-Takeover wie 404). Bewusste Ausnahmen, die diese Tokens NICHT nutzen: Lightbox (Medien-Viewer, absichtlich dunkel) und App-Loading-Splash (Boot-Screen, kein Hintergrund dahinter). Such-Palette (18%) und Drawer-Backdrop (22%) sind absichtlich noch leichter getunt und bleiben so. */ --lod-scrim: color-mix(in srgb, var(--lod-darkblue-900) 24%, transparent); --lod-scrim-strong: color-mix(in srgb, var(--lod-darkblue-900) 32%, transparent); /* Motion */ --lod-ease: cubic-bezier(0.2, 0.7, 0.2, 1); }