/* ============================================================================ EffizienzBerater — Design Tokens Stand: 2026-04-26 · Phase A (Foundation) ---------------------------------------------------------------------------- Single Source of Truth für Farben, Spacing, Typografie, Radien, Shadows, Motion. Wird sowohl vom Public-Renderer (src/views/styles.ts liest dieses File zur Render-Zeit per fs.readFileSync) als auch von public/index.html (App-SPA) per konsumiert. Theme-Selector: html[data-theme="light"] | html[data-theme="dark"] Default ist Light (im :root unten). Dark wird durch data-theme="dark" gesetzt (App bootet dort, Public bleibt Light, User-Toggle wechselt). Legacy-Mapping (Block am Ende) hält die alten Token-Namen am Leben, damit bestehende Komponenten weiterlaufen. Wird in Phase C entfernt. ============================================================================ */ :root, html[data-theme="light"] { /* ---------- Color: Backgrounds ----------------------------------------- */ --bg-canvas: #fafaf7; --bg-surface: #ffffff; --bg-surface-raised: #ffffff; --bg-inset: #f3f4f1; --bg-overlay: rgba(15, 23, 42, 0.45); --bg-hover: rgba(15, 23, 42, 0.04); --bg-active: rgba(15, 23, 42, 0.08); /* ---------- Color: Ink (Text) ----------------------------------------- */ --ink-primary: #0b1220; --ink-secondary: #4b5563; --ink-tertiary: #5a6270; --ink-muted: #6b7280; --ink-on-accent: #ffffff; --ink-on-success: #ffffff; --ink-on-warning: #1a1300; --ink-on-danger: #ffffff; /* ---------- Color: Borders -------------------------------------------- */ --border-subtle: rgba(15, 23, 42, 0.08); --border-default: rgba(15, 23, 42, 0.12); --border-strong: rgba(15, 23, 42, 0.18); --border-focus: var(--accent); /* ---------- Color: Accent (Brand-Blau, themeunabhängig) -------------- */ --accent: #1f6feb; --accent-hover: #1a5fcc; --accent-active: #1751b0; --accent-subtle-bg: rgba(31, 111, 235, 0.08); --accent-strong-bg: rgba(31, 111, 235, 0.16); --accent-glow: rgba(31, 111, 235, 0.18); --accent-ink: #ffffff; --accent-subtle: #e5edfd; /* Sekundär-Akzent für seltene Akzente (z.B. Info-Pills, Charts) */ --accent-secondary: #6366f1; /* ---------- Color: Semantic ------------------------------------------- */ --success: #15803d; --success-hover: #166534; --success-bg: rgba(21, 128, 61, 0.08); --warning: #b45309; --warning-hover: #92400e; --warning-bg: rgba(180, 83, 9, 0.08); --danger: #b91c1c; --danger-hover: #991b1b; --danger-bg: rgba(185, 28, 28, 0.08); --info: var(--accent); --info-bg: var(--accent-subtle-bg); /* ---------- Spacing (8-px-Grid; 4 als Sub-Step für Icon-Padding) ----- */ --space-0: 0; --space-px: 1px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; /* ---------- Radius ---------------------------------------------------- */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-pill: 9999px; /* ---------- Type-Scale (modular 1.125, UI-Tweaks) -------------------- */ --font-sans: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', 'Roboto Mono', Consolas, 'Liberation Mono', monospace; --text-xs: 12px; --text-sm: 13px; --text-base: 15px; --text-md: 17px; --text-lg: 20px; --text-xl: 24px; --text-2xl: 32px; --text-3xl: 40px; --text-display: 56px; --lh-tight: 1.1; --lh-snug: 1.3; --lh-normal: 1.55; --lh-relaxed: 1.7; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --tracking-tight: -0.02em; --tracking-snug: -0.011em; --tracking-normal: 0; --tracking-wide: 0.04em; /* ---------- Shadows (3–4 Layer, soft) -------------------------------- */ --shadow-xs: 0 1px 1px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05), 0 2px 4px rgba(15, 23, 42, 0.04); --shadow-md: 0 2px 4px rgba(15, 23, 42, 0.05), 0 4px 8px rgba(15, 23, 42, 0.05), 0 8px 16px rgba(15, 23, 42, 0.04); --shadow-lg: 0 4px 8px rgba(15, 23, 42, 0.04), 0 8px 16px rgba(15, 23, 42, 0.06), 0 16px 32px rgba(15, 23, 42, 0.06); --shadow-xl: 0 8px 16px rgba(15, 23, 42, 0.05), 0 16px 32px rgba(15, 23, 42, 0.08), 0 32px 64px rgba(15, 23, 42, 0.08); --ring-focus: 0 0 0 3px rgba(31, 111, 235, 0.35); --shadow-focus: var(--ring-focus); /* ---------- Motion ---------------------------------------------------- */ --motion-instant: 80ms; --motion-fast: 120ms; --motion-base: 200ms; --motion-slow: 320ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* ---------- Z-Index --------------------------------------------------- */ --z-base: 0; --z-dropdown: 10; --z-sticky: 50; --z-modal-backdrop: 90; --z-modal: 100; --z-toast: 200; --z-tooltip: 300; /* ---------- Layout ---------------------------------------------------- */ --max-width: 1180px; --max-width-text: 760px; --sidebar-width: 232px; color-scheme: light; } html[data-theme="dark"] { /* ---------- Color: Backgrounds (Phase C-Light Spec) ------------------ */ --bg-canvas: #0b0d10; --bg-surface: #15181d; --bg-surface-raised: #15181d; --bg-surface-subtle: #1b1f25; --bg-inset: #0f1216; --bg-overlay: rgba(0, 0, 0, 0.7); --bg-hover: rgba(255, 255, 255, 0.04); --bg-active: rgba(255, 255, 255, 0.08); /* ---------- Color: Ink ------------------------------------------------ */ --ink-primary: #f5f6f8; --ink-secondary: #c2c7cf; --ink-tertiary: #8a919b; --ink-muted: #5a626d; --ink-on-accent: #0b0d10; /* ---------- Color: Borders -------------------------------------------- */ --border-subtle: #232830; --border-default: #2b313a; --border-strong: #323942; /* ---------- Color: Accent (Phase C-Light Spec) ----------------------- */ --accent: #4d8df7; --accent-hover: #6ba0f9; --accent-active: #3a7be3; --accent-ink: #0b0d10; --accent-subtle: #1a2a4a; --accent-subtle-bg: rgba(77, 141, 247, 0.12); --accent-strong-bg: rgba(77, 141, 247, 0.22); --accent-glow: rgba(77, 141, 247, 0.25); --accent-secondary: #818cf8; /* ---------- Color: Semantic ------------------------------------------- */ --success: #4ade80; --success-hover: #6ee2a0; --success-bg: rgba(74, 222, 128, 0.10); --warning: #fbbf24; --warning-hover: #fdcd4f; --warning-bg: rgba(251, 191, 36, 0.10); --danger: #f87171; --danger-hover: #fb8e8e; --danger-bg: rgba(248, 113, 113, 0.10); /* ---------- Shadows (Dark braucht mehr Schwarz) ---------------------- */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.30); --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.30), 0 4px 12px rgba(0, 0, 0, 0.40), 0 8px 24px rgba(0, 0, 0, 0.30); --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.45), 0 16px 48px rgba(0, 0, 0, 0.40); --shadow-xl: 0 8px 16px rgba(0, 0, 0, 0.40), 0 16px 48px rgba(0, 0, 0, 0.50), 0 32px 96px rgba(0, 0, 0, 0.45); --ring-focus: 0 0 0 3px rgba(79, 142, 247, 0.45); --shadow-focus: var(--ring-focus); color-scheme: dark; } /* ============================================================================ Legacy-Aliasse (Backward Compatibility, Phase A → C) ---------------------------------------------------------------------------- Mapping alter Token-Namen auf neue Familie. Damit laufen public/index.html (App-SPA, ~1.15 MB) und alte Public-Page-Komponenten ohne Änderung weiter. In Phase C entfernen, wenn alle Komponenten auf neue Tokens migriert sind. ============================================================================ */ :root, html[data-theme="light"], html[data-theme="dark"] { --bg-primary: var(--bg-canvas); --bg-secondary: var(--bg-surface); --bg-card: var(--bg-surface); --text-primary: var(--ink-primary); --text-secondary: var(--ink-secondary); --text-muted: var(--ink-tertiary); --border: var(--border-subtle); --radius: var(--radius-sm); --shadow-card: var(--shadow-sm); --shadow-hover: var(--shadow-md); --transition: var(--motion-base) var(--ease-out); } /* ============================================================================ Reduced Motion — alle Transitionen + Animations effektiv aus ============================================================================ */ @media (prefers-reduced-motion: reduce) { :root, html[data-theme="light"], html[data-theme="dark"] { --motion-instant: 0ms; --motion-fast: 0ms; --motion-base: 0ms; --motion-slow: 0ms; } }