/* ========================================= SAMMELKARTENWELT — Design Tokens (CI 2026) Aktiv unter: body.theme-new Additiv: Bestehende --bg-*, --brand-* etc. bleiben unangetastet. ========================================= */ /* ---- Light Mode (Default) -------------------- */ .theme-new { /* Surfaces */ --skw-bg: #F8FAFC; --skw-surface: #FFFFFF; --skw-surface-2: #F1F5F9; /* Brand */ --skw-ink: #0F0F23; --skw-ink-2: #1E1B4B; --skw-header-bg: #0F0F23; /* Navbar-Hintergrund - bleibt in beiden Modi dunkel */ --skw-accent: #6366F1; --skw-accent-h: #4F46E5; /* hover */ --skw-data: #06B6D4; /* cyan — positiv/Daten */ --skw-success: #10B981; --skw-danger: #F43F5E; --skw-warning: #F59E0B; /* Text */ --skw-text: #0F0F23; --skw-text-muted:#6B7280; --skw-text-soft: #94A3B8; /* Strokes */ --skw-border: rgba(15, 15, 35, 0.10); --skw-border-strong: rgba(15, 15, 35, 0.18); /* Radii */ --skw-radius-xs: 4px; --skw-radius-sm: 6px; --skw-radius: 8px; --skw-radius-lg: 12px; --skw-radius-xl: 16px; /* Shadows */ --skw-shadow-xs: 0 1px 2px rgba(15, 15, 35, 0.04); --skw-shadow-sm: 0 1px 4px rgba(15, 15, 35, 0.06); --skw-shadow-md: 0 2px 12px rgba(15, 15, 35, 0.08); --skw-shadow-lg: 0 8px 32px rgba(15, 15, 35, 0.12); /* Type scale */ --skw-font: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --skw-font-mono: ui-monospace, "DM Mono", "SF Mono", Menlo, monospace; --skw-fs-display: 2.5rem; /* 40 */ --skw-fs-h1: 1.75rem; /* 28 */ --skw-fs-h2: 1.25rem; /* 20 */ --skw-fs-h3: 1rem; /* 16 */ --skw-fs-body: 0.9375rem;/* 15 */ --skw-fs-small: 0.8125rem;/* 13 */ --skw-fs-label: 0.6875rem;/* 11 */ /* Spacing */ --skw-sp-1: 4px; --skw-sp-2: 8px; --skw-sp-3: 12px; --skw-sp-4: 16px; --skw-sp-5: 24px; --skw-sp-6: 32px; --skw-sp-7: 48px; --skw-sp-8: 64px; /* Motion */ --skw-ease: cubic-bezier(0.4, 0, 0.2, 1); --skw-dur-fast: 120ms; --skw-dur: 200ms; --skw-dur-slow: 320ms; } /* ---- Dark Mode ------------------------------- */ /* data-bs-theme sitzt am , theme-new am -> descendant selector */ [data-bs-theme="dark"] .theme-new, .theme-new.dark { --skw-bg: #070714; --skw-surface: #14142A; --skw-surface-2: #1E1B4B; --skw-ink: #F1F5F9; --skw-ink-2: #E2E8F0; --skw-header-bg: #14142A; /* leicht abgehobener Header im Dark-Mode */ --skw-text: #F1F5F9; --skw-text-muted:#94A3B8; --skw-text-soft: #64748B; --skw-border: rgba(255, 255, 255, 0.08); --skw-border-strong: rgba(255, 255, 255, 0.16); --skw-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3); --skw-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.4); --skw-shadow-md: 0 2px 12px rgba(0, 0, 0, 0.5); --skw-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6); }