/* * SoloBooth – Design-Tokens (Variante A «Console»). * Quelle der Wahrheit für Farben, Schriften, Abstände. Siehe REDESIGN-PLAN.md, Abschnitt 3. * Dunkel ist Standard; heller Modus über . */ /* ── Schriften (selbst gehostet, keine Anfragen an Dritte) ─────────────────── */ @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2'); } @font-face { font-family: 'IBM Plex Sans'; font-style: italic; font-weight: 400; font-display: swap; src: url(/fonts/ibm-plex-sans-latin-400-italic.woff2) format('woff2'); } @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/ibm-plex-sans-latin-500-normal.woff2) format('woff2'); } @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/ibm-plex-sans-latin-600-normal.woff2) format('woff2'); } @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/ibm-plex-sans-latin-700-normal.woff2) format('woff2'); } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2'); } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2'); } @font-face { font-family: 'IBM Plex Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/ibm-plex-serif-latin-400-normal.woff2) format('woff2'); } @font-face { font-family: 'IBM Plex Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url(/fonts/ibm-plex-serif-latin-400-italic.woff2) format('woff2'); } @font-face { font-family: 'IBM Plex Serif'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/ibm-plex-serif-latin-600-normal.woff2) format('woff2'); } :root { color-scheme: dark; /* Flächen */ --bg: #0e0f11; --bg-deep: #0b0c0d; --surface-1: #141518; --surface-2: #17181b; --surface-3: #1d1f23; --surface-active: #22242a; --line: #25272b; --line-soft: #202226; --line-strong: #34373c; --track: #2a2c31; /* Spur von Fortschrittsbalken */ --row-active: #1c1a15; /* aktive Tabellenzeile */ --wave-bg: #0b0c0d; /* Wellenform-Hintergrund */ --overlay: rgba(0, 0, 0, .6); /* Text */ --text: #e8e6e1; --text-strong: #f4f2ed; --text-muted: #a9a69f; --text-subtle: #8a877f; --text-disabled: #5d5b56; /* Akzent */ --accent: #f2a93b; --accent-hover: #ffc56b; --accent-ink: #1a1206; --accent-soft: #3a2c14; --accent-line: #5a4520; --accent-text: var(--accent); /* Status */ --rec: #ff5a4e; --danger: #ff8a80; --danger-soft: #3a1a18; --success: #8fe0b0; --success-soft: #183024; --info: #8fb3ff; --info-soft: #18243a; --violet: #c7a6ff; /* Personen / Figuren */ --person-1: #f2a93b; --person-2: #8fb3ff; --person-3: #ff8a80; --person-4: #c7a6ff; --person-5: #8fe0b0; --person-6: #e0c58f; /* Regie-Markierungen */ --mark-emph: #ffffff; --mark-strong-bg: #f2a93b; --mark-up: #8fb3ff; --mark-down: #c7a6ff; --mark-slow: #8fe0b0; --mark-pause: #f2a93b; --mark-pause-long: #ff8a80; /* Typografie */ --font-sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace; --font-serif: 'IBM Plex Serif', Georgia, serif; /* Abstände (4er-Raster) */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; /* Radien */ --r-sm: 6px; --r-md: 8px; --r-lg: 10px; --r-xl: 12px; --r-pill: 999px; /* Masse */ --header-h: 72px; --toolbar-h: 56px; --sidebar-l: 260px; --sidebar-r: 330px; --shadow: none; } :root[data-theme="light"] { color-scheme: light; --bg: #f7f6f3; --bg-deep: #f1efea; --surface-1: #ffffff; --surface-2: #ffffff; --surface-3: #f4f2ee; --surface-active: #ece9e3; --line: #e4e1da; --line-soft: #eeebe5; --line-strong: #cfcac0; --track: #e4e1da; --row-active: #fdf6e9; --wave-bg: #1d1f23; --overlay: rgba(20, 18, 14, .35); --text: #1c1b19; --text-strong: #0e0d0c; --text-muted: #5f5b54; --text-subtle: #6f6a62; --text-disabled: #a6a097; --accent: #f2a93b; --accent-hover: #e0972a; --accent-ink: #1a1206; --accent-soft: #fbecd2; --accent-line: #e8c78e; --accent-text: #9a5a00; --danger: #b3261e; --danger-soft: #fbe3e0; --success: #2c6e49; --success-soft: #dcefe3; --info: #2f5bb7; --info-soft: #e1e9f8; --violet: #6a4bb0; --mark-emph: #0e0d0c; --mark-up: #2f5bb7; --mark-down: #6a4bb0; --mark-slow: #2c6e49; --mark-pause: #9a5a00; --mark-pause-long: #b3261e; --shadow: 0 4px 16px rgba(0, 0, 0, .08); }