/* ========================================================= DESIGN TOKENS Eén bron van waarheid voor kleuren, typografie, spacing, schaduwen en thema's. Override via classes op : .theme-dark, .theme-high-contrast, .simple-mode En via data-attrs: [data-font="lg"|"xl"] ========================================================= */ :root { /* === Kleuren (light theme) === */ --c-bg: #f6f1e8; --c-bg-page: #efe7d8; --c-surface: #ffffff; --c-surface-2: #faf6ee; --c-surface-3: #f1ebdd; --c-ink: #1a2733; --c-ink-2: #4a5663; --c-ink-3: #6f7a86; --c-ink-inv: #ffffff; --c-primary: #2f6b4a; --c-primary-dark: #214e36; --c-primary-soft: #e3efe8; --c-accent: #c2671c; --c-accent-soft: #fbeedb; --c-info: #2c5e8f; --c-info-soft: #e6f0fa; --c-warn: #b58a2b; --c-warn-soft: #faf0d6; --c-danger: #b8351f; --c-danger-soft: #f9e1dc; --c-success: #2f6b4a; --c-line: #e6dfcf; --c-line-2: #cfc6b1; /* === Typografie === */ --font-sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif; --fs-base: 18px; /* lichaam — kleinste niveau */ --fs-step: 1; /* multiplicator — eenvoudige modus zet hoger */ --fs-h1: calc(28px * var(--fs-step)); --fs-h2: calc(20px * var(--fs-step)); --fs-h3: calc(17px * var(--fs-step)); --fs-body: calc(16px * var(--fs-step)); --fs-small: calc(13px * var(--fs-step)); --lh-base: 1.5; --lh-tight: 1.25; --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extra: 800; /* === Spacing & sizing === */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --tap: 60px; /* min touch target */ --tap-lg: 80px; /* in eenvoudige modus */ --radius-sm: 8px; --radius: 16px; --radius-lg: 24px; --radius-xl: 32px; --shadow-1: 0 2px 8px rgba(28, 32, 39, .06); --shadow-2: 0 8px 24px rgba(28, 32, 39, .08); --shadow-3: 0 16px 40px rgba(28, 32, 39, .12); --shadow-focus: 0 0 0 3px rgba(47, 107, 74, .35); /* Layout */ --max-content: 480px; } /* === Lettergrootte-niveaus === */ [data-font="sm"] { --fs-step: 0.92; } [data-font="md"] { --fs-step: 1; } [data-font="lg"] { --fs-step: 1.15; } [data-font="xl"] { --fs-step: 1.3; } /* === Eenvoudige modus === */ .simple-mode { --fs-step: 1.2; --tap: var(--tap-lg); } .simple-mode .secondary-only { display: none !important; } /* === Hoog contrast === */ .theme-high-contrast { --c-bg: #ffffff; --c-bg-page: #ffffff; --c-surface: #ffffff; --c-surface-2: #f4f4f4; --c-ink: #000000; --c-ink-2: #1a1a1a; --c-ink-3: #333333; --c-line: #000000; --c-line-2: #000000; --c-primary: #003d20; --c-primary-dark: #002715; --c-primary-soft: #d8f2e1; --c-accent: #8a3a00; --c-danger: #7a1a0a; } /* === Dark mode === */ .theme-dark { --c-bg: #131922; --c-bg-page: #0e141c; --c-surface: #1c2430; --c-surface-2: #232c3a; --c-surface-3: #2a3441; --c-ink: #f1eee5; --c-ink-2: #cdc9bc; --c-ink-3: #8d9099; --c-ink-inv: #1a2733; --c-primary: #5fa67c; --c-primary-dark: #4a8d65; --c-primary-soft: #1f3a2c; --c-accent: #e69245; --c-accent-soft: #3a2818; --c-info: #6fa3d4; --c-info-soft: #1e2c3c; --c-warn: #d4a849; --c-warn-soft: #3a2f15; --c-danger: #e87a64; --c-danger-soft: #3c1e18; --c-line: #2a3441; --c-line-2: #3a4555; --shadow-1: 0 2px 8px rgba(0, 0, 0, .25); --shadow-2: 0 8px 24px rgba(0, 0, 0, .35); --shadow-3: 0 16px 40px rgba(0, 0, 0, .45); } /* Dark + high contrast = strong dark */ .theme-dark.theme-high-contrast { --c-bg: #000000; --c-bg-page: #000000; --c-surface: #0a0a0a; --c-ink: #ffffff; --c-ink-2: #f0f0f0; --c-line: #ffffff; --c-primary: #6fcf97; --c-primary-soft: #1a3525; } /* Auto theme — respecteert systeemvoorkeur tenzij expliciet light/dark gezet */ @media (prefers-color-scheme: dark) { body.theme-auto:not(.theme-light):not(.theme-dark) { --c-bg: #131922; --c-bg-page: #0e141c; --c-surface: #1c2430; --c-surface-2: #232c3a; --c-ink: #f1eee5; --c-ink-2: #cdc9bc; --c-ink-3: #8d9099; --c-line: #2a3441; --c-primary: #5fa67c; --c-primary-soft: #1f3a2c; } } /* === Reduced motion === */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }