/* ============================================================================ HeatPump Advisor — Design Tokens (single source of truth) Geladen vóór style.css en marketing-pages.css in elke HTML-pagina. Wijzig tokens hier — niet in component-CSS. Font-loading: Plus Jakarta Sans wordt geladen via `` in de HTML-head van elke pagina (zie index.html regel 26-28 etc.). Dat is sneller dan de vorige `@import` in deze file (~200-400ms LCP-winst door niet-blocking parallel fetch + preconnect). ============================================================================ */ :root { /* ── Colorscheme hint voor user-agent styling (scrollbars, date-pickers, form-controls). Volgt data-theme attribuut via selector-override hieronder. Default: dark (zie Fase 3A light/dark foundation). */ color-scheme: dark; /* ── Typography ─────────────────────────────────────────────────────── */ --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif; --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* ── Brand accent — unified orange ─────────────────────────────────── */ /* Eén canonical oranje voor de hele site. Was: #ffa640 (style.css) + #ffb03f (marketing) + 4 varianten — nu samengevoegd tot rgb(255,166,64). */ --accent-orange: rgb(255, 166, 64); --accent-orange-deep: #ff8c00; /* gradient-2e-kleur, hover-depth */ /* ── Secondary accents ─────────────────────────────────────────────── */ --accent-cyan: rgb(102, 242, 255); --accent-blue: rgb(128, 204, 255); --accent-purple: rgb(217, 153, 255); /* ── Backgrounds ───────────────────────────────────────────────────── */ --bg-dark: #0B1120; --bg-primary: #0B1120; --bg-gradient: #162040; /* ── Glass surfaces ────────────────────────────────────────────────── */ --glass-bg: rgba(255, 255, 255, 0.07); --glass-border: rgba(255, 255, 255, 0.06); --glass-border-hover: rgba(255, 255, 255, 0.16); /* ── Text ──────────────────────────────────────────────────────────── */ --text-primary: #ffffff; --text-secondary: rgba(255, 255, 255, 0.7); --text-muted: rgba(255, 255, 255, 0.65); /* ── Surface elevation hierarchy ───────────────────────────────────── */ --surface-1: rgba(255, 255, 255, 0.04); --surface-2: rgba(255, 255, 255, 0.07); --surface-3: rgba(255, 255, 255, 0.11); /* ── Glows (voor accent-highlights) ────────────────────────────────── */ --glow-orange: rgba(255, 166, 64, 0.12); --glow-cyan: rgba(102, 242, 255, 0.10); /* ── Spacing (8pt-based) ───────────────────────────────────────────── */ --spacing-xs: 0.5rem; --spacing-sm: 1rem; --spacing-md: 1.5rem; --spacing-lg: 2rem; --spacing-xl: 3rem; --spacing-2xl: 4rem; /* ── Radii ─────────────────────────────────────────────────────────── */ --radius-xs: 10px; /* klein element (chip, pill, icon-button) */ --radius-sm: 8px; --radius-md: 16px; --radius-lg: 22px; --radius-xl: 32px; /* ── Motion ────────────────────────────────────────────────────────── */ --transition-fast: 0.2s ease; --transition-base: 0.3s ease; --transition-slow: 0.6s ease; /* ── Shadows ───────────────────────────────────────────────────────── */ --shadow-sm: 0 4px 12px rgba(0,0,0,0.15); --shadow-md: 0 8px 24px rgba(0,0,0,0.25); --shadow-lg: 0 16px 40px rgba(0,0,0,0.35); /* ── States ────────────────────────────────────────────────────────── */ --error-color: #FF5252; --success-color: #50c878; --warning-color: var(--accent-orange); /* ── Status accents (toegevoegd uit offerte-acceptatie drift) ─────── */ --accent-green: #34c759; /* iOS system green — successful action */ --accent-red: #ff453a; /* iOS system red — destructive / error */ /* ── Pipeline status colors — per-theme override in light mode ──── */ --status-blue: #8bc4ff; /* pipeline-accepted badge */ --status-yellow: #facc15; /* pipeline-execution badge */ --status-red-soft: #fca5a5; /* pipeline-archived badge */ /* ========================================================== Fase 1B — nieuwe schalen (gebruik in Fase 2+ refactors) ========================================================== */ /* ── Font-size scale (13 steps, 0.68rem → 3rem) ───────────────────── Vervangt >25 hardcoded rem-waardes die vandaag in CSS-files staan. Refactor van hardcoded → tokens gebeurt in Fase 2 inline-extract. */ --fs-2xs: 0.68rem; /* ~11px — small labels, legal footnotes */ --fs-xs: 0.75rem; /* ~12px — captions, meta */ --fs-sm: 0.85rem; /* ~14px — body-small, form-hints */ --fs-base: 1rem; /* 16px — body-default */ --fs-md: 1.12rem; /* ~18px — lead paragraph */ --fs-lg: 1.28rem; /* ~21px — section-heading */ --fs-xl: 1.5rem; /* 24px — subsection-heading */ --fs-2xl: 1.88rem; /* 30px — page-heading */ --fs-3xl: 2.4rem; /* 38px — hero-heading (sm) */ --fs-4xl: 3rem; /* 48px — hero-heading (lg) */ /* ── Line-height scale ─────────────────────────────────────────────── */ --lh-tight: 1.2; /* display-headings */ --lh-snug: 1.4; /* headings */ --lh-base: 1.55; /* body */ --lh-relaxed: 1.7; /* legal/marketing tekst */ /* ── Border-width tokens ───────────────────────────────────────────── */ --bw-hairline: 1px; /* default border */ --bw-default: 1.5px; /* emphasis border */ --bw-strong: 2px; /* active / focus border */ /* ── Z-index scale ────────────────────────────────────────────────── Vervangt willekeurige 10/100/300/850/900/950/999/1000/9999/10000. */ --z-base: 1; --z-dropdown: 100; --z-sticky: 500; --z-modal-overlay: 900; --z-modal: 1000; --z-toast: 1100; --z-tooltip: 1200; /* ========================================================== Fase 1C — semantic status-triples + elevation bundles ========================================================== */ /* ── Semantic status-kleuren (bg / fg / border triples) ───────────── Vervangen herhaalde rgba(color, alpha) + #hex + rgba(color, border) triples die over de app heen zijn gedupliceerd (4+ keer per status). Consumers: badges, banners, alerts, toast-variants, form-validation. */ /* Status-tokens gebruiken color-mix op transparent zodat ze automatisch werken op zowel dark als light backgrounds (Fase 3 light/dark foundation). */ --color-success-bg: color-mix(in srgb, var(--success-color) 12%, transparent); --color-success-fg: var(--success-color); /* #50c878 */ --color-success-border: color-mix(in srgb, var(--success-color) 30%, transparent); --color-warning-bg: color-mix(in srgb, var(--accent-orange) 12%, transparent); --color-warning-fg: var(--accent-orange); --color-warning-border: color-mix(in srgb, var(--accent-orange) 30%, transparent); --color-danger-bg: color-mix(in srgb, var(--error-color) 10%, transparent); --color-danger-fg: var(--error-color); /* #FF5252 */ --color-danger-border: color-mix(in srgb, var(--error-color) 30%, transparent); --color-info-bg: color-mix(in srgb, var(--accent-cyan) 8%, transparent); --color-info-fg: var(--accent-cyan); --color-info-border: color-mix(in srgb, var(--accent-cyan) 30%, transparent); /* ── Elevation (surface + border + shadow bundles) ───────────────── Gebruik als trio op één component: background: var(--elev-2-bg); border: 1px solid var(--elev-2-border); box-shadow: var(--elev-2-shadow); Consumers: cards, modals, panels, dropdowns. */ /* elev-0: flat op page-bg, geen depth */ --elev-0-bg: transparent; --elev-0-border: transparent; --elev-0-shadow: none; /* elev-1: subtle raise — kleine cards, input-surfaces */ --elev-1-bg: var(--surface-1); --elev-1-border: var(--glass-border); --elev-1-shadow: var(--shadow-sm); /* elev-2: content card, module-panel — default voor .glass-card */ --elev-2-bg: var(--surface-2); --elev-2-border: var(--glass-border); --elev-2-shadow: var(--shadow-md); /* elev-3: floating — modals, dropdowns, sticky cards */ --elev-3-bg: var(--surface-3); --elev-3-border: var(--glass-border-hover); --elev-3-shadow: var(--shadow-lg); } /* ========================================================================== Fase 3A — Light-mode token overrides ========================================================================== Geactiveerd wanneer `` wordt gezet (door JS in Fase 3B, of op voorkeur van de user via system-sync). Wat wisselt: - Backgrounds: donker → off-white - Text: wit → near-black met dezelfde contrast-ladder - Glass surfaces: wit-transparant → zwart-transparant - Shadows: intens zwart → subtieler voor papier-achtig effect - Marketing sub-palette: blijft DARK (marketing-pages.html houden altijd dark-scheme omdat die de hero-impressie bepalen) Wat NIET wisselt: - Alle brand/accent kleuren (--accent-orange/cyan/blue/purple) - Status-colors (--success-color, --error-color) - Semantic color-triples (werken al responsive via color-mix) - Typography, spacing, radii, motion, z-index, border-widths ==========================================================================*/ :root[data-theme="light"] { color-scheme: light; /* ── Backgrounds ───────────────────────────────────────────────────── */ --bg-dark: #f5f6f8; /* ondanks de naam: body-bg */ --bg-primary: #f5f6f8; /* off-white, niet schel wit */ --bg-gradient: #e8ecf3; /* ── Glass surfaces — inversion: donker-transparant op lichte bg ──── */ --glass-bg: rgba(11, 17, 32, 0.05); /* was white@0.07 */ --glass-border: rgba(11, 17, 32, 0.09); /* was white@0.06 */ --glass-border-hover: rgba(11, 17, 32, 0.16); /* was white@0.16 */ /* ── Text — ladder-gekeerd: primary donker, secondary lichter ─────── */ --text-primary: #0B1120; /* was #ffffff */ --text-secondary: rgba(11, 17, 32, 0.72); /* was white@0.7 */ --text-muted: rgba(11, 17, 32, 0.75); /* WCAG AA: 0.58 (~4.0:1) -> 0.75 (~7.0:1) */ /* ── Pipeline status colors — donkere overrides voor witte achtergrond */ --status-blue: #1e40af; /* WCAG AA: was #8bc4ff (~2.2:1), nu ~9:1 op #f5f6f8 */ --status-yellow: #b45309; /* WCAG AA: was #facc15 (~1.7:1), nu ~7:1 op #f5f6f8 */ --status-red-soft: #b91c1c; /* WCAG AA: was #fca5a5 (~2.6:1), nu ~6:1 op #f5f6f8 */ /* ── Surface elevation — donkere ink op witte kaart ──────────────── */ --surface-1: rgba(11, 17, 32, 0.03); /* was white@0.04 */ --surface-2: rgba(11, 17, 32, 0.05); /* was white@0.07 */ --surface-3: rgba(11, 17, 32, 0.08); /* was white@0.11 */ /* ── Glows — iets hogere alpha want lichte bg dempt accent-halo ──── */ --glow-orange: color-mix(in srgb, var(--accent-orange) 18%, transparent); --glow-cyan: color-mix(in srgb, var(--accent-cyan) 14%, transparent); /* ── Shadows — veel subtieler; paper-achtig i.p.v. dramatic depth ── */ --shadow-sm: 0 1px 3px rgba(11, 17, 32, 0.06), 0 1px 2px rgba(11, 17, 32, 0.04); --shadow-md: 0 4px 12px rgba(11, 17, 32, 0.08), 0 2px 4px rgba(11, 17, 32, 0.04); --shadow-lg: 0 12px 32px rgba(11, 17, 32, 0.12), 0 4px 12px rgba(11, 17, 32, 0.06); /* ── Elev bundles — herbind voor lichter schaduw-set ─────────────── */ --elev-1-shadow: var(--shadow-sm); --elev-2-shadow: var(--shadow-md); --elev-3-shadow: var(--shadow-lg); } /* ========================================================================== Fase 4B — Marketing-page dark-lock ========================================================================== Marketing- en SEO-pages blijven ALTIJD dark, ook wanneer de user in de app op light-mode staat. Reden: deze pages vormen de eerste indruk en hun hero-aesthetic (gradient-donker + oranje accent) is bewust. Dat willen we niet door een user-voorkeur laten omkiepen. Mechanisme: wanneer `` staat maar de user op een marketing/seo/landing page is, overschrijven we de light-tokens TERUG naar de dark defaults (alleen binnen die body scope). Gevolg: op marketing pages zijn alle `var(--bg-primary)`, `var(--text-*)`, `var(--surface-*)` en `var(--glass-*)` waarden identiek aan dark-mode, ongeacht de attribute. Geen JS nodig. --------------------------------------------------------------------- */ :root[data-theme="light"] body.marketing-page, :root[data-theme="light"] body.seo-page, :root[data-theme="light"] body.landing-page { color-scheme: dark; --bg-dark: #0B1120; --bg-primary: #0B1120; --bg-gradient: #162040; --glass-bg: rgba(255, 255, 255, 0.07); --glass-border: rgba(255, 255, 255, 0.06); --glass-border-hover: rgba(255, 255, 255, 0.16); --text-primary: #ffffff; --text-secondary: rgba(255, 255, 255, 0.7); --text-muted: rgba(255, 255, 255, 0.65); --surface-1: rgba(255, 255, 255, 0.04); --surface-2: rgba(255, 255, 255, 0.07); --surface-3: rgba(255, 255, 255, 0.11); --glow-orange: rgba(255, 166, 64, 0.12); --glow-cyan: rgba(102, 242, 255, 0.10); --shadow-sm: 0 4px 12px rgba(0,0,0,0.15); --shadow-md: 0 8px 24px rgba(0,0,0,0.25); --shadow-lg: 0 16px 40px rgba(0,0,0,0.35); --elev-1-shadow: var(--shadow-sm); --elev-2-shadow: var(--shadow-md); --elev-3-shadow: var(--shadow-lg); } /* ── Marketing-page scoped overrides ─────────────────────────────────── `.marketing-page` heeft een eigen sub-palet voor hero-styling en diepere backgrounds. `--marketing-orange` is nu een alias van `--accent-orange` (geen hex-drift meer). --------------------------------------------------------------------- */ .marketing-page { --marketing-bg: #05060b; --marketing-surface: rgba(12, 17, 30, 0.78); --marketing-surface-strong: rgba(17, 23, 39, 0.92); --marketing-border: rgba(255, 255, 255, 0.1); --marketing-border-strong: color-mix(in srgb, var(--accent-orange) 28%, transparent); --marketing-text: #f7f8fb; --marketing-muted: rgba(239, 243, 255, 0.72); --marketing-soft: rgba(239, 243, 255, 0.52); --marketing-cyan: #83efff; --marketing-orange: var(--accent-orange); /* geünificeerd met app */ --marketing-blue: #8bc4ff; --marketing-green: #90f0ba; --marketing-shadow: 0 30px 80px rgba(0, 0, 0, 0.36); }