/* * tokens.css — LimnoNetz Design-Tokens, Farbwelt „Uferlicht" (UF-D7, * Owner-Entscheidung revidiert 2026-08-02: Tiefsee → Uferlicht). * * EINZIGE FARBQUELLE. Keine Hex-Werte außerhalb dieser Datei (Abnahmekriterium, * UI-Foundation-Ticket §6). Templates, project.css und project.js nutzen * ausschließlich var(--ln-*) bzw. die --bs-*-Overrides von hier. * * Ladereihenfolge: vendor/bootstrap → tokens.css → project.css. */ /* Geist Sans, self-hosted (UF-D3 revidiert 2026-08-02, AD-10 — keine Font-CDNs). Ersetzt Inter Variable: Inter läuft spürbar breiter, die Stationskachel brach damit Zeilen um, die Geist einzeilig trägt — im Vier-Wege-Specimen gegen den System-Stack (SF Pro) belegt. Nebenbei 56 KB statt 344 KB. Lizenz liegt als fonts/Geist-LICENSE.txt bei (OFL 1.1 verlangt die Mitlieferung). */ @font-face { font-family: "Geist Sans"; src: url("../fonts/Geist-Variable.0e46e732cced.woff2") format("woff2-variations"); font-weight: 100 900; font-style: normal; font-display: swap; } :root { /* ---- Kernfarben (Uferlicht) — WCAG-AA-korrigiert (Review 2026-08-02). Abweichungen zum Mockup-Artefakt sind bewusst und begründet: --ln-warn #a86a00 → #9a6200 (war 4,37:1 auf Card, jetzt 5,04:1) --ln-ink-muted #6b7a72 → #5f6e66 (war 4,46:1 auf Card, jetzt 5,35:1) --ln-surface #faf8f3 → #f4f0e7 (Karten hoben sich mit 1,05 Verhältnis nicht ab; jetzt 1,12 — sichtbare Stufe) --ln-line-strong ist im Mockup nicht enthalten (WCAG 1.4.11). ---- */ --ln-primary: #2a6f5f; /* Primäraktionen, Links (5,22:1 auf Surface) */ --ln-primary-rgb: 42, 111, 95; /* Kanalwerte zu --ln-primary — muss synchron bleiben */ --ln-primary-deep: #1c4f43; /* Hover/Active, Toast-Grund */ --ln-surface: #f4f0e7; /* Seitenhintergrund (warmer Sand) */ --ln-card: #fffdf9; /* Kacheln/Karten (Papier) */ --ln-on-dark: #ffffff; /* Vordergrund auf dunklen Gründen (Dark-Mode-sicher) */ --ln-ink: #24312c; /* Fließtext */ --ln-ink-muted: #5f6e66; /* Sekundärtext, Zeitstempel (5,35:1 auf Card) */ --ln-line: #e8e3d8; /* Trenner (rein dekorativ) */ --ln-line-strong: #888f89; /* Rahmen für Bedienelemente (3,30:1 auf Card) */ --ln-ok: #3d7a34; /* Erfolg, Batterie ok (5,13:1 auf Card) */ --ln-warn: #9a6200; /* Warnung, Batterie niedrig (5,04:1 auf Card) */ --ln-danger: #ab3226; /* Fehler, Widerruf (6,43:1 auf Card) */ --ln-focus: #2a6f5f; /* :focus-visible-Outline (= --ln-primary) */ /* ---- Navigation (helle Papier-Nav = Uferlicht-Charakteristikum). Die Kante trägt hier die Trennung, nicht der Farbsprung: ---- */ --ln-nav-bg: #fffdf9; --ln-nav-ink: #24312c; --ln-nav-active: #2a6f5f; --ln-nav-line: #e3ddd0; /* ---- Sichtbarkeits-Badges (Ticket §2.2) — Governance entkoppelt von den Semantikfarben (Werte dürfen später divergieren): ---- */ --ln-vis-private: var(--ln-ink-muted); --ln-vis-aggregate: var(--ln-warn); --ln-vis-public: var(--ln-ok); /* ---- Daten-/Serienfarben (fachlich, nicht dekorativ; ≥3:1 auf Card) ---- */ --ln-series-level: #2f7fa0; /* Wasserstand (4,42:1) */ --ln-series-temp: #cf5f43; /* Wassertemperatur (3,85:1) */ --ln-series-oxygen: #3d7a34; /* Gelöster Sauerstoff (= --ln-ok, 5,13:1) */ --ln-series-battery: #85918a; /* Batterie/Gerätezustand (3,26:1) */ --ln-series-band: color-mix(in srgb, var(--ln-series-level) 15%, transparent); --ln-map-approximate: #7a6729; /* Lageunschärfe (5,44:1 auf Card) */ /* ---- Form ---- Weicher als Tiefsee (6/4), aber bewusst diesseits der Mockup-Werte (12/8): die Kachel soll gerundet wirken, nicht abgerundet. */ --ln-radius: 8px; /* Kacheln, Modals */ --ln-radius-sm: 6px; /* Buttons, Inputs, Badges */ /* Zweilagig: enge Kontaktkante + weicher Abwurf. Einlagig verschwindet der Schatten auf einer warmen Fläche, das war der „nicht abgesetzt“- Befund. Farbton aus --ln-primary-deep, nie neutrales Schwarz. */ --ln-shadow: 0 1px 2px rgb(28 79 67 / 0.06), 0 4px 12px rgb(28 79 67 / 0.08); --ln-shadow-raised: 0 2px 4px rgb(28 79 67 / 0.07), 0 10px 24px rgb(28 79 67 / 0.11); --ln-shadow-modal: 0 16px 40px rgb(28 79 67 / 0.18); /* Seitenhintergrund: Sandfläche + ein sehr weicher Lichtabfall von oben („Uferlicht“). Bewusst knapp unter der Wahrnehmungsschwelle — die Fläche darf Karten tragen, nicht mit ihnen konkurrieren (Operate). */ --ln-surface-wash: radial-gradient( 120% 55% at 50% -8%, color-mix(in srgb, var(--ln-card) 88%, transparent) 0%, transparent 62% ); /* ---- Typografie ---- */ --ln-font-sans: "Geist Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --ln-size-metric: 1.5rem; /* Messwert-Ziffern in Kacheln (Ticket §2.3) */ --ln-size-kpi: 1.75rem; /* KPI-Ziffern im Dashboard-Kopf */ /* ================================================================ * Bootstrap-5.3-Mapping (Semantik-Mapping, Ticket §2.1) * ================================================================ */ --bs-primary: var(--ln-primary); --bs-primary-rgb: var(--ln-primary-rgb); --bs-success: var(--ln-ok); --bs-warning: var(--ln-warn); --bs-danger: var(--ln-danger); --bs-body-bg: var(--ln-surface); --bs-body-color: var(--ln-ink); --bs-border-color: var(--ln-line); --bs-body-font-family: var(--ln-font-sans); /* 14px Fließtext wie im Mockup — Bootstraps 16px-Grundmaß ist für eine Datenoberfläche zu groß. Die rem-basierte Typo-Skala bleibt am 16px-Wurzelmaß hängen, Zoom und Nutzer-Grundschrift also intakt. */ --bs-body-font-size: 0.875rem; --bs-border-radius: var(--ln-radius-sm); --bs-link-color: var(--ln-primary); --bs-link-hover-color: var(--ln-primary-deep); /* Bootstrap 5.3 rendert Links/Utilities über die -rgb-Varianten — ohne diese Overrides blieben Links im Framework-Blau: */ --bs-link-color-rgb: var(--ln-primary-rgb); --bs-link-hover-color-rgb: 28, 79, 67; /* muss zu --ln-primary-deep passen */ --bs-body-color-rgb: 36, 49, 44; /* muss zu --ln-ink passen */ --bs-body-bg-rgb: 244, 240, 231; /* muss zu --ln-surface passen */ --bs-focus-ring-color: rgba(var(--bs-primary-rgb), 0.25); } /* Bootstrap-Buttons nutzen kompilierte Werte, daher Override über die Button-eigenen CSS-Variablen (Ticket-Vorgabe): */ .btn-primary { --bs-btn-color: var(--ln-on-dark); --bs-btn-bg: var(--ln-primary); --bs-btn-border-color: var(--ln-primary); --bs-btn-hover-color: var(--ln-on-dark); --bs-btn-hover-bg: var(--ln-primary-deep); --bs-btn-hover-border-color: var(--ln-primary-deep); --bs-btn-active-color: var(--ln-on-dark); --bs-btn-active-bg: var(--ln-primary-deep); --bs-btn-active-border-color: var(--ln-primary-deep); --bs-btn-disabled-color: var(--ln-on-dark); --bs-btn-disabled-bg: var(--ln-primary); --bs-btn-disabled-border-color: var(--ln-primary); --bs-btn-focus-shadow-rgb: var(--ln-primary-rgb); } .btn-outline-primary { --bs-btn-color: var(--ln-primary); --bs-btn-border-color: var(--ln-primary); --bs-btn-hover-color: var(--ln-on-dark); --bs-btn-hover-bg: var(--ln-primary); --bs-btn-hover-border-color: var(--ln-primary); --bs-btn-active-color: var(--ln-on-dark); --bs-btn-active-bg: var(--ln-primary-deep); --bs-btn-active-border-color: var(--ln-primary-deep); --bs-btn-disabled-color: var(--ln-primary); --bs-btn-disabled-border-color: var(--ln-primary); --bs-btn-focus-shadow-rgb: var(--ln-primary-rgb); } /* ================================================================ * UF-D2: v1 ist light-only, aber dark-ready. Dark Mode kommt später * als reiner Token-Override-Block — kein Refactoring nötig. Struktur: * * [data-bs-theme="dark"] { * --ln-surface: …; * --ln-card: …; * --ln-ink: …; * --ln-ink-muted: …; * --ln-line: …; * … (nur Token-Werte überschreiben, keine Komponenten anfassen) * } * ================================================================ */