/* ============================================================================ NexAppoint Design System — v1 (Fase 1) ---------------------------------------------------------------------------- Centrale design-tokens als CSS custom properties. - Dit bestand definieert ALLEEN tokens; het style't zelf niets. - Bestaande pagina's blijven ongewijzigd tot ze bewust gemigreerd worden (fase 2: shared components, fase 4: migratie). - Documentatie: docs/design-system/UI-Principles.md docs/design-system/NexAppoint-Design-System-v1.md ============================================================================ */ :root { /* ------------------------------------------------------------------ 1. KLEUREN — primair (één blauwe familie) ------------------------------------------------------------------ */ --color-primary: #2563eb; /* primaire acties, links, actieve navigatie */ --color-primary-hover: #1d4ed8; /* hover-toestand van primaire elementen */ --color-primary-active: #1e40af; /* ingedrukte/actieve toestand */ --color-primary-soft: #eff6ff; /* zachte achtergrond (selectie, actieve chip) */ --color-primary-border: #bfdbfe; /* rand rondom zacht-primaire vlakken */ /* ------------------------------------------------------------------ 1b. KLEUREN — tekst ------------------------------------------------------------------ */ --color-text: #0f172a; /* primaire tekst (koppen, body) */ --color-text-secondary: #334155; /* secundaire tekst (subkoppen) */ --color-text-muted: #64748b; /* gedempte tekst (hints, meta, captions) */ --color-text-on-primary: #ffffff; /* tekst op primaire/gevulde achtergronden */ /* ------------------------------------------------------------------ 1c. KLEUREN — vlakken en randen ------------------------------------------------------------------ */ --color-page-bg: #f8fafc; /* paginaachtergrond */ --color-surface: #ffffff; /* kaarten, panelen, tabellen, modals */ --color-surface-secondary: #f1f5f9; /* secundair vlak (tabelkop, subtle fill) */ --color-border: #e2e8f0; /* standaard randen en scheidingslijnen */ --color-border-strong: #cbd5e1; /* nadrukkelijkere randen (inputs) */ /* ------------------------------------------------------------------ 1d. KLEUREN — semantisch (NIET vervangen door primary) ------------------------------------------------------------------ */ --color-success: #16a34a; --color-success-hover: #15803d; --color-success-text: #166534; --color-success-bg: #dcfce7; --color-warning: #d97706; --color-warning-text: #92400e; --color-warning-bg: #fef3c7; --color-danger: #dc2626; --color-danger-hover: #b91c1c; --color-danger-text: #991b1b; --color-danger-bg: #fee2e2; --color-info: #0284c7; --color-info-text: #075985; --color-info-bg: #e0f2fe; /* AI-functionaliteit heeft een eigen herkenbaar accent (paars) */ --color-ai: #6d28d9; --color-ai-text: #5b21b6; --color-ai-bg: #ede9fe; /* ------------------------------------------------------------------ 1e. KLEUREN — interactiestaten ------------------------------------------------------------------ */ --color-focus: #2563eb; /* focusring-kleur */ --focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.35); /* box-shadow focusring */ --color-disabled-text: #94a3b8; --color-disabled-bg: #f1f5f9; --color-disabled-border: #e2e8f0; /* Overlay achter modals/panelen (donkere sluier) */ --color-overlay: rgba(15, 23, 42, 0.55); /* ------------------------------------------------------------------ 2. TYPOGRAFIE ------------------------------------------------------------------ */ --font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif; --font-family-mono: "Cascadia Code", "Consolas", "Courier New", monospace; /* Schaal (px): 12 · 13 · 14 · 16 · 18 · 20 · 24 · 32 */ --font-size-display: 32px; /* grote cijfers/hero (spaarzaam) */ --font-size-h1: 24px; /* paginatitel — max. 1 per pagina */ --font-size-h2: 20px; /* sectietitel */ --font-size-h3: 18px; /* subsectie / kaarttitel */ --font-size-body: 14px; /* standaard lopende tekst */ --font-size-small: 13px; /* secundaire tekst, tabelinhoud */ --font-size-caption: 12px; /* meta, hints, badges */ --font-size-label: 12px; /* formulierlabels */ --font-size-button: 14px; /* knoppen */ --font-size-table: 13px; /* tabeltekst */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --line-height-tight: 1.25; /* koppen */ --line-height-normal: 1.5; /* body */ --line-height-relaxed: 1.65; /* lange leesteksten */ --letter-spacing-label: 0.04em; /* uppercase labels/eyebrows */ /* ------------------------------------------------------------------ 3. SPACING — vaste schaal, geen willekeurige waarden 4 · 8 · 12 · 16 · 20 · 24 · 32 · 40 · 48 · 64 ------------------------------------------------------------------ */ --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; /* ------------------------------------------------------------------ 4. BORDER RADIUS ------------------------------------------------------------------ */ --radius-xs: 4px; /* checkboxen, kleine chips */ --radius-sm: 6px; /* inputs, badges, compacte knoppen */ --radius-md: 10px; /* knoppen, dropdowns, kleine kaarten */ --radius-lg: 16px; /* kaarten, modals, panelen */ --radius-xl: 24px; /* hero-vlakken, grote visuele blokken */ --radius-pill: 999px; /* pills, chips, avatars */ /* ------------------------------------------------------------------ 5. SHADOWS — uitsluitend deze vier niveaus ------------------------------------------------------------------ */ --shadow-none: none; --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06); /* kaarten */ --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.10); /* dropdowns/popovers */ --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.18); /* modals */ /* ------------------------------------------------------------------ 6. BREAKPOINTS ------------------------------------------------------------------ CSS custom properties werken niet in media queries; deze tokens zijn de canonieke referentie voor documentatie en JavaScript. Gebruik in CSS altijd exact deze waarden: @media (max-width: 640px) — mobiel @media (max-width: 768px) — tablet portret @media (max-width: 1024px) — tablet landschap / kleine laptop @media (max-width: 1280px) — desktop @media (min-width: 1536px) — brede desktop ------------------------------------------------------------------ */ --breakpoint-sm: 640px; --breakpoint-md: 768px; --breakpoint-lg: 1024px; --breakpoint-xl: 1280px; --breakpoint-2xl: 1536px; /* ------------------------------------------------------------------ 7. Z-INDEX — vaste niveaus, geen ad-hoc waarden ------------------------------------------------------------------ */ --z-content: 1; --z-sticky: 100; /* sticky header / toolbar */ --z-sidebar: 150; /* vaste zijnavigatie */ --z-dropdown: 200; /* dropdowns, popovers, tooltips */ --z-mobile-menu: 300; /* mobiel navigatiemenu */ --z-modal-backdrop: 400; --z-modal: 410; --z-toast: 500; /* meldingen — altijd bovenop */ /* ------------------------------------------------------------------ 8. MOTION ------------------------------------------------------------------ */ --motion-fast: 120ms; /* hover, focus, kleine interacties */ --motion-normal: 200ms; /* uitklappen, kleurovergangen */ --motion-slow: 280ms; /* modals, panelen, mobiel menu */ --motion-ease: cubic-bezier(0.2, 0, 0, 1); } /* ---------------------------------------------------------------------- Toegankelijkheid: gebruikers met 'verminderde beweging' krijgen geen token-gedreven animaties. (Raakt alleen componenten die de tokens gebruiken; bestaande hardgecodeerde animaties blijven onaangetast tot hun migratie.) ---------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { :root { --motion-fast: 0ms; --motion-normal: 0ms; --motion-slow: 0ms; } }