/* v1.2, 2026-07-07: canon aligned to live-page values voor pixel-pariteit tijdens C2-migratie (ink/rule/pales/industry-mid+light). Changelog in DECISIONS.md */ /* ───────────────────────────────────────────────────────────── IVG — Design Tokens (v1) Single source of truth. Extracted + normalized from the existing 6 live pages. Every page imports this first. ───────────────────────────────────────────────────────────── */ :root { /* ── BRAND COLOR (institute / green, neutral default) ── */ --ivg-ink: #1a1a1a; /* v1.2: aligned to live pages (was #141410) */ --ivg-ink-soft: #444; /* v1.2: aligned to live pages (was #3A3A33) */ --ivg-ink-muted: #777; /* v1.2: aligned to live pages (was #6E6E64) */ --ivg-ink-faint: #A8A89E; --ivg-paper: #F7F4EE; /* primary cream */ --ivg-paper-warm: #EFEAE0; /* warmer section bg */ --ivg-paper-cool: #F4F6F8; /* boardroom surface */ /* Dark stage (v1.1) — deck / kitchen-mode; ink-on-dark = paper */ --ivg-surface-dark: #1a1815; --ivg-ink-on-dark: var(--ivg-paper); --ivg-rule: rgba(0,0,0,0.08); /* v1.2: aligned to live pages (was rgba(20,20,16,0.10)) */ --ivg-rule-soft: rgba(0,0,0,0.06); /* v1.2: harmonized with --ivg-rule */ --ivg-rule-strong: rgba(0,0,0,0.22); /* v1.2: harmonized with --ivg-rule */ /* Institute green */ --ivg-green-deep: #2F3D1B; --ivg-green: #3A4A22; --ivg-green-mid: #5F6B3A; --ivg-green-light: #7A8A4A; --ivg-green-pale: #E8EDD8; /* Audience accents — locked, match existing page roles */ --ivg-kitchen: #6B4A22; /* warm brown — practice & craft */ --ivg-kitchen-mid: #8B6A3A; --ivg-kitchen-light: #A07840; --ivg-kitchen-pale: #F5EDE0; /* v1.2: aligned to live (was #F2EBE0) */ --ivg-classroom: #3A4A22; /* green — education & curriculum */ --ivg-classroom-mid: #5F6B3A; --ivg-classroom-light: #7A8A4A; --ivg-classroom-pale: #EEF3E4; /* v1.2: aligned to live (was #E8EDD8) */ --ivg-industry: #5C3020; /* rust — R&D & innovation */ --ivg-industry-mid: #7A4830; /* v1.2: aligned to live (was #7A4530) */ --ivg-industry-light: #A06848; /* v1.2: aligned to live (was #9A5840) */ --ivg-industry-pale: #F5EAE0; /* v1.2: aligned to live (was #F2E3DB) */ --ivg-boardroom: #2A3A4A; /* navy — mission & outcomes */ --ivg-boardroom-mid: #3A5060; --ivg-boardroom-light: #5A7888; --ivg-boardroom-pale: #E8EFF4; /* Radar / diagram palette (paradigm colors — locked per DECISIONS.md) */ --ivg-paradigm-terracotta: #D96E4B; --ivg-paradigm-sage: #8CA868; --ivg-paradigm-cream-gold: #F1E4B8; --ivg-paradigm-olive: #5C7240; /* Data-viz score semantics (v1.1) — promoted from vg-data-bank tiles. Good hergebruikt paradigm-olive; geen hex-duplicatie. */ --ivg-score-good: var(--ivg-paradigm-olive); --ivg-score-good-bg: #EBF3E2; --ivg-score-caution: #B98A2E; --ivg-score-caution-bg: #FBF1D6; --ivg-score-poor: #C0542F; --ivg-score-poor-bg: #FBEAE2; /* ── TYPOGRAPHY ── */ --ivg-serif: 'Cormorant Garamond', 'Adobe Caslon Pro', Georgia, serif; --ivg-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif; --ivg-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; /* Type scale (desktop; mobile uses clamp) */ --ivg-t-overline: 10px; /* uppercase eyebrow */ --ivg-t-caption: 12px; --ivg-t-small: 13px; --ivg-t-body: 15px; --ivg-t-lead: 18px; --ivg-t-h5: 20px; --ivg-t-h4: 26px; --ivg-t-h3: 36px; --ivg-t-h2: 52px; --ivg-t-h1: 84px; --ivg-t-display: 96px; /* hero ceiling; matches existing clamp scale */ --ivg-lh-tight: 1.06; --ivg-lh-snug: 1.2; --ivg-lh-normal: 1.55; --ivg-lh-loose: 1.75; --ivg-ls-display: -0.018em; --ivg-ls-hair: 0.18em; /* overlines */ /* ── SPACING (8-pt progression, named by use) ── */ --ivg-s-0: 0; --ivg-s-1: 4px; --ivg-s-2: 8px; --ivg-s-3: 12px; --ivg-s-4: 16px; --ivg-s-5: 24px; --ivg-s-6: 32px; --ivg-s-7: 48px; --ivg-s-8: 64px; --ivg-s-9: 96px; --ivg-s-10: 128px; --ivg-s-11: 192px; /* Section rhythm */ --ivg-section-pad-sm: 64px; --ivg-section-pad-md: 96px; --ivg-section-pad-lg: 144px; --ivg-section-pad-xl: 192px; /* Container widths */ --ivg-w-text: 640px; /* reading column */ --ivg-w-prose: 760px; /* wider editorial */ --ivg-w-page: 1040px; /* default page max */ --ivg-w-wide: 1280px; /* spread */ --ivg-w-full: 100%; /* Nav height (v1.1) — sticky-nav offset shared across pages */ --ivg-nav-h: 64px; /* ── MOTION ── */ --ivg-dur-fast: 140ms; --ivg-dur-base: 280ms; --ivg-dur-slow: 560ms; --ivg-dur-stage: 600ms; /* hero/section intro; kept under perceptual ceiling */ --ivg-ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ivg-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ivg-ease-spring: cubic-bezier(0.16, 1, 0.3, 1); --ivg-ease-settle: cubic-bezier(0.25, 0.46, 0.45, 0.94); /* ── ELEVATION (used sparingly, institute register) ── */ --ivg-shadow-sm: 0 1px 2px rgba(20,20,16,0.04); --ivg-shadow-md: 0 4px 16px rgba(20,20,16,0.06); --ivg-shadow-lg: 0 12px 40px rgba(20,20,16,0.10); /* ── RADII ── */ --ivg-r-0: 0; --ivg-r-1: 2px; --ivg-r-2: 4px; --ivg-r-3: 999px; /* ── DRIFT CLEANUP (2026-09-03) ── Exacte overname van hardcoded hex uit base.css, zodat check-drift.sh schoon is zonder de gerenderde kleuren te wijzigen. Zie mierenwerk-skelet/check-drift.sh. */ --ivg-portrait-bg: #F1ECE2; /* ambassador/founder-portrait placeholder-achtergrond */ --ivg-footer-link-accent: #C8DC96; /* .ivg-footer-cta link op de donkere footer */ --ivg-footer-link-accent-hover: #E8F0B8; /* .ivg-footer-cta link hover */ --ivg-surface-white: #fff; /* .ivg-newsletter-inline-form achtergrond */ --ivg-legacy-accent-mid-fallback: #506232; /* fallback voor pagina-lokale --accent-mid, newsletter-knop hover */ --ivg-ink-hint: #bbb; /* .ivg-row-hint, .ivg-row-cue-close, .ivg-row-icon default */ --ivg-ink-preview: #999; /* .ivg-row-preview tekst */ } /* ── AUDIENCE SCOPING ── Setting a body class remaps --ivg-accent (and friends) to that audience's hue. New components should consume --ivg-* directly; any component that does will pick up the right accent automatically when the body class is set. We deliberately do NOT publish legacy aliases (--accent, --cream, --ink, etc.) from this scope. Those are still owned by each page's own :root block during the incremental migration, so existing inline styles stay byte-identical. As pages refactor onto --ivg-* tokens, their local :root blocks can shrink and eventually be removed. */ :root, body.audience-institute { --ivg-accent: var(--ivg-green); --ivg-accent-mid: var(--ivg-green-mid); --ivg-accent-light: var(--ivg-green-light); --ivg-accent-pale: var(--ivg-green-pale); --ivg-surface: var(--ivg-paper); } body.audience-kitchen { --ivg-accent: var(--ivg-kitchen); --ivg-accent-mid: var(--ivg-kitchen-mid); --ivg-accent-light: var(--ivg-kitchen-light); --ivg-accent-pale: var(--ivg-kitchen-pale); --ivg-surface: #FAF7F2; } body.audience-classroom { --ivg-accent: var(--ivg-classroom); --ivg-accent-mid: var(--ivg-classroom-mid); --ivg-accent-light: var(--ivg-classroom-light); --ivg-accent-pale: var(--ivg-classroom-pale); --ivg-surface: var(--ivg-paper); } body.audience-industry { --ivg-accent: var(--ivg-industry); --ivg-accent-mid: var(--ivg-industry-mid); --ivg-accent-light: var(--ivg-industry-light); --ivg-accent-pale: var(--ivg-industry-pale); --ivg-surface: #FAF6F2; } body.audience-boardroom { --ivg-accent: var(--ivg-boardroom); --ivg-accent-mid: var(--ivg-boardroom-mid); --ivg-accent-light: var(--ivg-boardroom-light); --ivg-accent-pale: var(--ivg-boardroom-pale); --ivg-surface: var(--ivg-paper-cool); }