/* ==========================================================
SoleCare design tokens
Bron: design-system/design-system.md. Laatst bijgewerkt: 26 september 2026
(lettertypes lokaal gehost in plaats van via Google Fonts).
Website én drukwerk volgen deze tokens verplicht.
========================================================== */
/* Fonts (SIL Open Font License), lokaal gehost sinds 26 september 2026:
beter voor privacy (GDPR, geen verzoek naar Google) en snelheid.
De woff2-bestanden en de @font-face-regels staan in fonts/fonts.css.
Laad die vóór dit bestand:
Buiten de website (Claude Design, Canva, druk): installeer de families
via Google Fonts, zoals beschreven in design-system.md, sectie 3. */
:root {
/* Kleur: salie (merkkleur, anker 500) */
--color-salie-50: #F4F5F1;
--color-salie-100: #E7EAE2;
--color-salie-200: #D0D5C8;
--color-salie-300: #B5BCA9;
--color-salie-400: #99A18C;
--color-salie-500: #7E8772;
--color-salie-600: #676F5C;
--color-salie-700: #545B4A;
--color-salie-800: #414638;
--color-salie-900: #2E3228;
--color-salie-950: #1D2019;
/* Kleur: neutralen */
--color-kalk: #FBF8F3;
--color-linnen: #F1EBE2;
--color-zand: #E5DACB;
--color-lijn: #D5C8B5;
--color-rand: #8A7E70;
--color-taupe: #665B4F;
--color-inkt: #2B2520;
--color-wit: #FFFFFF;
/* Kleur: accent */
--color-klei: #C79C8C;
--color-klei-100: #F2E2DA;
--color-klei-700: #8A4E3F;
/* Kleur: semantisch */
--color-succes: #3F6B4A;
--color-succes-bg: #E3EEE4;
--color-waarschuwing: #83550A;
--color-waarschuwing-bg: #F7ECD6;
--color-fout: #A23B2E;
--color-fout-bg: #F8E3DF;
--color-info: #36586A;
--color-info-bg: #E2ECF0;
/* Kleur: rollen (gebruik bij voorkeur deze) */
--bg: var(--color-linnen);
--surface: var(--color-kalk);
--surface-alt: var(--color-zand);
--text: var(--color-inkt);
--text-muted: var(--color-taupe);
--line: var(--color-lijn);
--border-input: var(--color-rand);
--link: var(--color-salie-700);
--btn-bg: var(--color-salie-600);
--btn-bg-hover: var(--color-salie-700);
--btn-text: var(--color-wit);
--focus: var(--color-klei-700);
--accent: var(--color-klei);
--footer-bg: var(--color-salie-900);
/* Typografie */
--font-head: "Hedvig Letters Serif", Georgia, "Times New Roman", serif;
--font-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
--text-display-size: 4.25rem; /* 68px */
--text-display-lh: 1.04;
--text-display-ls: -0.015em;
--text-display-weight: 400;
--text-display-font: var(--font-head);
--text-h1-size: 3.25rem; /* 52px */
--text-h1-lh: 1.08;
--text-h1-ls: -0.01em;
--text-h1-weight: 400;
--text-h1-font: var(--font-head);
--text-h2-size: 2.375rem; /* 38px */
--text-h2-lh: 1.15;
--text-h2-ls: -0.005em;
--text-h2-weight: 400;
--text-h2-font: var(--font-head);
--text-h3-size: 1.75rem; /* 28px */
--text-h3-lh: 1.22;
--text-h3-ls: 0em;
--text-h3-weight: 400;
--text-h3-font: var(--font-head);
--text-h4-size: 1.25rem; /* 20px */
--text-h4-lh: 1.35;
--text-h4-ls: 0em;
--text-h4-weight: 600;
--text-h4-font: var(--font-body);
--text-body-l-size: 1.25rem; /* 20px */
--text-body-l-lh: 1.6;
--text-body-l-ls: 0em;
--text-body-l-weight: 400;
--text-body-l-font: var(--font-body);
--text-body-size: 1.125rem; /* 18px */
--text-body-lh: 1.65;
--text-body-ls: 0em;
--text-body-weight: 400;
--text-body-font: var(--font-body);
--text-small-size: 1rem; /* 16px */
--text-small-lh: 1.5;
--text-small-ls: 0em;
--text-small-weight: 400;
--text-small-font: var(--font-body);
--text-label-size: 0.875rem; /* 14px */
--text-label-lh: 1.3;
--text-label-ls: 0.01em;
--text-label-weight: 600;
--text-label-font: var(--font-body);
--text-price-card-size: 2rem; /* 32px */
--text-price-card-lh: 1.0;
--text-price-card-ls: 0em;
--text-price-card-weight: 400;
--text-price-card-font: var(--font-head);
--text-price-list-size: 1.125rem; /* 18px */
--text-price-list-lh: 1.4;
--text-price-list-ls: 0em;
--text-price-list-weight: 600;
--text-price-list-font: var(--font-body);
--text-quote-size: 2rem; /* 32px */
--text-quote-lh: 1.3;
--text-quote-ls: -0.01em;
--text-quote-weight: 400;
--text-quote-font: var(--font-head);
/* Spacing (basis 4 px) */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
--space-8: 64px;
--space-9: 96px;
--space-10: 128px;
/* Layout */
--layout-max-width: 1240px;
--layout-columns: 12;
--layout-gutter: 32px;
--layout-gutter-mobile: 16px;
--layout-margin-desktop: 48px;
--layout-margin-tablet: 32px;
--layout-margin-mobile: 20px;
--layout-measure: 65ch;
--layout-section-desktop: 96px;
--layout-section-mobile: 64px;
/* Breakpoints (ter referentie: CSS-variabelen werken niet in @media) */
--bp-sm: 480px;
--bp-md: 768px;
--bp-lg: 1024px;
--bp-xl: 1280px;
/* Vorm */
--radius-sm: 8px;
--radius-md: 16px;
--radius-btn: 14px;
--radius-lg: 28px;
--radius-pill: 999px;
--radius-round: 50%;
--radius-arch: 50% 50% var(--radius-md) var(--radius-md) / 37.5% 37.5% var(--radius-md) var(--radius-md); /* boog bij beeldverhouding 3:4 */
--line-hair: 1px;
--line-ui: 1.5px;
--line-motif: 2px;
/* Elevatie */
--shadow-e1: 0 1px 2px rgba(64, 44, 28, .07);
--shadow-e2: 0 14px 32px -14px rgba(64, 44, 28, .22);
--shadow-e3: 0 28px 60px -24px rgba(64, 44, 28, .30);
/* Beweging */
--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
--fast: 150ms;
--base: 220ms;
/* Iconen */
--icon-stroke: 1.5;
--icon-size: 24px;
}
/* Mobiele typeschaal (onder 768 px) */
@media (max-width: 767px) {
:root {
--text-display-size: 2.625rem; /* 42px */
--text-h1-size: 2.25rem; /* 36px */
--text-h2-size: 1.8125rem; /* 29px */
--text-h3-size: 1.4375rem; /* 23px */
--text-h4-size: 1.1875rem; /* 19px */
--text-body-l-size: 1.1875rem; /* 19px */
--text-price-card-size: 1.625rem; /* 26px */
--text-quote-size: 1.5rem; /* 24px */
}
}
/* Voorbeeldgebruik */
/* h1 { font: var(--text-h1-weight) var(--text-h1-size)/var(--text-h1-lh) var(--text-h1-font); letter-spacing: var(--text-h1-ls); } */