/* ────────────────────────────────────────────────────────────────────────── * Design tokens — single source of truth voor kleuren, schaduw, radius * en motion (MySyncFlow design system). Component-stylesheets verwijzen * hier naar; kleuren horen nergens anders hardcoded te staan. * * Light theme op :root, dark theme via . * ──────────────────────────────────────────────────────────────────────── */ :root { color-scheme: light; /* Surfaces */ --surface-0: #f6f8fb; /* pagina-achtergrond */ --surface-1: #ffffff; /* cards / panelen */ --surface-2: #f1f4f9; /* hover / subtiele vlakken */ --surface-3: #e9eef6; /* actieve vlakken */ --surface-elevated: #ffffff; /* popovers, dialogen */ --surface-glass: rgba(255, 255, 255, 0.78); /* Shell (sidebar + topbar) */ --sidebar-bg: #ffffff; --topbar-bg: #ffffff; --shell-border: #e6eaf2; /* Borders & dividers */ --line-soft: #edf1f7; --line-medium: #e6eaf2; --line-strong: #d3dce9; /* Tekst */ --text-strong: #1b1f28; --text: #333b49; --text-muted: #6e7787; --text-faint: #9aa3b2; --text-inverse:#ffffff; /* Accents */ --accent: #3b82f6; --accent-strong: #2563eb; --accent-soft: #eaf2fe; --accent-glow: rgba(59, 130, 246, 0.25); --success: #16a34a; --success-soft: #e7f7ee; --warning: #d97706; --warning-soft: #fdf3e1; --danger: #dc2626; --danger-soft: #fdecec; --info: #8b5cf6; --info-soft: #f1ecfe; /* Chart-kleuren (max 6 tegelijk) */ --chart-blue: #3b82f6; --chart-green: #22c55e; --chart-orange: #f59e0b; --chart-purple: #8b5cf6; --chart-red: #ef4444; --chart-gray: #9ca3af; /* Department-accents */ --color-sales: #3b82f6; --color-production: #f59e0b; --color-warehouse: #22c55e; --color-purchasing: #8b5cf6; --color-admin: #ef4444; --color-consultancy: #14b8a6; /* Schaduwen */ --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.04); --shadow-sm: 0 4px 18px rgba(16, 24, 40, 0.05); --shadow-md: 0 8px 28px rgba(16, 24, 40, 0.08); --shadow-lg: 0 12px 40px rgba(16, 24, 40, 0.12); --shadow-glow-accent: 0 0 0 4px var(--accent-glow); /* Radii */ --radius-xs: 6px; --radius-sm: 8px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 20px; --radius-pill: 999px; /* Motion */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --dur-fast: 150ms; --dur-base: 200ms; --dur-slow: 320ms; /* Z-index ladder */ --z-base: 1; --z-header: 20; --z-overlay: 80; --z-modal: 100; } /* ── Dark theme ─────────────────────────────────────────────────────────── */ html[data-theme="dark"] { color-scheme: dark; --surface-0: #0f1724; --surface-1: #18212f; --surface-2: #1e2a3b; --surface-3: #273447; --surface-elevated: #1c2736; --surface-glass: rgba(24, 33, 47, 0.82); --sidebar-bg: #111827; --topbar-bg: #111827; --shell-border: #273447; --line-soft: #202c3d; --line-medium: #273447; --line-strong: #34445c; --text-strong: #f5f7fa; --text: #dce3ed; --text-muted: #a5afbf; --text-faint: #748095; --text-inverse:#ffffff; --accent: #3b82f6; --accent-strong: #60a5fa; --accent-soft: rgba(59, 130, 246, 0.16); --accent-glow: rgba(59, 130, 246, 0.35); --success: #4ade80; --success-soft: rgba(34, 197, 94, 0.14); --warning: #fbbf24; --warning-soft: rgba(245, 158, 11, 0.14); --danger: #f87171; --danger-soft: rgba(239, 68, 68, 0.14); --info: #a78bfa; --info-soft: rgba(139, 92, 246, 0.16); /* Donker thema: contrast in plaats van schaduw */ --shadow-xs: 0 0 0 1px rgba(255, 255, 255, 0.02); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45); --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.55); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }