/* WordWinner designsysteem — tokens. Merkstijl "Bordspel": warm, houtachtig, vlakke kleurvlakken met harde onderrand, één accentgroen voor alle acties. Bron: brand/wordwinner-brand.md. Dichtheid via data-density op of wrapper. */ :root { /* ---- unit-systeem (4px-grid) ---- */ --ww-u1: 4px; --ww-u2: 8px; --ww-u3: 12px; --ww-u4: 16px; --ww-u5: 20px; --ww-u6: 24px; --ww-u7: 28px; --ww-u8: 32px; --ww-u10: 40px; --ww-u12: 48px; --ww-u16: 64px; /* ---- kleuren: basisvlakken ---- */ --ww-zand: #F3E9D7; /* paginabodem */ --ww-perkament: #FFFBF3; /* kaarten, panelen */ --ww-linnen: #EFE2CB; /* tabbalk, drawer */ --ww-zacht-zand: #F1E5D0; /* zachte vlakken */ --ww-lijn: #E0CFB2; /* randen, scheidingen */ --ww-lijn-diep: #DFCDB0; /* harde onderrand van kaarten */ /* ---- kleuren: tekst ---- De drie tekstkleuren halen alle drie WCAG AA (4,5:1) op élk basisvlak hierboven; de onderlinge hiërarchie (inkt > sepia > vervaagd) blijft zichtbaar. Donkerder maken mag, lichter niet — dan zakt de leesbaarheid onder de norm. Gemeten op zand (#F3E9D7): 11,4 / 6,5 / 4,8. */ --ww-inkt: #3B2A16; /* koppen, primaire tekst */ --ww-sepia: #5F4F3C; /* lopende tekst */ --ww-vervaagd: #74624E; /* labels, meta */ /* ---- kleuren: accenten (max. twee per scherm) ---- */ --ww-accent: #1F6F5C; /* bosgroen: primaire actie */ --ww-accent-diep: #14503F; /* onderrand accent */ --ww-accent-op: #FBF6EA; /* tekst op accent */ --ww-accent-vlak: #E4EEE7; /* zachte accentachtergrond */ --ww-cta: #B43C28; /* klei-rood: CTA (haalt AA als tekstkleur én als vlak) */ --ww-cta-diep: #8E2F1F; --ww-goud: #916A22; /* Guru-upsell */ --ww-goud-diep: #6E5019; --ww-honing: #F6E7C5; /* Guru-vlak, topzet */ --ww-gevaar: #B23B26; --ww-gevaar-vlak: #F6DFD6; --ww-gevaar-rand: #E4C6B8; /* ---- kleuren: bord ---- */ --ww-tegel-leeg: #F7EEDD; --ww-tegel-rand: #E2D2B6; --ww-steen: #E8D5A8; /* gelegde letter */ --ww-steen-diep: #C6AF7C; --ww-tw: #B23B26; --ww-tw-diep: #8A2B1B; /* drievoudig woord */ --ww-dw: #D98C3F; --ww-dw-diep: #B06C27; /* dubbel woord */ --ww-tl: #2E6E8E; --ww-tl-diep: #1F5169; /* drievoudige letter */ --ww-dl: #4A7B56; --ww-dl-diep: #375D40; /* dubbele letter (donker genoeg voor witte tekst) */ --ww-ster: #6B4B12; --ww-ster-diep: #4A330A; /* ---- typografie ---- */ --ww-display: 'Baloo 2', system-ui, sans-serif; /* titels, knoppen, waardes */ --ww-tekst: 'Nunito', system-ui, sans-serif; /* lopende tekst, cijfers */ --ww-fs-display: 36px; /* Baloo 700 / 1.05 / -0.4px */ --ww-fs-sectie: 22px; /* Baloo 700 */ --ww-fs-knop: 16px; /* Baloo 600 */ --ww-fs-waarde: 17px; /* Baloo 600, caps, +0.05em */ --ww-fs-brood: 15px; /* Nunito 400 / 1.65 */ --ww-fs-label: 11px; /* Nunito 800 caps +0.1em */ --ww-fs-meta: 12px; --ww-leesbreedte: 62ch; /* ---- vorm ---- */ --ww-radius-kaart: 18px; --ww-radius-knop: 14px; --ww-radius-veld: 14px; --ww-radius-tegel: 4px; --ww-radius-pil: 999px; /* ---- diepte: harde onderrand, geen blur ---- */ --ww-rand: 0 4px 0 var(--ww-lijn-diep); --ww-rand-accent: 0 4px 0 var(--ww-accent-diep); --ww-rand-cta: 0 4px 0 var(--ww-cta-diep); --ww-rand-klein: 0 3px 0 var(--ww-lijn-diep); --ww-omgeving: 0 14px 26px rgba(90, 62, 30, .10); /* enige zachte schaduw, alleen op kaarten */ /* ---- achtergrond: houtnerf ---- */ --ww-nerf: repeating-linear-gradient(90deg, rgba(160, 124, 80, .07) 0 2px, transparent 2px 12px); /* ---- focus ---- */ --ww-focus: 0 0 0 3px var(--ww-inkt); /* selectie = 3px ring in inkt */ /* ---- dichtheid: compact (standaard) ---- */ --ww-gutter: 20px; --ww-pagina-pad: 14px 20px; --ww-kaart-pad: 12px; --ww-tegelgat: 2px; --ww-tegel-font: 11px; --ww-tab-pad: 11px 15px; --ww-knop-pad: 11px; --ww-rij-pad: 8px 12px; --ww-titel: 17px; --ww-rail: 340px; --ww-max: 1140px; } [data-density='normaal'] { --ww-gutter: 28px; --ww-pagina-pad: 22px 28px; --ww-kaart-pad: 18px; --ww-tegelgat: 3px; --ww-tegel-font: 12px; --ww-tab-pad: 15px 22px; --ww-knop-pad: 15px; --ww-rij-pad: 12px 14px; --ww-titel: 20px; --ww-rail: 400px; --ww-max: 1280px; } [data-density='ruim'] { --ww-gutter: 40px; --ww-pagina-pad: 34px 40px; --ww-kaart-pad: 26px; --ww-tegelgat: 5px; --ww-tegel-font: 14px; --ww-tab-pad: 19px 28px; --ww-knop-pad: 19px; --ww-rij-pad: 16px 18px; --ww-titel: 23px; --ww-rail: 440px; --ww-max: 1460px; }