/* ============================================================ Design Tokens — Minimal Clean Admin "mini SAP" / Web_BI Blazor Brand-Palette: die webfirma.de ============================================================ */ :root { /* === Color — Brand (Logo-Blau, Kontrast-optimiert) === */ --color-brand-primary: #1A7FD0; --color-brand-primary-hover: #155E9E; --color-brand-primary-active: #114F85; --color-brand-primary-tint: #E7F3FD; --color-brand-primary-ring: rgba(26, 127, 208, 0.28); --color-brand-accent: #0EA5E9; /* === Color — Neutral (kühle Grau-Skala mit Blau-Nuance) === */ --color-neutral-50: #F7F9FC; --color-neutral-100: #F1F4F9; --color-neutral-200: #E4EAF1; --color-neutral-300: #D1D9E4; --color-neutral-400: #A0AAB8; --color-neutral-500: #6B7487; --color-neutral-600: #4A5264; --color-neutral-700: #2E3544; --color-neutral-800: #1C2230; --color-neutral-900: #11172A; --color-neutral-950: #0A0F1C; /* === Color — Semantic === */ --color-success: #16A34A; --color-success-tint: #E7F8EE; --color-warning: #D97706; --color-warning-tint: #FDF3E0; --color-danger: #DC2626; --color-danger-tint: #FDECEC; --color-info: #0284C7; --color-info-tint: #E6F3FB; /* === Color — Surface (semantische Rollen) === */ --color-surface: var(--color-neutral-50); --color-surface-raised: #FFFFFF; --color-surface-sunken: var(--color-neutral-100); --color-surface-hover: var(--color-neutral-100); --color-border: var(--color-neutral-200); --color-border-strong: var(--color-neutral-300); --color-border-focus: var(--color-brand-primary); --color-text-primary: var(--color-neutral-900); --color-text-secondary: var(--color-neutral-600); /* WCAG AA (4.5:1): neutral-500 (#6B7487) reicht nicht (4.45 auf surface, 3.58 auf Materios bg-light #DFDFE3). #525B70 schafft 6.45 auf surface und 5.12 auf bg-light, bleibt aber sichtbar heller als text-secondary (#4A5264). */ --color-text-muted: #525B70; --color-text-on-brand: #FFFFFF; --color-text-link: var(--color-brand-primary); --color-text-link-hover: var(--color-brand-primary-hover); /* === Spacing — 4px-Raster === */ --space-0: 0; --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.25rem; /* 20 */ --space-6: 1.5rem; /* 24 */ --space-7: 1.75rem; /* 28 */ --space-8: 2rem; /* 32 */ --space-10: 2.5rem; /* 40 */ --space-12: 3rem; /* 48 */ --space-16: 4rem; /* 64 */ --space-20: 5rem; /* 80 */ /* === Radius === */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-2xl: 16px; --radius-full: 9999px; /* === Shadow (sehr dezent, nur für schwebende Elemente) === */ --shadow-xs: 0 1px 2px rgba(10, 15, 28, 0.04); --shadow-sm: 0 1px 3px rgba(10, 15, 28, 0.06), 0 1px 2px rgba(10, 15, 28, 0.04); --shadow-md: 0 4px 8px -2px rgba(10, 15, 28, 0.08), 0 2px 4px -1px rgba(10, 15, 28, 0.04); --shadow-lg: 0 12px 24px -6px rgba(10, 15, 28, 0.10), 0 4px 8px -2px rgba(10, 15, 28, 0.05); --shadow-xl: 0 24px 48px -12px rgba(10, 15, 28, 0.18); --shadow-focus: 0 0 0 3px var(--color-brand-primary-ring); /* === Typography === */ --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, monospace; --text-xs: 0.75rem; /* 12 */ --text-sm: 0.8125rem; /* 13 */ --text-base: 0.875rem; /* 14 — Body Default */ --text-md: 0.9375rem; /* 15 */ --text-lg: 1rem; /* 16 */ --text-xl: 1.125rem; /* 18 */ --text-2xl: 1.375rem; /* 22 */ --text-3xl: 1.75rem; /* 28 */ --text-4xl: 2.25rem; /* 36 */ --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; --tracking-tight: -0.015em; --tracking-normal: 0; --tracking-wide: 0.02em; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* === Motion === */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --duration-fast: 120ms; --duration-base: 180ms; --duration-slow: 240ms; /* === Layout === */ --layout-sidebar-width: 260px; --layout-sidebar-collapsed: 72px; --layout-topbar-height: 56px; --layout-content-max: 1440px; --layout-content-padding: var(--space-6); /* === Z-Index-Skala === */ --z-base: 0; --z-dropdown: 1000; --z-sticky: 1020; --z-sidebar: 1040; --z-backdrop: 1050; --z-modal: 1060; --z-popover: 1070; --z-tooltip: 1080; --z-toast: 1090; } /* ============================================================ Dark Mode — Override via [data-theme="dark"] auf ============================================================ */ [data-theme="dark"] { --color-surface: var(--color-neutral-950); --color-surface-raised: var(--color-neutral-900); --color-surface-sunken: var(--color-neutral-800); --color-surface-hover: var(--color-neutral-800); --color-border: var(--color-neutral-700); --color-border-strong: var(--color-neutral-600); --color-text-primary: var(--color-neutral-100); --color-text-secondary: var(--color-neutral-300); --color-text-muted: var(--color-neutral-400); --color-brand-primary-tint: rgba(26, 127, 208, 0.18); --color-brand-primary-ring: rgba(26, 127, 208, 0.45); --color-success-tint: rgba(22, 163, 74, 0.16); --color-warning-tint: rgba(217, 119, 6, 0.16); --color-danger-tint: rgba(220, 38, 38, 0.16); --color-info-tint: rgba(2, 132, 199, 0.16); --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.28), 0 1px 2px rgba(0, 0, 0, 0.18); --shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.32), 0 2px 4px -1px rgba(0, 0, 0, 0.20); --shadow-lg: 0 12px 24px -6px rgba(0, 0, 0, 0.40), 0 4px 8px -2px rgba(0, 0, 0, 0.24); --shadow-xl: 0 24px 48px -12px rgba(0, 0, 0, 0.50); } /* Reduce motion: respektiere OS-Einstellung */ @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 1ms; --duration-base: 1ms; --duration-slow: 1ms; } }