/* ═══════════════════════════════════════════════════════════════════ Jarvis – Gemeinsame Theme-Variablen (Single Source of Truth) ─────────────────────────────────────────────────────────────────── Wird VOR style.css / chat.css auf ALLEN Seiten eingebunden. Dark = :root (Default), Hell = body.light. Der Branding-Skill (branding.js) ueberschreibt diese Variablen zur Laufzeit inline auf → wirkt dadurch einheitlich auf allen Seiten. chat.css aliast seine eigenen Namen (--purple/--bg/--surface/…) auf diese Variablen, damit Branding + Dark/Light ueberall identisch greifen. ═══════════════════════════════════════════════════════════════════ */ :root { /* Native Controls (Select-Popups, Scrollbars, Date-Picker) folgen dem Theme. */ color-scheme: dark; /* Tinten-/Schatten-Basis (Dark = Weiss/Schwarz); im Light-Theme gekippt. Alle rgba(var(--fg-rgb), …)-Raender/-Overlays folgen automatisch. */ --fg-rgb: 255, 255, 255; --shadow-rgb: 0, 0, 0; --bg-primary: #0a0e17; --bg-secondary: #111827; --bg-glass: rgba(15, 23, 42, 0.75); --bg-glass-heavy: rgba(15, 23, 42, 0.9); --border: rgba(var(--fg-rgb), 0.08); --border-hover: rgba(var(--fg-rgb), 0.15); --text-primary: #f8fafc; --text-secondary: #94a3b8; --text-muted: #64748b; /* Akzent = Markenfarbe (Default Lila, von Branding ueberschrieben) */ --accent: #9B59B6; --accent-hover: #BB86FC; --accent-dark: #6A0DAD; --accent-glow: rgba(155, 89, 182, 0.4); --accent-light: rgba(155, 89, 182, 0.1); /* RGB-Tripel des Akzents fuer Toenungen rgba(var(--accent-rgb), …). Wird von branding.js aus der Markenfarbe mitgesetzt. */ --accent-rgb: 155, 89, 182; /* Akzent-Verlauf fuer Primaer-Buttons (.btn-primary). Akzentbasiert, damit Branding automatisch greift. */ --gradient: linear-gradient(135deg, var(--accent), var(--accent-dark)); --success: #10b981; --warning: #f59e0b; --danger: #ef4444; --info: #3b82f6; /* RGB-Tripel der Statusfarben fuer Toenungen rgba(var(--…-rgb), α). */ --success-rgb: 16, 185, 129; --warning-rgb: 245, 158, 11; --danger-rgb: 239, 68, 68; --info-rgb: 59, 130, 246; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', monospace; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --shadow-sm: 0 2px 8px rgba(var(--shadow-rgb), 0.3); --shadow-md: 0 4px 16px rgba(var(--shadow-rgb), 0.4); --shadow-lg: 0 8px 32px rgba(var(--shadow-rgb), 0.5); --shadow-glow: 0 0 30px var(--accent-glow); --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1); } /* ─── Sprachbloecke (lange Fliesstext-Inhalte, z.B. API-Doku) ───────── i18n.js applyLang() setzt html[data-lang]. Default (kein Attribut) = DE. */ html[data-lang="en"] .i18n-de { display: none !important; } html:not([data-lang="en"]) .i18n-en { display: none !important; } /* ─── Hell-Theme: kippt nur die Basis-Variablen, alles andere folgt ─── */ body.light { color-scheme: light; --fg-rgb: 17, 24, 39; --shadow-rgb: 15, 23, 42; --bg-primary: #f4f5f7; --bg-secondary: #ffffff; --bg-glass: rgba(255, 255, 255, 0.78); --bg-glass-heavy: rgba(255, 255, 255, 0.92); --border: rgba(var(--fg-rgb), 0.12); --border-hover: rgba(var(--fg-rgb), 0.22); --text-primary: #1a2233; --text-secondary: #4a5568; --text-muted: #7a8599; } /* ─── Native Dropdowns (option/optgroup) ──────────────────────────────────── Steht ABSICHTLICH hier und nicht in style.css: style.css wird nur von settings.html und wissen.html geladen. Auf portal/chat/userchat/support gab es die Regel deshalb nicht – der Browser fuellte das Auswahlmenue mit Weiss, erbte aber die helle Schriftfarbe des Feldes: weisse Schrift auf weissem Grund (gemeldet 2026-07-29 fuer "Issue bearbeiten" → Status). theme.css laedt JEDE Seite, damit gilt die Regel auch fuer Widgets, die ihr CSS selbst mitbringen (issues.js, extractor.js, profile_switcher.js …). Deckende Flaeche ist Pflicht: ein halbtransparenter Feld-Hintergrund (rgba(var(--fg-rgb),.06)) wird im Popup zu fast Weiss. */ select option, select optgroup { background-color: var(--bg-secondary); color: var(--text-primary); } select option:checked, select option:hover { background-color: var(--accent); color: #ffffff; /* Text auf Akzentflaeche – gilt in beiden Themes */ }