/* * @ki-forge/ui — Design-Tokens (hell + dunkel) * Kanon: hub/data/projekt-dokumente/DESIGN-GUIDE.md (Marc, 2026-06-10) * Grundstil "Pure Light" (Apple hell) + Dark-Variante (Apple HIG dark). * EINE Wahrheit fuers Design — Aenderung nur hier, dann in allen Apps nachziehen. * * Umschaltung: . Ohne data-theme greift * prefers-color-scheme (siehe Block ganz unten). theme.js verwaltet das. */ :root, :root[data-theme="light"] { color-scheme: light; /* --- Flaechen / Text (Guide Pure Light) --- */ --kf-bg: #F5F5F7; /* Seitenhintergrund */ --kf-bg-elevated: #FFFFFF; /* leicht erhoehte Flaeche */ --kf-card: #FFFFFF; /* Karten / Panels */ --kf-card-2: #FBFBFD; /* verschachtelte Karte */ --kf-text: #1D1D1F; /* Haupttext */ --kf-text-2: #6E6E73; /* Untertitel / Hinweise */ --kf-text-3: #8E8E93; /* schwaechster Text */ --kf-border: rgba(60,60,67,.12); /* haarfeine Trennlinie */ --kf-border-strong: rgba(60,60,67,.20); --kf-shadow: 0 1px 3px rgba(0,0,0,.08); --kf-shadow-lg: 0 8px 30px rgba(0,0,0,.12); /* --- Aktion / Status (Guide) --- */ --kf-accent: #0A84FF; /* Primaer-Knoepfe, aktive Zustaende */ --kf-accent-hover: #0071E3; --kf-accent-soft: #E8F1FE; /* getoente Flaeche der Aktionsfarbe */ --kf-on-accent: #FFFFFF; --kf-track: #E5E5EA; /* Fortschrittsbalken-Grund */ --kf-ok: #34C759; /* laeuft / Erfolg */ --kf-ok-soft: #E4F8EA; --kf-warn: #FF9F0A; /* Warnung */ --kf-warn-soft: #FFF3E0; --kf-err: #FF453A; /* Fehler */ --kf-err-soft: #FFEBEA; --kf-verified: #1FA650; /* geprueft-Schrift (Punkt-Kanon) */ /* --- Firmen-Kennung (Zugehoerigkeit, NIE Aktion/Status) --- */ --kf-kipfer: #5B9BD5; --kf-kipfer-soft: #EAF3FB; --kf-monn: #E89B4B; --kf-monn-soft: #FCF1E3; /* --- Terminal: dunkle Insel in JEDER Welt --- */ --kf-term-bg: #1C1C1E; --kf-term-text: #E5E5EA; /* --- Form --- */ --kf-radius: 16px; /* Karten */ --kf-radius-sm: 10px; /* Felder/Buttons */ --kf-radius-pill: 999px; /* Pillen/Chips */ --kf-space: 4px; /* Abstandsraster */ --kf-font: -apple-system, system-ui, "Segoe UI", Roboto, sans-serif; --kf-font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace; --kf-ease: 180ms ease; } :root[data-theme="dark"] { color-scheme: dark; --kf-bg: #000000; --kf-bg-elevated: #1C1C1E; --kf-card: #1C1C1E; --kf-card-2: #2C2C2E; --kf-text: #F5F5F7; --kf-text-2: #98989D; --kf-text-3: #8E8E93; --kf-border: rgba(84,84,88,.60); --kf-border-strong: rgba(120,120,128,.55); --kf-shadow: 0 1px 3px rgba(0,0,0,.55); --kf-shadow-lg: 0 10px 34px rgba(0,0,0,.65); --kf-accent: #0A84FF; /* Apple systemBlue (dark) — bleibt */ --kf-accent-hover: #409CFF; --kf-accent-soft: rgba(10,132,255,.18); --kf-on-accent: #FFFFFF; --kf-track: #2C2C2E; --kf-ok: #30D158; --kf-ok-soft: rgba(48,209,88,.16); --kf-warn: #FF9F0A; --kf-warn-soft: rgba(255,159,10,.16); --kf-err: #FF453A; --kf-err-soft: rgba(255,69,58,.18); --kf-verified: #30D158; --kf-kipfer: #5B9BD5; --kf-kipfer-soft: rgba(91,155,213,.18); --kf-monn: #E89B4B; --kf-monn-soft: rgba(232,155,75,.18); --kf-term-bg: #0C0C0D; --kf-term-text: #E5E5EA; } /* * Auto-Modus: kein data-theme gesetzt -> Systempraeferenz. * theme.js setzt normalerweise data-theme explizit; dieser Block faengt den * Erst-Frame ab, bevor JS laeuft (gegen Farbsprung). */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { color-scheme: dark; --kf-bg:#000000; --kf-bg-elevated:#1C1C1E; --kf-card:#1C1C1E; --kf-card-2:#2C2C2E; --kf-text:#F5F5F7; --kf-text-2:#98989D; --kf-text-3:#8E8E93; --kf-border:rgba(84,84,88,.60); --kf-border-strong:rgba(120,120,128,.55); --kf-shadow:0 1px 3px rgba(0,0,0,.55); --kf-shadow-lg:0 10px 34px rgba(0,0,0,.65); --kf-accent-hover:#409CFF; --kf-accent-soft:rgba(10,132,255,.18); --kf-track:#2C2C2E; --kf-ok:#30D158; --kf-ok-soft:rgba(48,209,88,.16); --kf-warn-soft:rgba(255,159,10,.16); --kf-err-soft:rgba(255,69,58,.18); --kf-verified:#30D158; --kf-kipfer-soft:rgba(91,155,213,.18); --kf-monn-soft:rgba(232,155,75,.18); --kf-term-bg:#0C0C0D; } }