/* ============================================================ Roombeat · Design-Tokens im LEIFKEN-AI-Design Quelle der Werte: _standards/LEIFKEN-AI-DESIGN.md (Palette, Schrift) und _standards/DESIGN-SYSTEM.md (App-Profil). Nichts dazwischen erfinden. Teil 1 sind die Markenwerte. Teil 2 bildet die Variablennamen ab, mit denen die Komponenten (live.css, regie.css, praesentation.css) arbeiten, damit die Bauteile unverändert bleiben und nur die Werte wechseln. ============================================================ */ :root { color-scheme: light; /* ---------- 1. LEIFKEN AI ---------- */ --grund: #FFFFFF; /* Weiß, Karten, Formularflächen */ --flaeche: #F7F9FB; /* Nebel: App-Grund */ --flaeche-2: #EDF1F6; /* Zwischenebene, Zeilen beim Überfahren */ --linie: #DDE3EC; /* Trennlinien, Rahmen */ --navy: #0D1C32; /* dunkle Rahmenflächen */ --marke: #1B3966; /* Blau: Struktur */ --signal: #E94E1B; /* Orange: Aktion und aktiver Zustand */ --signal-dunkel: #C23F14; /* Buttonfläche, oranger Text auf Hell */ --signal-hover: #F26430; --text: #0D1C32; --text-leise: #566781; --text-3: #8C9BB6; --himmel: #A8B7D1; /* nur auf dunklem Grund */ --ok: #15803D; --ok-flaeche: #F0FDF4; --warn: #B45309; --warn-flaeche: #FFFBEB; --fehler: #B91C1C; --fehler-flaeche: #FEF2F2; --glas: rgba(255,255,255,.72); --glas-leiste: rgba(255,255,255,.62); --glas-kante: rgba(255,255,255,.62); --schatten-glas: 0 8px 32px rgba(27,57,102,.10), 0 1px 1px rgba(27,57,102,.04); --kopf-flaeche: rgba(247,249,251,.85); --karte-kante: rgba(13,28,50,.08); --schrift: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --schrift-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace; /* ---------- 2. Namen der Komponenten ---------- */ /* Akzente: "lime" war das Signal, "pink" die Gegenstimme. Signal = Orange, Gegenstimme = Blau. */ --lime: var(--signal); --lime-bright: var(--signal-hover); --lime-dark: var(--signal-dunkel); --pink: var(--marke); --pink-bright: #24487F; --pink-dark: var(--marke); --gold: var(--warn); --black: var(--navy); /* kein reines Schwarz */ --graphite: var(--navy); --white: #FFFFFF; --on-accent: #FFFFFF; /* Text auf Orange */ /* Hintergrund-Treppe, hell */ --bg-0: #FFFFFF; --bg-1: var(--flaeche); --bg-2: #FFFFFF; --bg-3: var(--flaeche-2); --bg-4: var(--linie); /* Text auf Hell */ --text-100: var(--text); --text-200: rgba(13,28,50,.92); --text-300: var(--text-leise); --text-400: var(--text-leise); --text-500: var(--text-3); --text-600: rgba(13,28,50,.30); /* Rahmen */ --border-subtle: rgba(13,28,50,.06); --border-soft: var(--linie); --border-strong: rgba(27,57,102,.22); --border-active: rgba(27,57,102,.20); /* blaue Kante nur bei Hover/Aktiv */ --focus-ring: var(--marke); /* Status */ --status-green: var(--ok); --status-yellow: var(--warn); --status-red: var(--fehler); --signal-text: var(--signal-dunkel); --ok-text: var(--ok); --warn-text: var(--warn); --alert-text: var(--fehler); /* Verläufe gibt es im LEIFKEN-Design nicht. Die Namen bleiben, damit background-clip:text weiter funktioniert, der Wert ist eine Vollfarbe. */ --grad-headline: linear-gradient(var(--signal-dunkel), var(--signal-dunkel)); --grad-progress: linear-gradient(var(--signal), var(--signal)); --grad-text: linear-gradient(var(--text), var(--text)); /* Abstände (8er-Raster der Marke) */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; /* Radien der Anwendung: 8 / 12 / 16 */ --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px; /* Schatten, navy getönt und weich */ --shadow-sm: 0 1px 2px rgba(13,28,50,.04); --shadow-md: var(--schatten-glas); --shadow-lg: 0 16px 48px -12px rgba(27,57,102,.22), 0 2px 6px rgba(27,57,102,.06); /* Keine Glow-Effekte */ --glow-lime: none; --glow-pink: none; /* Schrift */ --font: var(--schrift); --font-display: var(--schrift); --mono: var(--schrift-mono); --fs-xs: 12px; --fs-sm: 14px; --fs-md: 16px; --fs-lg: 20px; --fs-xl: 24px; --fs-2xl: 32px; --fs-3xl: 40px; /* Bewegung */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --t-fast: .15s; --t: .2s; --t-slow: .4s; /* KI-Denk-Indikator */ --think-pulse: 1.15s; --think-stagger: .16s; --think-cycle: 1.5s; --think-word-in: .3s; /* Layout */ --container: 1200px; --reading: 900px; } /* ============================================================ Dark Mode der Regie (DESIGN-SYSTEM.md §2b, Klasse `dark` am , gesetzt von theme-init.js aus localStorage 'ol-theme'). Primär kippt im Dunkeln auf Orange, Blau wird zum hellen Strukturton. Leinwand, Präsentation und Handy laden theme-init.js nicht und bleiben hell. ============================================================ */ html.dark { color-scheme: dark; --grund: #101826; --flaeche: #0A1119; --flaeche-2: #172133; --linie: #1E293B; --marke: #8FA6CC; --signal-dunkel: #E94E1B; --text: #F1F5F9; --text-leise: #A3B1C6; --text-3: #7D8CA6; --text-200: rgba(241,245,249,.92); --text-600: rgba(241,245,249,.30); --border-subtle: rgba(255,255,255,.06); --border-strong: rgba(255,255,255,.18); --border-active: rgba(255,255,255,.22); --focus-ring: #E94E1B; --ok: #4ADE80; --ok-flaeche: rgba(21,128,61,.16); --warn: #FBBF24; --warn-flaeche: rgba(180,83,9,.18); --fehler: #F87171; --fehler-flaeche: rgba(185,28,28,.18); --glas: rgba(255,255,255,.045); --glas-leiste: rgba(255,255,255,.045); --glas-kante: rgba(255,255,255,.10); --schatten-glas: 0 8px 32px rgba(0,0,0,.35); --shadow-lg: 0 16px 48px -12px rgba(0,0,0,.6); --kopf-flaeche: rgba(10,17,25,.85); --karte-kante: rgba(255,255,255,.08); } html.dark body { background: var(--flaeche); } html.dark { --go-bg-soft: #101826; --go-surface: rgba(255,255,255,.04); --go-surface-hover: rgba(255,255,255,.08); --go-border-strong: rgba(255,255,255,.18); --go-text-subtle: #8D9BB3; --go-glass-border: rgba(255,255,255,.10); }