/* ============================================================= Doleta v3 — tokens.css Bron-van-waarheid voor design-tokens. Geen styling-regels hier, alleen custom properties. Override-scopes: [data-theme="kern-dark"] → intern cockpit [data-client-accent="custom"] → klant-specifieke accent (config-only) ============================================================= */ :root { /* ---------- COLOR · brand (goud-palet) ---------- */ --color-gold: #C4A265; /* CTA, accent, prijs, heading-emphasis */ --color-gold-hover: #B8935F; --color-gold-deep: #9A7A4B; /* focus, prijs-emphasis */ --color-gold-light: #E0D5C0; /* borders, dividers */ --color-gold-bg: #F7F2E9; /* alt-hero, callout, hover-fill */ --color-gold-glow: rgba(196, 162, 101, 0.32); /* ---------- COLOR · kern_dark (intern cockpit, override hieronder) ---------- */ --kern-bg: #0E0E0F; --kern-surface: #141416; --kern-surface-2: #1C1C1F; --kern-line: #2A2A2D; --kern-line-strong: #3A3A3E; --kern-accent: #E8E6E1; /* off-white, NIET goud */ --kern-ink: #E8E6E1; --kern-ink-soft: #B5B3AD; --kern-ink-mute: #7A7872; /* ---------- COLOR · ink ---------- */ --ink: #111111; /* body */ --ink-soft: #4A4A4A; --ink-mute: #7A7A7A; /* labels, [ONTBREEKT — terug naar intake] */ --ink-invert: #FFFFFF; /* ---------- COLOR · neutraal ---------- */ --bg: #FAFAF7; --card: #FFFFFF; --soft: #F3F2ED; --line: #E5E3DC; --line-strong: #CFCCC1; /* ---------- COLOR · semantic ---------- */ --success: #2F7A3A; --success-soft: #DFF0E0; --warning: #A86A00; --warning-soft: #FBEAC4; --danger: #A8201A; --danger-soft: #F6D8D6; --info: #1E5A8A; --info-soft: #DCEAF5; /* "Aanbeveling Doleta" banner */ /* ---------- COLOR · accent (default = goud) ---------- */ /* Optioneel per klant overschreven via [data-client-accent="custom"] + DB-waarde. */ --accent: var(--color-gold); --accent-hover: var(--color-gold-hover); --accent-deep: var(--color-gold-deep); --accent-light: var(--color-gold-light); --accent-bg: var(--color-gold-bg); --accent-glow: var(--color-gold-glow); --accent-ink-on: #FFFFFF; /* tekstkleur op accent-vlak */ /* ---------- TYPOGRAFIE ---------- */ --font-sans: "Geist", "Geist Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --font-mono: "Geist Mono", "Geist Mono Variable", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; /* fluid type-scale — body 14, scale ratio ~1.2 minor third + display clamps */ --fs-12: 0.75rem; /* 12px — micro / footnote */ --fs-12-5: 0.781rem; /* 12.5px — caption, jsub, JOB-chip */ --fs-13: 0.8125rem; /* 13px */ --fs-14: 0.875rem; /* 14px — body default */ --fs-15: 0.9375rem; --fs-16: 1rem; /* 16px — jcard name, dd */ --fs-18: 1.125rem; --fs-20: 1.25rem; --fs-24: 1.5rem; --fs-28: 1.75rem; --fs-32: 2rem; --fs-40: 2.5rem; --fs-h6: clamp(0.9375rem, 0.92rem + 0.1vw, 1rem); --fs-h5: clamp(1rem, 0.97rem + 0.2vw, 1.125rem); --fs-h4: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem); --fs-h3: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem); --fs-h2: clamp(1.75rem, 1.4rem + 1.7vw, 2.75rem); --fs-h1: clamp(2.25rem, 1.6rem + 3.2vw, 4.5rem); --fs-hero: clamp(2.5rem, 1.5rem + 5vw, 5.5rem); /* tot 88px */ --fs-eyebrow: 0.6875rem; /* 11px uppercase */ --lh-tight: 1.1; --lh-snug: 1.25; --lh-normal: 1.45; --lh-body: 1.55; /* body default */ --lh-loose: 1.7; --ls-tightest: -0.03em; --ls-tighter: -0.02em; /* H1/H2/logo */ --ls-tight: -0.01em; --ls-normal: 0; --ls-wide: 0.04em; --ls-wider: 0.06em; /* table , eyebrow */ --ls-widest: 0.12em; --ff-body: "ss01", "cv11"; /* Geist stylistic sets */ /* ---------- SPACING ---------- */ --space-0: 0; --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.25rem; /* 20 */ --space-6: 1.5rem; /* 24 */ --space-7: 2rem; /* 32 */ --space-8: 2.5rem; /* 40 */ --space-9: 3rem; /* 48 */ --space-10: 4rem; /* 64 */ --space-11: 5rem; /* 80 */ --space-12: 6rem; /* 96 */ --space-14: 8rem; /* 128 */ --gutter: var(--space-6); /* ---------- RADIUS ---------- */ --radius-xs: 2px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-xl: 14px; --radius-2xl: 20px; --radius-pill: 999px; /* ---------- SHADOW ---------- */ --shadow-xs: 0 1px 1px rgba(17, 17, 17, 0.04); --shadow-sm: 0 1px 2px rgba(17, 17, 17, 0.05), 0 1px 3px rgba(17, 17, 17, 0.04); --shadow-md: 0 4px 8px rgba(17, 17, 17, 0.06), 0 2px 4px rgba(17, 17, 17, 0.04); --shadow-lg: 0 10px 24px rgba(17, 17, 17, 0.08), 0 4px 10px rgba(17, 17, 17, 0.05); --shadow-xl: 0 24px 48px rgba(17, 17, 17, 0.12), 0 8px 16px rgba(17, 17, 17, 0.06); --shadow-card: 0 1px 2px rgba(17, 17, 17, 0.04), 0 4px 12px rgba(17, 17, 17, 0.04); --shadow-pop: 0 16px 40px rgba(17, 17, 17, 0.16); --shadow-gold-glow: 0 0 0 3px var(--accent-glow); --shadow-focus-danger: 0 0 0 3px rgba(168, 32, 26, 0.22); --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6); /* ---------- BREAKPOINTS (informatief — voor media-queries) ---------- */ --bp-sm: 480px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; --bp-2xl: 1536px; /* ---------- CONTAINER ---------- */ --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1200px; --container-2xl: 1320px; --container-pad: clamp(1rem, 4vw, 2.5rem); /* ---------- MOTION ---------- */ --motion-instant: 80ms; --motion-fast: 140ms; --motion-base: 220ms; --motion-slow: 320ms; --motion-deliberate: 480ms; --ease-standard: cubic-bezier(0.2, 0.0, 0.2, 1); --ease-emphasized: cubic-bezier(0.2, 0.0, 0.0, 1); --ease-out: cubic-bezier(0.0, 0.0, 0.2, 1); --ease-in: cubic-bezier(0.4, 0.0, 1, 1); /* ---------- LAYERING ---------- */ --z-base: 1; --z-sticky: 100; --z-nav: 200; --z-overlay: 500; --z-modal: 600; --z-toast: 700; --z-tooltip: 800; /* ---------- HIT TARGETS ---------- */ --hit-min: 44px; --hit: 48px; /* ---------- TOPBAR HEIGHT ---------- */ --topbar-h: 72px; --topbar-h-mobile: 64px; } /* ============================================================ THEME OVERRIDE — intern cockpit (KERN-dark, sober, off-white) ============================================================ */ [data-theme="kern-dark"] { --bg: var(--kern-bg); --card: var(--kern-surface); --soft: var(--kern-surface-2); --line: var(--kern-line); --line-strong: var(--kern-line-strong); --ink: var(--kern-ink); --ink-soft: var(--kern-ink-soft); --ink-mute: var(--kern-ink-mute); --ink-invert: #0E0E0F; /* KERN-intern is sober: accent = off-white, GEEN goud */ --accent: var(--kern-accent); --accent-hover: #FFFFFF; --accent-deep: #CDCBC6; --accent-light: #2A2A2D; --accent-bg: #1C1C1F; --accent-glow: rgba(232, 230, 225, 0.18); --accent-ink-on: #0E0E0F; --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03), 0 4px 14px rgba(0, 0, 0, 0.45); --shadow-pop: 0 18px 48px rgba(0, 0, 0, 0.6); --shadow-gold-glow: 0 0 0 3px var(--accent-glow); /* semantic 'soft' fills donker-getrokken zodat ze leesbaar blijven */ --success-soft: #16301B; --warning-soft: #382A0D; --danger-soft: #3A1816; --info-soft: #102433; } /* ============================================================ CLIENT-ACCENT OVERRIDE (config-only, geen visuele showcase) ------------------------------------------------------------ Optioneel per klant via kern.db clients.brand_accent. Backend zet en injecteert de hex-waarde via --color-client-accent. Default = goud. Geen klant-specifieke regels in deze stylesheet. ============================================================ */ [data-client-accent="custom"] { --accent: var(--color-client-accent, var(--color-gold)); /* afgeleiden volgen automatisch zodra backend deze invult: --color-client-accent-hover, -deep, -light, -bg, -glow, -ink-on */ --accent-hover: var(--color-client-accent-hover, var(--color-gold-hover)); --accent-deep: var(--color-client-accent-deep, var(--color-gold-deep)); --accent-light: var(--color-client-accent-light, var(--color-gold-light)); --accent-bg: var(--color-client-accent-bg, var(--color-gold-bg)); --accent-glow: var(--color-client-accent-glow, var(--color-gold-glow)); --accent-ink-on: var(--color-client-accent-ink, #FFFFFF); } /* ============================================================ PRINT — sober fallback, alle accent-kleuren behouden ============================================================ */ @media print { :root { --shadow-card: none; --shadow-sm: none; --shadow-md: none; --shadow-lg: none; --shadow-xl: none; } }