/* ============================================================================= JANSENDEVELOPMENTS DESIGN SYSTEM — TOKENS Versie: 2.16.0 Docs: /design-system/README.md (lees dit vóór je iets wijzigt) Preview: /design-system/preview.html ARCHITECTUUR — twee lagen in dit ene bestand: LAAG 1 · PALET (--palette-*) Alleen kleuren. De ENIGE plek in het hele systeem met hex-waarden. Namen beschrijven wat de kleur IS (paper, ink, celadon), nooit waar hij heen gaat. Een palette-token bestaat alleen als ≥2 semantische tokens ernaar verwijzen óf als hij een eigen dark-variant nodig heeft. LAAG 2 · SEMANTISCH (--color-*, --text-*, --space-*, --size-*, ...) De publieke API. Componenten en pagina's gebruiken UITSLUITEND deze laag — nooit --palette-*, nooit hex, nooit losse px-waarden. Spacing/typografie/maten hebben géén palet-laag: hun waarde staat direct in het semantische token (niemand "rebrandt" een spacing-schaal). THEMING: · Dark mode → [data-theme="dark"] op overschrijft ALLEEN palet-tokens. De semantische laag volgt automatisch. · Subdomeinen → [data-site="..."] op overschrijft ALLEEN --palette-accent (+ dark-variant). Zie README §5. · Hoofddomein → géén data-site: accent = brand. Zo is www vanzelf het meest "true to the design system". HARDE REGELS (toelichting in README §8): 1. Nooit --palette-* of hex gebruiken buiten dit bestand. 2. Nooit calc(token × getal) om tussenmaten te verzinnen — nieuwe, benoemde token toevoegen. Optellen/aftrekken van twee tokens mag. 3. Elke nieuwe kleur éérst AA-toetsen met scripts/contrast.mjs (licht ÉN donker), dan pas opnemen. Alle waarden hieronder zijn getoetst op 2026-07-03. ============================================================================= */ /* ============================================================================= LAAG 1 — PALET · LIGHT (default) ============================================================================= */ :root { /* ── Neutralen — "botanisch atelier": porselein met een groene ondertoon (herzien 2026-07-03: weg van het geel-crème + terracotta dat inmiddels een generieke AI-esthetiek is; zacht en organisch gebleven). paper = paginakleur (basis van alle AA-toetsen) celadon = verdiepte vlakken (secties, sidebars, code-blokken) reed = decoratieve lijnen (kaartranden, dividers — NIET voor randen die interactiviteit aanduiden, zie lichen) lichen = interactieve randen (form-velden, chips — WCAG 1.4.11, 3.43:1 op paper) stone = gedempte tekst (5.20:1 op paper) ink = primaire tekst (14.45:1 op paper) */ --palette-paper: #F6F5EF; --palette-celadon: #EBEADD; --palette-reed: #DDDBCC; --palette-lichen: #7F8770; --palette-stone: #63695A; --palette-ink: #20241C; /* ── Brand — diep dennengroen. De bureau-identiteit: identiek op elk domein (logo, header, hoofdpagina-accenten). NOOIT overschrijven via data-site. (6.42:1 op paper, wit erop 7.01:1) ─────────────────────── */ --palette-brand: #34633C; /* ── Accent — per-subdomein variatiekleur. Default = brand (hoofddomein). Subdomeinen overschrijven ALLEEN dit token via [data-site], onderaan dit bestand. on-accent = tekst/iconen bovenop een accent-vlak. ────── */ --palette-accent: var(--palette-brand); --palette-on-accent: #FFFFFF; /* ── Shade — mengdoel voor hover/pressed-afleidingen (color-mix in de semantische laag). Licht thema mengt richting zwart (donkerder = méér contrast op lichte vlakken, AA blijft gegarandeerd); dark thema draait dit om naar wit. ─────────────────────────────────────────── */ --palette-shade: #000000; /* ── Support — statuskleuren, zacht en gedempt. Success is bewust teal (blauwgroen) zodat hij nooit met het groene brand verwart; info is een gedempt rivierblauw (geen fel SaaS-blauw). *-soft = zachte achtergrond voor alerts/toasts; de sterke kleur is erop getoetst (≥4.5:1). ────── */ --palette-success: #17705C; --palette-success-soft: #DDEEE6; --palette-error: #B2352C; --palette-error-soft: #F8E0DA; --palette-warning: #8A5A00; --palette-warning-soft: #F5E9CA; --palette-info: #3A6B8A; --palette-info-soft: #DEE9F1; /* ── Labels — decoratieve badge/tag-achtergronden (tekst erop is altijd --color-text, dus contrast is geborgd via ink). ────────────────────── */ --palette-label-neutral: #E7E5D6; --palette-label-green: #DBEDD6; --palette-label-yellow: #F4EBC4; --palette-label-orange: #F7E2CB; --palette-label-red: #F8DCD6; --palette-label-purple: #EADFF1; --palette-label-blue: #DBE8F2; /* ── Desk — het werkblad onder de vellen (creatieve overhaul 2026-07-06, "het atelier letterlijk"): pagina's die als tafel gefilmd worden zetten dit als paginavlak, en alles wat erop ligt (vellen, artefacten) gebruikt paper. Eigen dark-variant is de bestaansreden van dit token: in dark is paper al donker, dus moet de tafel er nóg dieper onder liggen — anders klopt de elevatie niet (vel moet lichter zijn dan tafel). Licht = celadon (tekstcontrasten op celadon zijn al getoetst). ─────────────────────── */ --palette-desk: #EBEADD; /* ── Scrim — verduistering achter modals/drawers ──────────────────────── */ --palette-scrim: rgba(23, 26, 20, 0.55); } /* ============================================================================= LAAG 1 — PALET · DARK [data-theme="dark"] op , gezet door theme.js vóór de eerste paint. ALLEEN palet-tokens wisselen om; de semantische laag en alle componenten volgen automatisch. Elke waarde is apart AA-getoetst tegen de donkere achtergronden (een kleur die op licht slaagt, slaagt niet automatisch op donker). ============================================================================= */ [data-theme="dark"] { --palette-paper: #171A14; /* diep groen-zwart — geen koud blauwzwart */ --palette-celadon: #21251D; --palette-reed: #363B2F; --palette-lichen: #6F7761; /* 3.76:1 op donker — WCAG 1.4.11 */ --palette-stone: #A6A794; /* 7.18:1 op donker */ --palette-ink: #EFEEE3; /* 15.08:1 op donker */ --palette-brand: #8CB98F; /* zachte salie — 7.91:1 op donker */ --palette-on-accent: #171A14; /* donkere tekst op de lichtere accenten */ --palette-shade: #FFFFFF; /* hover mengt richting licht */ --palette-success: #4FB39A; --palette-success-soft: #1C2F29; --palette-error: #E37A69; --palette-error-soft: #3A211D; --palette-warning: #D9A036; --palette-warning-soft: #38301A; --palette-info: #7FAECC; --palette-info-soft: #1F2A36; --palette-label-neutral: #2E3227; --palette-label-green: #24331F; --palette-label-yellow: #37301A; --palette-label-orange: #3A2A18; --palette-label-red: #3A211D; --palette-label-purple: #2F2437; --palette-label-blue: #1E2A35; /* Tafel dieper dan paper (#171A14): vellen liggen er lichter bovenop. */ --palette-desk: #101209; --palette-scrim: rgba(0, 0, 0, 0.65); } /* ============================================================================= VASTE TOKENS — NIET THEMA-AFHANKELIJK Uitzondering op de regel "alles via de semantische laag, thema's wisselen automatisch mee": deze twee paren blijven BEWUST hetzelfde in licht én donker. Ze bestaan voor de bibliotheek-preview-achtergrond op component. (verzoek Ruud 2026-07-08): soms is een licht component onzichtbaar tegen een licht sitethema (of andersom) — de gebruiker kan de achtergrond van ALLEEN de preview-containers naar licht/donker forceren, los van het sitethema zelf. Daarom hier gedefinieerd als losse, altijd-gelijke waarden i.p.v. via --palette-* (die verandert wél per thema). Hergebruikt de reeds AA-getoetste paper/ink/celadon-paren. ============================================================================= */ :root { --color-preview-surface-light: #EBEADD; /* = lichte celadon */ --color-preview-ink-light: #20241C; /* = lichte ink */ --color-preview-surface-dark: #21251D; /* = donkere celadon */ --color-preview-ink-dark: #EFEEE3; /* = donkere ink */ } /* ============================================================================= LAAG 1 — ACCENTEN PER SUBDOMEIN Het volledige theming-contract: een subdomein mag ALLEEN --palette-accent aanpassen (licht + donker). Alles wat via --color-accent loopt (prominente buttons, actieve states, links, focus-ring, hero-tint) kleurt automatisch mee — een subdomein kiest de tint, nooit de plaatsing. Nieuw subdomein toevoegen (volledige stappen in README §5): 1. Kies een zachte, gedempte kleur binnen de organische familie (oker, klei, aubergine, mos, roest — nooit fel/koud SaaS-blauw/paars, en niet te dicht op het dennengroene brand). 2. Toets met scripts/contrast.mjs: ≥4.5:1 op paper én celadon, en on-accent ≥4.5:1 op de accent zelf — voor licht ÉN donker. 3. Voeg hieronder twee blokjes toe (~4 regels) en zet data-site="" op van dat subdomein. ============================================================================= */ /* component.jansendevelopments.com — oker (goud-bruin, bibliotheek/archief) */ [data-site="component"] { --palette-accent: #836010; } [data-theme="dark"][data-site="component"] { --palette-accent: #D2A034; } /* account.jansendevelopments.com — klei (warm roodbruin, menselijk/identiteit). Was olijfgroen; gewijzigd bij de paletherziening van 2026-07-03 omdat olijf te dicht op het nieuwe dennengroene brand zat om nog als onderscheidend subdomein-signaal te werken. */ [data-site="account"] { --palette-accent: #8E3B5C; } [data-theme="dark"][data-site="account"] { --palette-accent: #D98BA6; } /* studio.jansendevelopments.com — aubergine (privé, atelier) */ [data-site="studio"] { --palette-accent: #8A4468; } [data-theme="dark"][data-site="studio"] { --palette-accent: #CE85AF; } /* ============================================================================= LAAG 2 — SEMANTISCHE TOKENS De publieke API. Componenten gebruiken uitsluitend wat hieronder staat. ============================================================================= */ :root { /* ══ KLEUR — TEKST ═════════════════════════════════════════════════════ */ --color-text: var(--palette-ink); --color-text-muted: var(--palette-stone); /* bijschriften, meta */ --color-text-disabled: var(--palette-stone); --color-text-inverse: var(--palette-paper); /* op inverse vlakken */ --color-text-brand: var(--palette-brand); --color-text-accent: var(--palette-accent); --color-text-link: var(--palette-accent); --color-text-on-accent: var(--palette-on-accent); /* op accent-/brand-vlak */ --color-text-success: var(--palette-success); --color-text-error: var(--palette-error); --color-text-warning: var(--palette-warning); --color-text-info: var(--palette-info); /* ══ KLEUR — ACHTERGRONDEN ═════════════════════════════════════════════ */ --color-bg: var(--palette-paper); /* pagina */ --color-bg-sunken: var(--palette-celadon); /* verdiepte secties */ --color-bg-raised: var(--palette-paper); /* kaarten/modals (licht = zelfde als pagina + rand/schaduw; dark krijgt via celadon vanzelf een lichter vlak) */ --color-bg-inverse: var(--palette-ink); --color-bg-brand: var(--palette-brand); --color-bg-accent: var(--palette-accent); --color-bg-success-soft: var(--palette-success-soft); --color-bg-error-soft: var(--palette-error-soft); --color-bg-warning-soft: var(--palette-warning-soft); --color-bg-info-soft: var(--palette-info-soft); --color-bg-desk: var(--palette-desk); /* werkblad — de tafel waar vellen/artefacten (--color-bg) op liggen */ --color-scrim: var(--palette-scrim); /* Zachte accent-tint (hero-wash, actieve sidebar-items, selectie): 8% accent op de paginakleur — schaalt automatisch mee met elk subdomein-accent én met dark mode. */ --color-bg-accent-soft: color-mix(in srgb, var(--palette-accent) 8%, var(--palette-paper)); /* ══ KLEUR — LIJNEN & RANDEN ═══════════════════════════════════════════ */ --color-line: var(--palette-reed); /* decoratief: kaart- randen, dividers, tabellijnen */ --color-line-strong: var(--palette-lichen); /* interactief (WCAG 1.4.11): form-velden, chips, default-buttons */ --color-line-brand: var(--palette-brand); --color-line-accent: var(--palette-accent); /* ══ KLEUR — ICONEN ════════════════════════════════════════════════════ */ --color-icon: var(--palette-ink); --color-icon-muted: var(--palette-stone); --color-icon-inverse: var(--palette-paper); --color-icon-brand: var(--palette-brand); /* Select-chevron als data-URI (CSS-achtergronden kunnen geen currentColor; de kleur — stone — staat hier hardcoded in de URI en heeft daarom een eigen dark-variant onderaan dit bestand). */ --icon-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2363695A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); --color-icon-accent: var(--palette-accent); --color-icon-on-accent: var(--palette-on-accent); --color-icon-success: var(--palette-success); --color-icon-error: var(--palette-error); --color-icon-warning: var(--palette-warning); --color-icon-info: var(--palette-info); /* ══ KLEUR — INTERACTIE-STATES ═════════════════════════════════════════ Afgeleid via color-mix, dus ze volgen automatisch élk accent en élk thema. Richting --palette-shade (licht→zwart, donker→wit) betekent: de AA-getoetste basiskleur wordt alleen versterkt, nooit verzwakt. */ --color-accent-hover: color-mix(in srgb, var(--palette-accent) 85%, var(--palette-shade)); --color-accent-pressed: color-mix(in srgb, var(--palette-accent) 72%, var(--palette-shade)); --color-brand-hover: color-mix(in srgb, var(--palette-brand) 85%, var(--palette-shade)); --color-brand-pressed: color-mix(in srgb, var(--palette-brand) 72%, var(--palette-shade)); /* Neutrale overlay voor stille elementen (rijen, icon-buttons, menu-items). Gebouwd op ink → wisselt in dark mode vanzelf naar een lichte overlay. */ --color-hover-overlay: color-mix(in srgb, var(--palette-ink) 5%, transparent); --color-pressed-overlay: color-mix(in srgb, var(--palette-ink) 10%, transparent); --color-selected-overlay: color-mix(in srgb, var(--palette-accent) 10%, transparent); /* ══ KLEUR — LABELS/TAGS ═══════════════════════════════════════════════ */ --color-label-neutral: var(--palette-label-neutral); --color-label-green: var(--palette-label-green); --color-label-yellow: var(--palette-label-yellow); --color-label-orange: var(--palette-label-orange); --color-label-red: var(--palette-label-red); --color-label-purple: var(--palette-label-purple); --color-label-blue: var(--palette-label-blue); /* ══ FOCUS (toetsenbord-navigatie — nooit onderdrukken) ════════════════ */ --focus-ring-color: var(--palette-accent); --focus-ring-width: 2px; --focus-ring-offset: 2px; /* ══ TYPOGRAFIE — FAMILIES ═════════════════════════════════════════════ Fraunces display-serif met karakter (koppen, quotes, stats) Instrument Sans heldere grotesk (UI, lopende tekst) Bestanden: /design-system/fonts/ (zelf gehost — CSP staat geen externe hosts toe). @font-face-declaraties staan in base.css. */ --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-sans: 'Instrument Sans', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace; /* ══ TYPOGRAFIE — TEKSTSTIJLEN ═════════════════════════════════════════ Elke stijl = family + size + line + weight (+ tracking/transform). FLUID TOKENS (2026-07-03): de grote stijlen schalen VLOEIEND met de viewport via clamp(min, basis + Xvw, max) — geen sprong op één breakpoint, dus ook tablets (±800px) en kleinere laptops (±1280px) zitten altijd op een passende maat. Het bereik loopt van 375px (min-waarde) tot 1440px (max-waarde); daarbuiten klemt clamp vast. Consumenten (base.css, components.css, subdomein-CSS) hebben dus NOOIT eigen media queries voor typografie nodig — één bron, overal juist. (Deze clamp()-formules zijn de benoemde designbeslissing zélf en vallen dus buiten de "geen calc-afgeleiden"-regel, die over consumenten van tokens gaat.) In fase 2 krijgt elke stijl een .text-*-class. */ /* Poster — typografie op affiche-formaat, pakt de volle containerbreedte. Alleen voor de homepage-hero van een (sub)domein (vormtaal-regel: maximaal één postermoment per pagina — zie docs/VORMTAAL.md). */ --text-poster-family: var(--font-display); --text-poster-size: clamp(2rem, 1.05rem + 3.4vw, 4.25rem); /* 32 → 68 — desktop bewust ingetoomd */ --text-poster-line: 1.05; /* ruimte voor staartletters (g, p) — regelmaskers knippen anders */ --text-poster-weight: 620; --text-poster-tracking: -0.025em; /* Display — hero-statements, extra groot, alleen voor de allergrootste kop */ --text-display-family: var(--font-display); --text-display-size: clamp(2.75rem, 2.13rem + 2.63vw, 4.5rem); /* 44 → 72 */ --text-display-line: 1.03; --text-display-weight: 600; --text-display-tracking: -0.02em; /* Headings — 1/2 in Fraunces (karakter), 3/4 in Instrument Sans (helder) */ --text-h1-family: var(--font-display); --text-h1-size: clamp(2.25rem, 1.9rem + 1.5vw, 3.25rem); /* 36 → 52 */ --text-h1-line: 1.08; --text-h1-weight: 600; --text-h1-tracking: -0.015em; --text-h2-family: var(--font-display); --text-h2-size: clamp(1.75rem, 1.57rem + 0.75vw, 2.25rem); /* 28 → 36 */ --text-h2-line: 1.12; --text-h2-weight: 600; --text-h2-tracking: -0.01em; --text-h3-family: var(--font-sans); --text-h3-size: clamp(1.375rem, 1.29rem + 0.38vw, 1.625rem); /* 22 → 26 */ --text-h3-line: 1.22; --text-h3-weight: 600; --text-h3-tracking: 0; --text-h4-family: var(--font-sans); --text-h4-size: clamp(1.125rem, 1.08rem + 0.19vw, 1.25rem); /* 18 → 20 */ --text-h4-line: 1.3; --text-h4-weight: 600; --text-h4-tracking: 0; /* Lopende tekst */ --text-lead-family: var(--font-sans); --text-lead-size: clamp(1.125rem, 1.06rem + 0.28vw, 1.3125rem); /* 18 → 21 */ --text-lead-line: 1.6; --text-lead-weight: 400; --text-body-family: var(--font-sans); --text-body-size: 1.0625rem; /* 17 — vast */ --text-body-line: 1.65; --text-body-weight: 400; --text-body-s-family: var(--font-sans); --text-body-s-size: 0.9375rem; /* 15 — vast */ --text-body-s-line: 1.55; --text-body-s-weight: 400; --text-caption-family: var(--font-sans); --text-caption-size: 0.8125rem; /* 13 — vast */ --text-caption-line: 1.45; --text-caption-weight: 500; /* Eyebrow — kicker boven een kop (uppercase, ruim gespatieerd) */ --text-eyebrow-family: var(--font-sans); --text-eyebrow-size: 0.8125rem; --text-eyebrow-line: 1.2; --text-eyebrow-weight: 600; --text-eyebrow-tracking: 0.1em; --text-eyebrow-transform: uppercase; /* Accenten met karakter */ --text-quote-family: var(--font-display); --text-quote-size: clamp(1.5rem, 1.37rem + 0.56vw, 1.875rem); /* 24 → 30 */ --text-quote-line: 1.42; --text-quote-weight: 480; --text-quote-style: italic; --text-stat-family: var(--font-display); --text-stat-size: clamp(2.5rem, 2.15rem + 1.5vw, 3.5rem); /* 40 → 56 */ --text-stat-line: 1.08; --text-stat-weight: 600; --text-stat-tracking: -0.015em; /* UI-stijlen — bewust vaste groottes (klein genoeg op elk scherm) */ --text-button-family: var(--font-sans); --text-button-size: 1rem; --text-button-line: 1.2; --text-button-weight: 600; --text-nav-family: var(--font-sans); --text-nav-size: 0.9375rem; --text-nav-line: 1.2; --text-nav-weight: 500; --text-badge-family: var(--font-sans); --text-badge-size: 0.75rem; --text-badge-line: 1.2; --text-badge-weight: 600; --text-badge-tracking: 0.02em; --text-form-input-family: var(--font-sans); --text-form-input-size: 1rem; --text-form-input-line: 1.5; --text-form-input-weight: 400; --text-form-label-family: var(--font-sans); --text-form-label-size: 0.875rem; --text-form-label-line: 1.4; --text-form-label-weight: 550; --text-form-help-family: var(--font-sans); --text-form-help-size: 0.875rem; --text-form-help-line: 1.5; --text-form-help-weight: 400; --text-code-family: var(--font-mono); --text-code-size: 0.875rem; --text-code-line: 1.6; --text-code-weight: 400; /* ══ SPACING ═══════════════════════════════════════════════════════════ Bewust dichte schaal: v1 had een te grove schaal (8→16→32) waardoor steeds "tussenmaten" via verboden calc()-constructies ontstonden. Toepassing: altijd via gap op een flex/grid-container — nooit losse margins op kinderen (zie README §8). */ --space-3xs: 4px; --space-2xs: 8px; --space-xs: 12px; --space-s: 16px; --space-m: 24px; --space-l: 32px; --space-xl: 48px; --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 128px; --space-5xl: 192px; /* ══ MATEN ═════════════════════════════════════════════════════════════ */ --size-control-s: 32px; /* compacte rijen: chips, sidebar-items */ --size-control-m: 40px; /* standaard: buttons, inputs, selects */ --size-control-l: 48px; /* nadruk: hero-CTA, grote zoekbalk */ --size-header: 72px; /* site-header. Hero = 100svh − dit (calc met twee tokens = toegestaan) */ --size-icon-s: 16px; --size-icon-m: 20px; --size-icon-l: 24px; --size-icon-xl: 32px; /* ══ LAYOUT ════════════════════════════════════════════════════════════ */ --container-max: 1440px; /* standaard paginabreedte (verruimd 2026-07-06 op verzoek Ruud) */ --container-text: 720px; /* leesbreedte lopende tekst */ --container-narrow: 560px; /* formulieren, login, smalle modals */ --container-gutter: clamp(20px, 13px + 1.88vw, 40px); /* zijruimte, vloeiend 20 (375px) → 40 (1440px) */ /* ══ VORM ══════════════════════════════════════════════════════════════ */ --radius-s: 6px; /* badges, chips, code-inline */ --radius-m: 10px; /* buttons, inputs */ --radius-l: 16px; /* kaarten, dropdowns */ --radius-xl: 24px; /* modals, hero-panelen */ --radius-full: 999px; /* pills, avatars */ --border-thin: 1px; --border-thick: 2px; /* ══ MATERIAAL — het atelier letterlijk (creatieve overhaul 2026-07-06) ══ Vlakken zijn papier, geen panelen: korrel, een heel licht papierverloop en benoemde strooihoeken voor objecten die óp de pagina liggen. */ /* Papierkorrel — SVG-noise als data-URI (CSP: img-src data: is toegestaan). Altijd toepassen via de .grain-utility (components.css), nooit los: die regelt opacity per thema en pointer-events. */ --texture-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E"); --texture-grain-opacity: 0.05; /* dark-variant onderaan (zichtbaarheid per thema apart getoetst) */ /* Papierverloop — 4% ink over een hoek van het vlak; ink wisselt met het thema mee, dus licht = zachte schaduwzweem, donker = zachte sheen. */ --tint-paper: color-mix(in srgb, var(--palette-ink) 4%, transparent); /* Strooihoeken — benoemde rotaties voor artefacten/vellen ("dingen liggen op de pagina"). Consumenten kiezen uit deze vier, nooit eigen graden. */ --tilt-a: -1.4deg; --tilt-b: 0.9deg; --tilt-c: -0.6deg; --tilt-d: 1.8deg; /* ══ SCHADUW — getint met de groene ink (geen koud zwart) ═════════════ LET OP: schaduwen zijn de ENIGE semantische tokens met een eigen [data-theme="dark"]-override (blok onderaan dit bestand). Reden: een donkere schaduw is op een donkere achtergrond nagenoeg onzichtbaar — elevatie werkt daar via (a) lichtere vlakken (--color-bg-raised is in dark al het lichtere celadon), (b) een subtiele lichte hairline rondom het vlak, en (c) een diepere, zwartere schaduw. (b) en (c) zitten in de dark-varianten van deze tokens ingebakken; componenten gebruiken gewoon var(--shadow-*) en hoeven nergens van te weten. ──── */ --shadow-s: 0 1px 2px rgba(32, 36, 28, 0.06), 0 1px 3px rgba(32, 36, 28, 0.08); --shadow-m: 0 2px 4px rgba(32, 36, 28, 0.05), 0 6px 16px rgba(32, 36, 28, 0.08); --shadow-l: 0 24px 48px -12px rgba(32, 36, 28, 0.18); --shadow-overlay: 0 32px 64px -16px rgba(32, 36, 28, 0.28); /* Artefact-schaduwen (creatieve overhaul): dubbel gelaagd — een strakke contactschaduw (het object raakt de tafel) + zachte omgevingsschaduw. -lift is de opgetilde hover-stand van datzelfde object. */ --shadow-artefact: 0 1px 1px rgba(32, 36, 28, 0.10), 0 2px 6px rgba(32, 36, 28, 0.07), 0 14px 28px -10px rgba(32, 36, 28, 0.13); --shadow-artefact-lift: 0 2px 3px rgba(32, 36, 28, 0.08), 0 10px 18px rgba(32, 36, 28, 0.10), 0 30px 52px -14px rgba(32, 36, 28, 0.20); /* ══ MOTION ════════════════════════════════════════════════════════════ Respecteer altijd prefers-reduced-motion (afgehandeld in base.css). */ --duration-fast: 140ms; /* hovers, kleine state-wissels */ --duration-base: 240ms; /* standaard transities */ --duration-slow: 420ms; /* panelen, modals, reveals */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* speelse micro-interacties */ /* ══ Z-INDEX — alleen deze lagen, nooit losse getallen ════════════════ */ --z-dropdown: 100; --z-sticky: 200; --z-header: 300; --z-scrim: 400; --z-modal: 500; --z-toast: 600; /* ══ OVERIG ════════════════════════════════════════════════════════════ */ --opacity-disabled: 0.45; /* ══ BREAKPOINTS — ALLEEN VOOR LAYOUT-VERSCHUIVINGEN ═══════════════════ Typografie en gutters schalen VLOEIEND via de clamp()-tokens hierboven en hebben dus geen breakpoints nodig. Deze drie stappen bestaan alleen voor structurele layout-wissels (sidebar naast/onder, aantal grid- kolommen, nav inklappen) — en zelfs daar geldt: gebruik waar mogelijk intrinsiek vloeiende patronen (grid met auto-fit/minmax, flex-wrap), die op ELKE tussenmaat goed staan, en pas dáárna pas een breakpoint. CSS-taalbeperking: custom properties werken NIET in @media-condities; schrijf daar de letterlijke waarde, exact gelijk aan deze tokens. Mobile-first: basis = mobiel, queries zijn (min-width: ...). mobiel 0–767 (default, geen query) tablet 768–1023 @media (min-width: 768px) desktop 1024–1439 @media (min-width: 1024px) wide 1440+ @media (min-width: 1440px) */ --breakpoint-tablet: 768px; --breakpoint-desktop: 1024px; --breakpoint-wide: 1440px; } /* ============================================================================= SCHADUW & MATERIAAL — DARK-VARIANTEN De enige toegestane [data-theme="dark"]-overrides op semantisch niveau (uitleg bij de schaduwtokens hierboven; de korrel-opacity hoort bij dezelfde uitzondering — zichtbaarheid van textuur is per thema anders). Opbouw per schaduw: laag 1: lichte hairline (0 0 0 1px, crème op lage alpha) — maakt de rand van het verhoogde vlak zichtbaar op donker; laag 2+: diepe, bijna-zwarte schaduw met hogere alpha — de achtergrond (#1A140D) is net licht genoeg om die te laten aftekenen. ============================================================================= */ [data-theme="dark"] { /* Select-chevron: stone-dark (zie de lichte variant bij KLEUR — ICONEN) */ --icon-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A6A794' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); --shadow-s: 0 0 0 1px rgba(239, 238, 227, 0.05), 0 1px 2px rgba(0, 0, 0, 0.40), 0 1px 3px rgba(0, 0, 0, 0.50); --shadow-m: 0 0 0 1px rgba(239, 238, 227, 0.06), 0 2px 4px rgba(0, 0, 0, 0.40), 0 6px 16px rgba(0, 0, 0, 0.50); --shadow-l: 0 0 0 1px rgba(239, 238, 227, 0.07), 0 24px 48px -12px rgba(0, 0, 0, 0.70); --shadow-overlay: 0 0 0 1px rgba(239, 238, 227, 0.08), 0 32px 64px -16px rgba(0, 0, 0, 0.80); --shadow-artefact: 0 0 0 1px rgba(239, 238, 227, 0.06), 0 1px 2px rgba(0, 0, 0, 0.45), 0 14px 28px -10px rgba(0, 0, 0, 0.55); --shadow-artefact-lift: 0 0 0 1px rgba(239, 238, 227, 0.08), 0 4px 8px rgba(0, 0, 0, 0.45), 0 30px 52px -14px rgba(0, 0, 0, 0.65); /* Korrel op donker: iets sterker, anders verdwijnt hij volledig. */ --texture-grain-opacity: 0.07; }