/* 3Dmaatje: ontwerptokens (kleur, letter, ruimte, hoeken, schaduw). * * Site v2 (docs/site-v2.md, hoofdstuk 2): de beeldtaal van een werkplaats. * Warm papier, donkerbruine inkt en één messingkleurig accent. De donkere * modus is afgeleid van walnoottinten. * * Alle kleuren staan hier als custom properties. Componenten in site.css * gebruiken alleen deze tokens, nooit losse hexwaarden. * * Thema: * - Standaard volgt de pagina het systeem (prefers-color-scheme). * - of dwingt een thema af. * - Het donkere blok staat daarom twee keer: in de media query (met * :root:not([data-theme="light"])) en onder :root[data-theme="dark"]. * Pas je een donkere kleur aan, doe het dan in beide blokken. * * Oude namen (--paper, --ink, --hout, ...) blijven bestaan als alias, zodat * beheer, klantpagina's, motoren.css en inline stijlen blijven werken. * Gebruik ze niet in nieuwe code. */ :root { color-scheme: light; /* Papier */ --papier: #fcf8f0; /* pagina */ --papier-licht: #fffdf8; /* vlak licht, kaarten, panelen */ --papier-warm: #f8f3ea; /* hover op licht */ --papier-midden: #f5f0e6; /* vlak zacht, kop, voet */ --papier-dof: #e9e2d3; /* vlak dof */ --papier-vouw: #e1d8c6; /* beeldkader achter render en viewer (geen tekst op) */ /* Inkt */ --inkt: #211e18; /* koppen en tekst */ --inkt-diep: #38322a; /* lopende tekst in lange stukken */ --inkt-sterk: #3a2f1c; /* merk, pil-knop, donkere knop */ --tekst-2: #5c5446; /* inleiding, bijtekst (7:1 op papier) */ --tekst-3: #6b6253; /* meta, tabelkop, voetlinks (5,3:1 op papier-midden) */ --tekst-4: #968b78; /* alleen decoratie, nooit voor tekst die je moet lezen */ /* Lijnen */ --lijn: #ddd4c2; --lijn-sterk: #c7bba3; --lijn-zacht: #eae3d4; --raster: rgba(33, 30, 24, 0.16); --hover: rgba(33, 30, 24, 0.05); /* Messing, het accent */ --messing: #b5793a; /* bovenlijn van panelen, iconen, randen (geen kleine tekst) */ --messing-diep: #9a6630; /* primaire knop (wit erop 4,8:1) */ --messing-donker: #855626; /* hover van de primaire knop */ --messing-licht: #d9b57c; /* accenttekst op een donker vlak (6,5:1 op --vlak-donker) */ --messing-was: #f2e3ce; /* actieve rij, badge */ --messing-was-lijn: #e3ceaa; --messing-inkt: #7a5a25; /* labels boven koppen (6:1) */ --op-messing: #fffdf8; /* tekst op messing */ --link: #9a6630; /* links en actieve menulink (4,6:1) */ --link-dof: #855626; /* links op --papier-dof (4,8:1) */ /* Status */ --staal: #2e6b7c; --staal-was: #dce8ea; /* info en focus */ --ok: #3f6b3a; --ok-was: #e5eedd; --let-op: #8a5a12; --let-op-lijn: #c0892e; --let-op-was: #f6ead2; --fout: #a33f2c; --fout-donker: #8a3422; --fout-was: #f6e2dc; /* Donker vlak en walnootpaneel (in beide thema's donker) */ --vlak-donker: #38322a; --walnoot: #2a2219; --walnoot-kop: #34291b; --walnoot-lijn: #3e3324; --op-donker: #fffdf8; --op-donker-2: rgba(255, 253, 248, 0.72); --op-donker-3: rgba(255, 253, 248, 0.55); /* Velden */ --veld-bg: #fffdf8; --veld-lijn: #958470; /* 3,5:1 op papier-licht */ /* Letters */ --font-kop: "Archivo", system-ui, sans-serif; --font-tekst: "Archivo", ui-sans-serif, system-ui, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace; --fs-display: clamp(40px, 3.2vw + 26px, 68px); /* hero: 40 op 375, 67 op 1280 */ --fs-h2: clamp(30px, 2.2vw + 22px, 52px); /* sectiekop */ --fs-h2-groot: clamp(36px, 4vw + 22px, 78px); /* afsluitende oproep */ --fs-titel: clamp(30px, 1.1vw + 26px, 40px); /* paginatitel, demotitel */ --fs-h3: 22px; --fs-h4: 17px; --fs-lead: clamp(17px, 0.3vw + 16px, 19px); --fs-tekst: 16px; --fs-klein: 14px; --fs-mini: 13px; --fs-label: 12px; --fs-micro: 11px; --lh-display: 0.98; --lh-kop: 1.05; --lh-tekst: 1.6; --lh-klein: 1.45; --ls-display: -0.03em; --ls-kop: -0.02em; --ls-label: 0.14em; /* Ruimte (veelvouden van 4) */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 28px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px; --sp-28: 112px; --vlak-boven: clamp(64px, 6vw + 40px, 112px); --vlak-onder: clamp(56px, 4.5vw + 38px, 96px); --wrap-max: 1280px; --wrap-pad: clamp(16px, 4.5vw, 56px); /* 16 px op de telefoon, 56 px op desktop */ --wrap-smal: 760px; /* tekstpagina's en formulieren */ --maat: 66ch; --kop-h: 56px; --control-h: 44px; /* Hoeken */ --r-xs: 2px; --r-sm: 3px; --r: 5px; --r-md: 6px; --r-lg: 8px; --r-beeld: 10px; --r-pil: 999px; /* Schaduw */ --schaduw-druk: 0 1px 1px rgba(33, 30, 24, 0.12); --schaduw-kaart: 0 1px 2px rgba(33, 30, 24, 0.08); --schaduw-til: 0 4px 14px rgba(33, 30, 24, 0.12); --schaduw-zweef: 0 24px 60px rgba(33, 30, 24, 0.20); --schaduw-modal: 0 18px 48px rgba(33, 30, 24, 0.22); --focus: 0 0 0 2px var(--papier), 0 0 0 4px var(--staal); /* Beweging */ --duur: 160ms; --ease: cubic-bezier(0.2, 0.7, 0.2, 1); /* Oude namen (alias, niet meer gebruiken in nieuwe code) */ --paper: var(--papier); --sheet: var(--papier-licht); --panel: var(--papier-midden); --ink: var(--inkt); --muted: var(--tekst-3); --ink-soft: var(--tekst-2); --line: var(--lijn); --line-strong: var(--lijn-sterk); --field-line: var(--veld-lijn); --field-bg: var(--veld-bg); --hout: var(--link); --hout-2: var(--messing); --hout-soft: var(--messing-was); --hout-hover: var(--messing-donker); --on-hout: var(--op-messing); --info: var(--staal); --info-soft: var(--staal-was); --warn: var(--let-op); --warn-line: var(--let-op-lijn); --warn-soft: var(--let-op-was); --ok-soft: var(--ok-was); --danger: var(--fout); --danger-hover: var(--fout-donker); --danger-soft: var(--fout-was); --on-danger: #fffdf8; --grid-fine: rgba(154, 102, 48, 0.07); --grid-bold: rgba(154, 102, 48, 0.14); --radius: var(--r); --radius-0: 0; --font-display: var(--font-kop); --font-body: var(--font-tekst); --fs-xs: var(--fs-micro); --fs-sm: var(--fs-mini); --fs-base: var(--fs-tekst); --fs-h1: var(--fs-titel); --lh-base: var(--lh-tekst); --lh-tight: var(--lh-kop); --bw: 1px; --bw-strong: 2px; --gutter: var(--wrap-pad); --sheet-max: var(--wrap-max); --sheet-wide: var(--wrap-max); --measure: var(--maat); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --papier: #1c160f; --papier-licht: #221b13; --papier-warm: #271f16; --papier-midden: #2a2219; --papier-dof: #1f1812; --papier-vouw: #34291b; --inkt: #f3ecdd; --inkt-diep: #e6dccb; --inkt-sterk: #f3ecdd; --tekst-2: #cfc3ab; --tekst-3: #b3a68d; /* 6,5:1 op papier-midden */ --tekst-4: #8c7f66; --lijn: #3e3324; --lijn-sterk: #54463a; --lijn-zacht: #2f261c; --raster: rgba(236, 229, 213, 0.10); --hover: rgba(236, 229, 213, 0.05); --messing: #c98d4d; --messing-diep: #9a6630; /* knop blijft gelijk, wit erop 4,8:1 */ --messing-donker: #b5793a; /* hover wordt lichter */ --messing-was: #3a2b1d; --messing-was-lijn: #5a4328; --messing-inkt: #d2b27a; /* 8,9:1 */ --link: #d9b57c; --link-dof: #d9b57c; --staal: #7fb1bc; --staal-was: #1d2a2e; --ok: #86b179; --ok-was: #1b2418; --let-op: #e0b25c; --let-op-lijn: #a8841e; --let-op-was: #2c2412; --fout: #eb8b77; --fout-donker: #f2a493; --fout-was: #2f1b16; --vlak-donker: #120e09; --walnoot: #30271c; --walnoot-kop: #3a2f22; --walnoot-lijn: #4a3d2c; --veld-bg: #17120d; --veld-lijn: #7a6a5a; --on-hout: #1c160f; --on-danger: #1c160f; --grid-fine: rgba(217, 181, 124, 0.06); --grid-bold: rgba(217, 181, 124, 0.12); --schaduw-druk: 0 1px 1px rgba(0, 0, 0, 0.35); --schaduw-kaart: 0 1px 2px rgba(0, 0, 0, 0.35); --schaduw-til: 0 4px 14px rgba(0, 0, 0, 0.45); --schaduw-zweef: 0 24px 60px rgba(0, 0, 0, 0.55); --schaduw-modal: 0 18px 48px rgba(0, 0, 0, 0.6); } } :root[data-theme="dark"] { color-scheme: dark; --papier: #1c160f; --papier-licht: #221b13; --papier-warm: #271f16; --papier-midden: #2a2219; --papier-dof: #1f1812; --papier-vouw: #34291b; --inkt: #f3ecdd; --inkt-diep: #e6dccb; --inkt-sterk: #f3ecdd; --tekst-2: #cfc3ab; --tekst-3: #b3a68d; --tekst-4: #8c7f66; --lijn: #3e3324; --lijn-sterk: #54463a; --lijn-zacht: #2f261c; --raster: rgba(236, 229, 213, 0.10); --hover: rgba(236, 229, 213, 0.05); --messing: #c98d4d; --messing-diep: #9a6630; --messing-donker: #b5793a; --messing-was: #3a2b1d; --messing-was-lijn: #5a4328; --messing-inkt: #d2b27a; --link: #d9b57c; --link-dof: #d9b57c; --staal: #7fb1bc; --staal-was: #1d2a2e; --ok: #86b179; --ok-was: #1b2418; --let-op: #e0b25c; --let-op-lijn: #a8841e; --let-op-was: #2c2412; --fout: #eb8b77; --fout-donker: #f2a493; --fout-was: #2f1b16; --vlak-donker: #120e09; --walnoot: #30271c; --walnoot-kop: #3a2f22; --walnoot-lijn: #4a3d2c; --veld-bg: #17120d; --veld-lijn: #7a6a5a; --on-hout: #1c160f; --on-danger: #1c160f; --grid-fine: rgba(217, 181, 124, 0.06); --grid-bold: rgba(217, 181, 124, 0.12); --schaduw-druk: 0 1px 1px rgba(0, 0, 0, 0.35); --schaduw-kaart: 0 1px 2px rgba(0, 0, 0, 0.35); --schaduw-til: 0 4px 14px rgba(0, 0, 0, 0.45); --schaduw-zweef: 0 24px 60px rgba(0, 0, 0, 0.55); --schaduw-modal: 0 18px 48px rgba(0, 0, 0, 0.6); } /* De body krijgt altijd een expliciete achtergrond, tekstkleur en letter, zodat een pagina zonder site.css ook het goede thema toont. */ body { background: var(--papier); color: var(--inkt); font-family: var(--font-tekst); }