/* ========================================================================== EHS Hub — Design Tokens Einzige Quelle der Wahrheit für Farbe, Abstand, Typografie, Radius, Schatten, Motion und Layout. Light ist der Standard; Dark überschreibt über [data-theme="dark"] am -Element. Am Ende der Datei stehen Legacy-Aliase (--primary, --text, --bg …), damit bestehende Modul- und Auth-Styles unverändert weiterlaufen. ========================================================================== */ :root { /* ── Brand ───────────────────────────────────────────────────────── */ /* Kühles, sachliches Blau — Signalfarbe für primäre Aktionen, Fokus-Ringe und aktive Zustände. Bewusst sparsam eingesetzt. */ --brand-50: #eff6ff; --brand-100: #dbeafe; --brand-200: #bfdbfe; --brand-300: #93c5fd; --brand-400: #60a5fa; --brand-500: #3b82f6; --brand-600: #2563eb; /* primary brand */ --brand-700: #1d4ed8; --brand-800: #1e40af; --brand-900: #1e3a8a; --brand: var(--brand-600); --brand-hover: var(--brand-700); --brand-active: var(--brand-800); --brand-soft: var(--brand-50); --brand-on: #ffffff; /* ── Neutrals ────────────────────────────────────────────────────── */ --neutral-0: #ffffff; --neutral-50: #f8fafc; --neutral-100: #f1f5f9; --neutral-150: #e9eef4; --neutral-200: #e2e8f0; --neutral-300: #cbd5e1; --neutral-400: #94a3b8; --neutral-500: #64748b; --neutral-600: #475569; --neutral-700: #334155; --neutral-800: #1e293b; --neutral-900: #0f172a; --neutral-950: #020617; /* ── Surfaces ────────────────────────────────────────────────────── */ --surface-base: var(--neutral-50); /* Seitenhintergrund */ --surface-raised: var(--neutral-0); /* Karten, Sidebar, Header */ --surface-sunken: var(--neutral-100); /* Nav aktiv, Tabellenkopf, Hover */ --surface-overlay: rgba(15, 23, 42, 0.55); --surface-tint: var(--brand-soft); /* ── Borders ─────────────────────────────────────────────────────── */ --border-subtle: var(--neutral-150); --border-default: var(--neutral-200); --border-strong: var(--neutral-300); --border-focus: var(--brand); /* ── Text ────────────────────────────────────────────────────────── */ --text-primary: var(--neutral-900); --text-secondary: var(--neutral-700); --text-muted: var(--neutral-500); --text-disabled: var(--neutral-400); --text-inverse: var(--neutral-0); --text-link: var(--brand-600); --text-link-hover: var(--brand-700); --text-on-brand: #ffffff; /* ── Status (Vordergrund / weicher Hintergrund / Rahmen) ─────────── */ --success: #16a34a; --success-fg: #14532d; --success-bg: #dcfce7; --success-border: #bbf7d0; --warning: #d97706; --warning-fg: #78350f; --warning-bg: #fef3c7; --warning-border: #fde68a; --danger: #dc2626; --danger-hover: #b91c1c; --danger-fg: #7f1d1d; --danger-bg: #fee2e2; --danger-border: #fecaca; --info: #0284c7; --info-fg: #075985; --info-bg: #e0f2fe; --info-border: #bae6fd; /* ── Radius ──────────────────────────────────────────────────────── */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-pill: 999px; /* ── Shadows (bewusst zurückhaltend — Inhalt zuerst) ─────────────── */ --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-sm: 0 2px 4px rgba(15, 23, 42, 0.05), 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-md: 0 6px 16px rgba(15, 23, 42, 0.07), 0 2px 4px rgba(15, 23, 42, 0.04); --shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.10), 0 4px 10px rgba(15, 23, 42, 0.05); --shadow-focus: 0 0 0 3px rgba(37, 99, 235, 0.22); /* ── Typografie ──────────────────────────────────────────────────── */ --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace; --fs-11: 0.6875rem; --fs-12: 0.75rem; --fs-13: 0.8125rem; --fs-14: 0.875rem; --fs-15: 0.9375rem; --fs-16: 1rem; --fs-18: 1.125rem; --fs-22: 1.375rem; --fs-28: 1.75rem; --fs-36: 2.25rem; --lh-tight: 1.25; --lh-snug: 1.4; --lh-normal: 1.55; --lh-relaxed: 1.7; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* ── Spacing (4 / 8 Raster) ──────────────────────────────────────── */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 40px; --space-8: 48px; --space-9: 56px; --space-10: 64px; --space-12: 96px; /* ── Komponentengrößen ───────────────────────────────────────────── */ --control-h-sm: 30px; --control-h-md: 38px; --control-h-lg: 46px; --control-px: 12px; /* ── Layout ──────────────────────────────────────────────────────── */ --sidebar-w: 256px; --sidebar-w-collapsed: 68px; --header-h: 60px; --content-max: 1440px; --content-px: 24px; /* ── Z-Index ─────────────────────────────────────────────────────── */ --z-sidebar: 100; --z-header: 110; --z-dropdown: 1000; --z-popover: 1100; --z-modal: 1200; --z-toast: 1300; --z-tooltip: 1400; /* ── Motion ──────────────────────────────────────────────────────── */ --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1); --ease-in-out: cubic-bezier(0.5, 0, 0.3, 1); --duration-fast: 120ms; --duration-base: 180ms; --duration-slow: 240ms; color-scheme: light; } /* ============================================================================ Dark Theme ============================================================================ */ [data-theme="dark"] { --brand: var(--brand-400); --brand-hover: var(--brand-300); --brand-active: var(--brand-200); --brand-soft: rgba(96, 165, 250, 0.14); --brand-on: #ffffff; --surface-base: #0b1220; --surface-raised: #131c2e; --surface-sunken: #1c2740; --surface-overlay: rgba(2, 6, 23, 0.68); --surface-tint: rgba(96, 165, 250, 0.10); --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.11); --border-strong: rgba(255, 255, 255, 0.18); --border-focus: var(--brand-300); --text-primary: #e8edf6; --text-secondary: #c2ccdd; --text-muted: #8a97ad; --text-disabled: #5f6b80; --text-inverse: var(--neutral-900); --text-link: var(--brand-300); --text-link-hover: var(--brand-200); --text-on-brand: #0b1220; --success: #4ade80; --success-fg: #bbf7d0; --success-bg: rgba(74, 222, 128, 0.12); --success-border: rgba(74, 222, 128, 0.30); --warning: #fbbf24; --warning-fg: #fde68a; --warning-bg: rgba(251, 191, 36, 0.12); --warning-border: rgba(251, 191, 36, 0.30); --danger: #f87171; --danger-hover: #ef4444; --danger-fg: #fecaca; --danger-bg: rgba(248, 113, 113, 0.12); --danger-border: rgba(248, 113, 113, 0.30); --info: #38bdf8; --info-fg: #bae6fd; --info-bg: rgba(56, 189, 248, 0.12); --info-border: rgba(56, 189, 248, 0.30); --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.40), 0 2px 4px rgba(0, 0, 0, 0.30); --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.50), 0 4px 10px rgba(0, 0, 0, 0.35); --shadow-focus: 0 0 0 3px rgba(96, 165, 250, 0.30); color-scheme: dark; } /* Auto-Modus: Systemeinstellung, solange kein Theme explizit gesetzt ist. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { --brand: var(--brand-400); --brand-hover: var(--brand-300); --brand-active: var(--brand-200); --brand-soft: rgba(96, 165, 250, 0.14); --surface-base: #0b1220; --surface-raised: #131c2e; --surface-sunken: #1c2740; --surface-overlay: rgba(2, 6, 23, 0.68); --surface-tint: rgba(96, 165, 250, 0.10); --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.11); --border-strong: rgba(255, 255, 255, 0.18); --border-focus: var(--brand-300); --text-primary: #e8edf6; --text-secondary: #c2ccdd; --text-muted: #8a97ad; --text-disabled: #5f6b80; --text-inverse: var(--neutral-900); --text-link: var(--brand-300); --text-link-hover: var(--brand-200); --text-on-brand: #0b1220; --success: #4ade80; --success-fg: #bbf7d0; --success-bg: rgba(74, 222, 128, 0.12); --success-border: rgba(74, 222, 128, 0.30); --warning: #fbbf24; --warning-fg: #fde68a; --warning-bg: rgba(251, 191, 36, 0.12); --warning-border: rgba(251, 191, 36, 0.30); --danger: #f87171; --danger-hover: #ef4444; --danger-fg: #fecaca; --danger-bg: rgba(248, 113, 113, 0.12); --danger-border: rgba(248, 113, 113, 0.30); --info: #38bdf8; --info-fg: #bae6fd; --info-bg: rgba(56, 189, 248, 0.12); --info-border: rgba(56, 189, 248, 0.30); --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.40), 0 2px 4px rgba(0, 0, 0, 0.30); --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.50), 0 4px 10px rgba(0, 0, 0, 0.35); --shadow-focus: 0 0 0 3px rgba(96, 165, 250, 0.30); color-scheme: dark; } } /* ============================================================================ Legacy-Aliase Die Auth-Ansicht und ältere Modul-Styles sprechen noch die alten Variablennamen an. Sie zeigen hier auf die neuen Tokens, damit alles automatisch mit Theme-Wechsel und Dark Mode mitläuft. ============================================================================ */ :root, [data-theme="dark"] { --primary: var(--brand); --primary-hover: var(--brand-hover); --primary-light: var(--brand-soft); --text: var(--text-primary); --bg: var(--surface-base); --bg-card: var(--surface-raised); --border: var(--border-default); --border-light: var(--surface-sunken); --radius: var(--radius-md); --shadow: var(--shadow-sm); --sidebar-width: var(--sidebar-w); --sidebar-collapsed: var(--sidebar-w-collapsed); --header-height: var(--header-h); --transition: var(--duration-base) var(--ease-out); --font: var(--font-sans); }