/* ============================================================================ Zaaglab — design-tokens.css Alle merk-tokens als CSS custom properties. Eén bron van waarheid; verwijs in je schermen naar deze variabelen i.p.v. losse kleur-/maatwaarden. ============================================================================ */ /* Webfonts — Poppins (koppen/wordmark), Inter (body/interface), JetBrains Mono (maten/getallen). Worden niet-blokkerend in de van elke pagina geladen (preconnect + media-swap), niet meer via @import: een @import hier ketent een extra render-blocking request. */ :root { /* ── Kleuren — merk ──────────────────────────────────────── */ --teal-700: #0F5057; --teal-600: #16707A; /* PRIMAIR — knoppen, links, actieve elementen */ --teal-500: #1C8A96; --teal-100: #DBEEF0; --teal-50: #EFF7F8; --navy-900: #121E36; --navy-700: #1B2A4A; /* DONKER — koppen, navigatiebalk, donkere vlakken */ --navy-500: #34456B; --navy-300: #8A95AC; --amber-700: #A66A12; --amber-600: #C8841E; /* ACCENT — actieve zaagsnede, belangrijkste actie, highlights */ --amber-500: #E0962A; --amber-100: #F7E7CC; --amber-50: #FBF4E7; /* ── Kleuren — neutraal ──────────────────────────────────── */ --white: #FFFFFF; /* kaart / wit */ --bg: #F4F4F4; /* ACHTERGROND */ --gray-100: #F3F4F6; --line: #E5E7EB; /* LIJNEN / hairlines */ --gray-300: #D1D5DB; --gray-500: #666D7A; /* maatlijnen + maatlabels in de tekening (rustige grijs) */ --gray-600: #565D6B; /* TEKST SECUNDAIR (6:1 op #F4F4F4, ruim AA, leest niet uitgewassen) */ --gray-700: #374151; /* ── Kleuren — functioneel ───────────────────────────────── */ --green-700: #245A41; --green-600: #2E6B4F; /* "past / oké" (groen) */ --green-50: #E9F2ED; --rust-700: #8F4124; --rust-600: #B5532E; /* "let op / tekort" (terracotta) */ --rust-50: #F7EAE3; /* ── Semantische aliassen ────────────────────────────────── */ --color-primary: var(--teal-600); --color-primary-hover: var(--teal-700); --color-accent: var(--amber-600); --color-accent-hover: var(--amber-700); --surface-page: var(--bg); --surface-card: var(--white); --surface-dark: var(--navy-700); --surface-sunken: var(--gray-100); --text-strong: var(--navy-700); /* koppen + primaire tekst */ --text-body: var(--navy-700); --text-muted: var(--gray-600); /* secundaire tekst (donkerder dan tekening-grijs) */ --text-on-dark: var(--white); --text-link: var(--teal-600); --border-default: var(--line); --border-strong: var(--gray-300); --border-focus: var(--teal-600); --status-ok-fg: var(--green-600); --status-ok-bg: var(--green-50); --status-warn-fg: var(--rust-600); --status-warn-bg: var(--rust-50); --cut-line: var(--amber-600); /* actieve zaagsnede */ /* ── Typografie — families ───────────────────────────────── */ --font-display: 'Poppins', system-ui, sans-serif; /* koppen + wordmark (600) */ --font-body: 'Inter', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace; /* maten/getallen */ /* ── Typografie — gewichten ──────────────────────────────── */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ── Typografie — schaal (mobiel-eerst; body min. 16px) ──── */ --text-h1: 28px; /* desktop 32px (zie media query) */ --text-h2: 22px; --text-h3: 18px; --text-body-size: 16px; --text-small: 14px; --text-micro: 12px; --lh-tight: 1.15; --lh-snug: 1.35; --lh-normal: 1.55; /* ── Motion ──────────────────────────────────────────────── */ --ease-out: cubic-bezier(0.23, 1, 0.32, 1); /* sterke ease-out voor UI-feedback */ /* ── Border-radius ───────────────────────────────────────── */ --radius-sm: 8px; --radius-md: 12px; /* knoppen, velden */ --radius-lg: 16px; /* kaarten, panelen */ --radius-xl: 24px; --radius-full: 999px; /* ── Spacing-schaal (4px-basis) ──────────────────────────── */ --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; --space-16: 64px; --space-20: 80px; /* ── Schaduw ─────────────────────────────────────────────── */ --shadow-xs: 0 1px 2px rgba(18, 30, 54, 0.06); --shadow-sm: 0 1px 3px rgba(18, 30, 54, 0.08), 0 1px 2px rgba(18, 30, 54, 0.04); --shadow-md: 0 4px 12px rgba(18, 30, 54, 0.08); --shadow-lg: 0 12px 32px rgba(18, 30, 54, 0.12); /* ── Tikvlakken (mobiel gebruik aan de werkbank) ─────────── */ --tap-min: 44px; --tap-comfortable: 52px; } @media (min-width: 768px) { :root { --text-h1: 32px; --text-h2: 24px; --text-h3: 19px; } } /* ============================================================================ KASTCONFIGURATOR — uitbreiding Nieuwe tokens voor de parametrische editor. Naam · waarde · reden. ============================================================================ */ :root { /* ── Plaat-/houtvlakken in de tekening ────────────────────────────────── De carcass en panelen zijn hout; we hergebruiken de wood-toon uit de weergave zodat configurator en zaagschema dezelfde taal spreken. */ --kast-carcass: #E3D2A8; /* romp/buitenkant — iets dieper dan paneel, leest als 'het frame' */ --kast-paneel: #F3EAD3; /* binnenpaneel/legbord — lichter hout, rust in het midden */ --kast-paneel-rand:#C8A86A; /* dunne houtrand om een paneel, i.p.v. zware navy lijn */ --kast-grain: rgba(120, 82, 28, .16); /* nerf in de tekening — subtiel, als textuur */ --kast-binnen: #FFFFFF; /* binnenruimte/leeg vak — wit, zodat componenten opvallen */ /* ── Component-accenten (consistent met het bestaande systeem) ─────────── Deur = teal-familie (zoals primaire UI), lade = amber-familie (accent). Zo herken je deur vs. lade meteen, en het sluit op de merkkleuren aan. */ --kast-deur-vlak: var(--teal-50); --kast-deur-lijn: var(--color-primary); --kast-lade-vlak: var(--amber-50); --kast-lade-lijn: var(--amber-700); --kast-roede: var(--amber-700); /* kledingroede — accentlijn */ --kast-sokkel: var(--navy-500); /* sokkel/pootlijst — structuur */ /* ── Ladeconfigurator (geport uit handoff/design-tokens.css) ───────────── Gebruikt in het lade-schema en de constructie-instellingen. */ --lade-front-vlak: var(--kast-lade-vlak); /* amber-50 — ladefront */ --lade-front-lijn: var(--kast-lade-lijn); /* amber-700 — frontrand + greep */ --lade-greep: var(--kast-lade-lijn); --lade-box-lijn: var(--navy-700); /* ladebak-omtrek */ --lade-bodem-vlak: var(--kast-paneel); /* bodem — lichter hout */ --lade-divider: var(--handle-rand); /* sleepbare scheiding (teal) */ --speling-vlak: rgba(28, 138, 150, .12); /* geleiderspeling-zone (teal, transparant) */ --speling-lijn: var(--teal-500); --speling-label: var(--teal-700); --speling-zij: 12.5px; /* zijgeleider: 12,5 mm per kant */ --speling-bodem: 3px; /* bodemgeleider */ --speling-onderbouw:5px; /* onderbouw/undermount */ /* ── Constructielijnen ────────────────────────────────────────────────── Plank/schot zijn de dragende delen → navy (structuur). Dikte ~ plaatdikte op schaal, zodat de tekening 'massief' aanvoelt i.p.v. lijntekening. */ --kast-deel-lijn: var(--navy-700); --kast-deel-dik: 5px; /* slagdikte van plank/schot in de SVG (op schaal) */ /* ── Sleep-handles & markers ──────────────────────────────────────────── Handles in primair teal op wit, zodat ze 'pakbaar' lezen op het hout. */ --handle-vlak: var(--white); --handle-rand: var(--color-primary); --handle-rand-dik: 2.5px; --handle-grijp: 44px; /* onzichtbaar tikvlak rond een handle (vinger, mobiel) */ --handle-stip: 9px; /* zichtbare straal van de handle */ /* ── Snap / hulplijnen ────────────────────────────────────────────────── Snap = amber (de 'actieve/bevestigende' kleur), zodat je ziet dat iets vastklikt op gelijke verdeling of het 32mm-raster. */ --snap-lijn: var(--amber-600); --snap-raster: #1C8A96; /* 32mm-rasterpunten — teal-500, subtiel */ --snap-raster-op: 0.45; /* opaciteit rasterpunten (rustig) */ --maatlijn: var(--gray-500); /* maatlijnen in de tekening */ --maat-hulp: var(--amber-600); /* live maat tijdens slepen */ /* ── Nazaag / markering ───────────────────────────────────────────────── Voor 'op maat nazagen' / let-op-randen: terracotta = let op, consistent met de functionele waarschuwingskleur. */ --nazaag: var(--rust-600); --nazaag-vlak: var(--rust-50); /* ── Interactie-states (geselecteerd / sleep / fout) ──────────────────── Geselecteerd deel = amber omlijning (zoals het zaagschema), sleep-preview = teal onderbroken, fout = terracotta. */ --sel-rand: var(--amber-600); --sel-rand-dik: 2.5px; --sleep-rand: var(--color-primary); --sleep-vlak: rgba(22,112,122,.10); --fout-rand: var(--rust-600); --fout-vlak: var(--rust-50); --leegvak-rand: var(--gray-300); /* gestippelde rand van een leeg, vulbaar vak */ /* ── Zolderkast (vijfhoek) ────────────────────────────────────────────── Het schuine deel krijgt dezelfde houtvlakken; alleen de geometrie wijkt af. Planken blijven waterpas — geen wig, geen scheve planken. */ --schuin-lijn: var(--navy-700); /* het schuin aflopende dak van de zolderkast */ /* ── Selectie-toolbartje (deur/onderdeel) ─────────────────────────────── Container + maat-label + knoppen. Eén stijl voor elk zwevend toolbartje. */ --toolbar-bg: var(--white); --toolbar-radius: var(--radius-md); --toolbar-schaduw: var(--shadow-lg); --toolbar-padding: 6px 8px; --toolbar-divider: var(--border-default); /* verticale scheider, 1px × 22px */ --toolbar-pijl: 8px; /* grootte van het pijltje onderaan */ --toolbar-knop: 34px; /* knopgrootte (vierkant) */ --toolbar-knop-radius: var(--radius-sm); --toolbar-knop-rand: var(--border-default); --toolbar-knop-hover: var(--surface-sunken); --toolbar-knop-actief-bg: var(--teal-50); /* bv. actieve scharnierzijde */ --toolbar-knop-actief-rand:var(--teal-500); --toolbar-knop-actief-fg: var(--teal-700); --toolbar-del-hover-bg: var(--status-warn-bg); --toolbar-del-hover-fg: var(--status-warn-fg); --toolbar-label-font: 600 12px var(--font-body); --toolbar-label-kleur: var(--text-strong); --toolbar-maat-font: 500 12px var(--font-mono); --toolbar-maat-kleur: var(--text-muted); /* ── Plaatmateriaal-catalogus ────────────────────────────────── Winkel-neutraal: elke winkel een gelijke, neutrale grijze badge (geen merkkleuren). Alleen de plaat-thumbnail volgt de materiaalkleur. */ --winkel-badge-bg: var(--surface-sunken); --winkel-badge-fg: var(--text-strong); --winkel-badge-rand: var(--border-default); --prijs-kleur: var(--text-strong); --facet-actief-bg: var(--teal-50); --facet-aantal: var(--text-muted); --chip-bg: var(--teal-50); --chip-fg: var(--teal-700); --chip-rand: var(--teal-100); --verouderd-fg: var(--amber-700); --mat-mdf: #D8C9A8; --mat-multiplex: #E3CF9E; --mat-spaanplaat: #D8CBB4; --mat-melamine: #EAEDF0; --mat-osb: #D7BE86; --mat-underlayment: #E0D2B0; --mat-hardboard: #C9A982; --mat-betonplex: #9FA6A6; --mat-meubelpaneel: #E6D3AC; --mat-timmerplaat: #DEC798; /* ── Lineair zagen (1D) — de balken-strip (geport uit handoff/design-tokens.css) ── Derde modus: stukken op lengte uit voorraadstaven. Eén voorraadstaaf = één horizontale balk; stukken staan achter elkaar met dunne kerf-spleten, het reststuk apart aan het eind. Zelfde houttaal als het 2D-zaagschema, zonder nerf (n.v.t. op 1D). Bruikbaar reststuk krijgt een teal-was (gaat naar de restvoorraad), afval blijft grijs. Verwijst naar bestaande tokens waar er een 2D-tegenhanger is, zodat 1D en 2D in lockstep blijven. */ --staaf-omtrek: #C9CED6; /* dunne omtrek/baseline van de voorraadstaaf */ --staaf-stuk: #EAD9B0; /* gezaagd stuk — hout-familie, tussen --kast-carcass en --kast-paneel */ --staaf-stuk-rand: var(--kast-paneel-rand); /* houtrand om een stuk (zelfde als 2D-paneelrand) */ --staaf-stuk-label: var(--text-strong); /* naam/maat in het stuk */ --staaf-kerf: rgba(27,42,74,.55); /* de zaagsnede tussen twee stukken — dunne donkere spleet */ --staaf-kerf-br: 2px; /* visuele kerf-breedte in de strip (schaalt niet mee, leesbaar) */ --staaf-rest-vlak: #F6F7F9; /* reststuk/afval — licht, met arcering (zie --staaf-rest-lijn) */ --staaf-rest-lijn: #D2D6DD; /* arceringslijn van het reststuk */ --staaf-rest-bruik: rgba(22,112,122,.16);/* bruikbaar reststuk → teal-was (gaat naar restvoorraad) */ --staaf-rest-bruik-rand: var(--color-primary); /* teal randje links bij een bruikbaar reststuk */ --staaf-rest-label: var(--text-muted); /* "rest 240" label */ --staaf-actief: var(--cut-line); /* actieve/aangewezen snede in de zaagvolgorde — bestaande amber zaaglijn */ /* ── 3D-aanzicht kast (axonometrie, SVG) ─────────────────────────── */ --kast3d-vlak-meng: var(--navy-900); /* kleur waarmee zij/boven-vlak donkerder gemengd worden */ --kast3d-zij-meng: 12%; /* navy-aandeel in het zijvlak (iets donkerder dan front) */ --kast3d-boven-meng: 22%; /* navy-aandeel in het bovenvlak (het donkerst) */ --kast3d-hulplijn: var(--maatlijn); /* stippel-hulplijn naar de samengebouwde positie */ --kast3d-ambient: rgba(18,30,54,.07); /* zachte grondschaduw onder de kast */ --kast3d-label-bg: rgba(255,255,255,.86);/* chip achter een paneel-label (leesbaarheid) */ }