/* ============================================================ Designkatalog — Foundation Tokens Verbindliche zentrale Design-Tokens für alle Apps. Komponenten dürfen NIEMALS Hex-Werte enthalten, immer var(--…). Theme-Schalter: / ============================================================ */ /* -------- Theme-neutrale Tokens (gelten immer) -------- */ :root { /* Radien */ --radius-sm: 8px; --radius-md: 10px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 18px; --radius-pill: 999px; /* Spacing (4er-Skala) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 48px; --space-10: 64px; /* Font-Sizes */ --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; /* Default Body */ --fs-15: 15px; --fs-17: 17px; --fs-20: 20px; --fs-24: 24px; --fs-32: 32px; /* Font-Weights */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Line-Heights */ --lh-tight: 1.15; --lh-normal: 1.4; --lh-relaxed: 1.6; /* Letter-Spacing */ --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.06em; --tracking-wider: 0.12em; --tracking-widest: 0.14em; /* Transitions */ --t-fast: 120ms ease; --t-base: 180ms ease; --t-slow: 300ms ease; --t-expand: 220ms cubic-bezier(.4, 0, .2, 1); /* Z-Index-Stapel */ --z-base: 1; --z-sticky: 50; --z-dropdown: 100; --z-drawer: 150; --z-modal: 200; --z-toast: 300; --z-tooltip: 400; /* Font-Family (System-Stack; App kann überschreiben) */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; } /* -------- Dark-Theme -------- */ :root, [data-theme="dark"] { /* Surfaces (BG-Layer, tief → hoch) — neutrales Grau, kein Blau-Stich */ --surface-0: #0b0b0c; /* Page-Hintergrund */ --surface-1: #141416; /* Panel/Card */ --surface-2: #1a1a1d; /* Menu/Elevated */ --surface-3: #24242a; /* Hover/Highlight */ /* Text (hoch → niedrig Kontrast) */ --text-1: #e8e8ea; /* Primary */ --text-2: #a8a8ac; /* Secondary */ --text-3: #6d6d72; /* Tertiary / Labels */ --text-inv: #0b0b0c; /* Invertiert (auf hellem Grund) */ /* Borders — neutral */ --border-1: #1e1e21; /* subtle (Divider) */ --border-2: #2a2a2f; /* visible (Input/Button) */ --border-3: #3d3d44; /* prominent (Primary-Border) */ /* Primary — monochrom, hebt sich durch Kontrast + Glow ab */ --primary-bg: var(--surface-3); --primary-border: var(--border-3); --primary-text: #ffffff; --primary-hover-border: #4d4d55; --primary-glow: 0 0 0 1px rgba(255,255,255,.12), 0 0 20px rgba(255,255,255,.10); /* Secondary — Ghost */ --secondary-bg: transparent; --secondary-border: var(--border-2); --secondary-hover-bg: var(--surface-3); --secondary-hover-border: #34343a; --secondary-text: var(--text-1); /* Semantic Colors */ --danger: #ef4444; --danger-hover: #dc2626; --danger-text: #ffffff; --success: #22c55e; /* Delta positiv, Success-States */ --success-soft: rgba(34,197,94,.15); --check: #6ee7b7; /* Auswahl-Häkchen in Dropdowns/Checkboxen — dezent grün */ --warning: #f59e0b; --warning-soft: rgba(245,158,11,.15); --info: #e6e8ee; /* Info = neutraler Text (monochrom) */ --info-soft: rgba(230,232,238,.08); /* Focus-Outline (themen-neutral) */ --focus-ring: 0 0 0 2px var(--text-1); --focus-color: var(--text-1); /* Overlays */ --overlay: rgba(11,11,12,.55); --overlay-solid: rgba(11,11,12,.85); /* Shadows (Elevation) */ --shadow-sm: 0 4px 12px rgba(0,0,0,.35); --shadow-md: 0 20px 40px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.35); --shadow-lg: 0 30px 60px rgba(0,0,0,.6), 0 4px 12px rgba(0,0,0,.35); /* Input */ --input-bg: #0b0b0c; --input-border: var(--border-2); --input-placeholder:var(--text-3); --input-focus-ring: 0 0 0 3px rgba(232,232,234,.12); /* Scrollbar */ --scrollbar-thumb: #2a2a2f; --scrollbar-thumb-hover: #34343a; color-scheme: dark; } /* -------- Light-Theme -------- */ [data-theme="light"] { --surface-0: #f4f5f7; --surface-1: #ffffff; --surface-2: #ffffff; --surface-3: #f3f4f6; --text-1: #111827; --text-2: #374151; --text-3: #6b7280; --text-inv: #ffffff; --border-1: #eef0f3; --border-2: #e5e7eb; --border-3: #111827; --primary-bg: #ffffff; --primary-border: #111827; --primary-text: #111827; --primary-hover-border: #111827; --primary-glow: 0 0 0 1px rgba(17,24,39,.15), 0 0 18px rgba(17,24,39,.10); --secondary-bg: #ffffff; --secondary-border: var(--border-2); --secondary-hover-bg: #f3f4f6; --secondary-hover-border: #d1d5db; --secondary-text: var(--text-1); --danger: #dc2626; --danger-hover: #b91c1c; --danger-text: #ffffff; --success: #16a34a; --success-soft: rgba(22,163,74,.14); --check: #10b981; --warning: #d97706; --warning-soft: rgba(217,119,6,.14); --info: #111827; --info-soft: rgba(17,24,39,.06); --focus-ring: 0 0 0 2px var(--text-1); --focus-color: var(--text-1); --overlay: rgba(244,245,247,.65); --overlay-solid: rgba(244,245,247,.90); --shadow-sm: 0 2px 6px rgba(17,24,39,.06); --shadow-md: 0 20px 40px rgba(17,24,39,.10), 0 2px 6px rgba(17,24,39,.06); --shadow-lg: 0 30px 60px rgba(17,24,39,.10), 0 4px 12px rgba(17,24,39,.06); --input-bg: #f9fafb; --input-border: var(--border-2); --input-placeholder:var(--text-3); --input-focus-ring: 0 0 0 3px rgba(17,24,39,.10); --scrollbar-thumb: #d1d5db; --scrollbar-thumb-hover: #9ca3af; color-scheme: light; }