/* ========================================================================== TafelToppers — theme.css Leren. Groeien. Uitblinken. Centrale design tokens voor de hele app en website. Wordt geladen door index.html, landingspagina.html en intake-vragenlijst.html, en meegenomen in scripts/build-www.js zodat de native schil dezelfde stijl krijgt. REGEL: componenten noemen nooit een hexcode, alleen var(--tt-*). Dit bestand bevat BEWUST alleen custom properties -- geen element- of klasse-selectors. Zolang niets ernaar verwijst verandert er visueel niets; de bestaande --ink/--paper/--brass-variabelen in index.html blijven ongemoeid. Het omzetten daarvan gebeurt in een aparte, terugdraaibare stap. Versie 1.0 -- 22 september 2026 ========================================================================== */ :root { /* --------------------------------------------------------------- 1. MERKKLEUREN -- exact zoals vastgesteld in de huisstijlbrief. Dit is het enige blok dat wijzigt bij een toekomstige restyling. --------------------------------------------------------------- */ --tt-green: #062E27; /* primary dark green */ --tt-green-deep: #041F1B; /* deep green */ --tt-green-soft: #E7EFEB; /* soft green */ --tt-gold: #C9A15B; /* champagne gold */ --tt-gold-light: #E2C383; /* light gold */ --tt-cream: #F7F4ED; /* cream background */ --tt-white: #FFFFFF; --tt-text: #10211D; /* primary text */ --tt-text-muted: #68736F; /* secondary text */ --tt-border: #E5E4DF; /* border */ --tt-success: #3F8066; --tt-error: #B9564F; --tt-warning: #D09A45; /* Zachte tinten voor status-achtergronden met donkere tekst erop. Stonden eerder als losse hexcodes in de intake; hier zodat ze meebewegen. */ --tt-success-soft: #E7EFEB; --tt-warning-soft: #FAF3E6; --tt-error-soft: #F7DEDC; /* --------------------------------------------------------------- 2. AFGELEIDE VARIANTEN -- toegankelijkheid Vijf combinaties uit blok 1 halen de WCAG-drempel niet (4,5 voor tekst, 3,0 voor de rand van een bedienbaar element). Deze varianten lossen dat op zonder de huisstijl te veranderen: ze worden alleen gebruikt op de plek waar het origineel tekortschiet. --------------------------------------------------------------- */ /* Goud als TEKST of ICOON op licht. #C9A15B haalt daar 2,19. */ --tt-gold-ink: #85652B; /* 4,57 op cream */ /* Goud als ZICHTBARE RAND op licht (focusring, geselecteerde rand). #C9A15B haalt daar 2,40; een UI-grens moet 3,0 halen. */ --tt-gold-deep: #A37E38; /* 3,41 op cream */ /* Rand van bedienbare elementen (inputs, checkboxen, selects). #E5E4DF haalt 1,27 en is als invoerrand feitelijk onzichtbaar. Blijf #E5E4DF gebruiken voor cardranden -- dat is decoratief. */ --tt-border-strong: #8E8C84; /* 3,07 op cream */ /* Secundaire tekst op cream. #68736F haalt daar 4,48. */ --tt-text-muted-2: #636D69; /* 4,87 op cream */ /* Warning als tekst op licht. #D09A45 haalt daar 2,50. */ --tt-warning-ink: #8D6118; /* 4,96 op cream */ /* Success als tekst op licht. #3F8066 haalt daar 4,26 -- net te weinig. */ --tt-success-ink: #3A7660; /* 4,85 op cream */ /* --------------------------------------------------------------- 3. SEMANTISCHE ROLLEN -- dit is wat componenten aanroepen --------------------------------------------------------------- */ --tt-surface: var(--tt-cream); /* paginagrond */ --tt-surface-card: var(--tt-white); /* cards, panelen */ --tt-surface-sunken: var(--tt-green-soft); /* tracks, tinten */ --tt-surface-inverse: var(--tt-green); /* nav, hero, footer */ --tt-on-surface: var(--tt-text); --tt-on-surface-muted: var(--tt-text-muted-2); --tt-on-card-muted: var(--tt-text-muted); --tt-on-inverse: var(--tt-white); --tt-on-inverse-muted: var(--tt-gold-light); --tt-action: var(--tt-green); /* primary button */ --tt-action-hover: #0A4139; --tt-on-action: var(--tt-white); --tt-action-accent: var(--tt-gold); /* gold CTA */ --tt-action-accent-hover: var(--tt-gold-light); --tt-on-action-accent: var(--tt-text); --tt-line: var(--tt-border); /* decoratieve rand */ --tt-line-control: var(--tt-border-strong); /* invoerrand */ --tt-focus: var(--tt-gold-deep); --tt-accent-ink: var(--tt-gold-ink); /* goud op licht */ --tt-accent-on-dark: var(--tt-gold); /* goud op donker */ --tt-correct: var(--tt-success); --tt-correct-ink: var(--tt-success-ink); --tt-incorrect: var(--tt-error); /* --------------------------------------------------------------- 4. TYPOGRAFIE --------------------------------------------------------------- */ --tt-font-display: 'Playfair Display', Georgia, 'Times New Roman', serif; --tt-font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --tt-h1: clamp(2rem, 5vw, 3rem); /* 32 - 48 */ --tt-h2: clamp(1.75rem, 3.6vw, 2.125rem); /* 28 - 34 */ --tt-h3: clamp(1.375rem, 2.4vw, 1.625rem);/* 22 - 26 */ --tt-body: 1rem; --tt-small: 0.875rem; --tt-tiny: 0.8125rem; --tt-lh-tight: 1.15; --tt-lh-body: 1.6; /* --------------------------------------------------------------- 5. SPACING -- 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 --------------------------------------------------------------- */ --tt-space-1: 4px; --tt-space-2: 8px; --tt-space-3: 12px; --tt-space-4: 16px; --tt-space-5: 24px; --tt-space-6: 32px; --tt-space-7: 48px; --tt-space-8: 64px; /* --------------------------------------------------------------- 6. RADIUS / SCHADUW / BEWEGING --------------------------------------------------------------- */ --tt-radius-sm: 8px; --tt-radius-md: 12px; --tt-radius-lg: 16px; --tt-radius-xl: 20px; --tt-shadow-sm: 0 1px 2px rgba(6, 46, 39, .05); --tt-shadow-md: 0 1px 2px rgba(6, 46, 39, .04), 0 8px 24px -14px rgba(6, 46, 39, .22); --tt-shadow-lg: 0 2px 4px rgba(6, 46, 39, .05), 0 18px 40px -20px rgba(6, 46, 39, .28); --tt-ease: cubic-bezier(.2, .7, .3, 1); --tt-dur: 180ms; /* --------------------------------------------------------------- 7. LAYOUT --------------------------------------------------------------- */ --tt-max-dashboard: 1200px; --tt-max-reading: 720px; /* leercontent / quiz: 600-800 */ --tt-tap: 44px; /* minimale touch target */ }