/** * Eagle — Design-Tokens (Open-Lake-kompatibel) * :root = Light (Standard). [data-theme="dark"] = Dark Override. * Steuerung via data-theme auf + localStorage eagle_theme. */ :root { color-scheme: light; --bg-app: #f1f5f9; --bg-surface: #ffffff; --bg-surface-2: #f8fafc; --bg-surface-3: #f1f5f9; --bg-muted: #f8fafc; --bg-input: #ffffff; --text-primary: #0f172a; --text-heading: #020617; --text-secondary: #475569; --text-muted: #64748b; --border-color: #e2e8f0; --border-color-strong: #cbd5e1; --header-bg: #ffffff; --header-border: #e2e8f0; --header-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); /* Top-Leiste immer hell (Logo mit weißem Hintergrund) – auch im Dark Mode */ --chrome-bar-bg: #ffffff; --chrome-bar-border: #e2e8f0; --chrome-bar-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); --chrome-bar-text: #0f172a; --chrome-bar-text-secondary: #475569; --chrome-bar-text-muted: #64748b; --chrome-bar-hover-bg: #f1f5f9; --chrome-bar-btn-border: #e2e8f0; --app-chrome-height: 88px; --brand-logo-header: 40px; --brand-logo-app-header: 64px; --brand-logo-landing: 44px; --brand-logo-auth: 56px; --card-shadow: 0 1px 3px rgba(15, 23, 42, 0.06); --card-shadow-hover: 0 8px 24px rgba(15, 23, 42, 0.1); --accent: #d97706; --accent-hover: #b45309; --accent-on: #ffffff; --link: #b45309; --link-hover: #92400e; --footer-bar-bg: #f8fafc; --footer-bar-text: #64748b; --footer-bar-border: #e2e8f0; --footer-bar-admin-bg: #1e293b; --footer-bar-admin-text: #94a3b8; --footer-bar-admin-border: #0f172a; --shadow-focus: 0 0 0 3px rgba(217, 119, 6, 0.22); --alert-error-bg: #fef2f2; --alert-error-border: #fecaca; --alert-error-text: #b91c1c; --alert-success-bg: #f0fdf4; --alert-success-border: #bbf7d0; --alert-success-text: #15803d; --dropdown-bg: #ffffff; --dropdown-border: #e2e8f0; --dropdown-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); --badge-success-bg: #f0fdf4; --badge-success-text: #15803d; --badge-success-border: #bbf7d0; --badge-muted-bg: #f1f5f9; --badge-muted-text: #475569; --badge-muted-border: #e2e8f0; --crm-filter-bg: #f8fafc; --crm-filter-border: #e2e8f0; --crm-table-head: #f1f5f9; --crm-row-border: #e2e8f0; --crm-card-bg: #ffffff; --crm-card-border: #e2e8f0; --crm-row-hover: rgba(217, 119, 6, 0.06); --crm-overlay: rgba(15, 23, 42, 0.45); --pill-text-on: #0f172a; --status-success: #15803d; --status-error: #b91c1c; --code-text: #334155; /* Legacy aliases (admin dashboards, notifications, embeds) */ --surface: var(--bg-surface); --surface-1: var(--bg-surface); --surface-2: var(--bg-surface-2); --border: var(--border-color); --muted: var(--text-muted); --text: var(--text-primary); --accent-soft: rgba(217, 119, 6, 0.12); } [data-theme="dark"] { color-scheme: dark; --bg-app: #0f172a; --bg-surface: #1e293b; --bg-surface-2: #263347; --bg-surface-3: #2d3f55; --bg-muted: #263347; --bg-input: #263347; --text-primary: #f1f5f9; --text-heading: #ffffff; --text-secondary: #94a3b8; --text-muted: #64748b; --border-color: #2d3f55; --border-color-strong: #3d5068; --header-bg: #1e293b; --header-border: #2d3f55; --header-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); --card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.4); --accent: #f8b400; --accent-hover: #ffc524; --accent-on: #0b1320; --link: #f8b400; --link-hover: #ffd96b; --footer-bar-bg: #1e293b; --footer-bar-text: #94a3b8; --footer-bar-border: #334155; --shadow-focus: 0 0 0 3px rgba(248, 180, 0, 0.18); --alert-error-bg: rgba(220, 38, 38, 0.10); --alert-error-border: rgba(220, 38, 38, 0.35); --alert-error-text: #fca5a5; --alert-success-bg: rgba(34, 197, 94, 0.10); --alert-success-border: rgba(34, 197, 94, 0.35); --alert-success-text: #86efac; --dropdown-bg: #1e293b; --dropdown-border: #2d3f55; --dropdown-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); --badge-success-bg: rgba(34, 197, 94, 0.12); --badge-success-text: #4ade80; --badge-success-border: rgba(34, 197, 94, 0.32); --badge-muted-bg: rgba(107, 122, 146, 0.18); --badge-muted-text: #c9d3e3; --badge-muted-border: rgba(107, 122, 146, 0.32); --crm-filter-bg: rgba(255, 255, 255, 0.03); --crm-filter-border: rgba(255, 255, 255, 0.06); --crm-table-head: rgba(255, 255, 255, 0.04); --crm-row-border: rgba(255, 255, 255, 0.04); --crm-card-bg: rgba(255, 255, 255, 0.03); --crm-card-border: rgba(255, 255, 255, 0.07); --crm-row-hover: rgba(248, 180, 0, 0.04); --crm-overlay: rgba(0, 0, 0, 0.55); --pill-text-on: #0b1320; --status-success: #10b981; --status-error: #ef4444; --code-text: #c9d3e3; --surface: var(--bg-surface); --surface-1: var(--bg-surface); --surface-2: var(--bg-surface-2); --border: var(--border-color); --muted: var(--text-muted); --text: var(--text-primary); --accent-soft: rgba(248, 180, 0, 0.14); }