/* Make it Flow: design tokens. Bron: Figma "Studio rebranding" (Qi8zVgdD9xU2evDi2Cd1h3), collecties Primitives, Tokens (Licht en Donker) en Format.
   Richting Moss. Gebruik in componenten alleen de semantische namen (--color-*, --radius-*, --space-*). */

:root {
  /* Primitives */
  --glass-light: rgb(255 255 255 / 45%);   /* glas op licht: wit 35 tot 55% */
  --glass-light-blur: 12px;
  --moss-100: #D8EDE4;
  --moss-200: #9BC4B2;
  --moss-300: #8FC2B0;
  --moss-400: #5E9A86;
  --moss-500: #4F8C78;
  --moss-600: #2F6F5E;
  --moss-700: #1E4F4B;
  --neutral-0: #FFFFFF;
  --neutral-50: #F5F4F0;
  --neutral-100: #F3F2EE;
  --neutral-200: #E8E7E1;
  --neutral-300: #A3A7A4;
  --neutral-400: #B4B8B5;
  --neutral-450: #8C918D;
  --neutral-500: #6C716E;
  --neutral-700: #1E2522;
  --neutral-800: #151A18;
  --neutral-900: #0C0F0E;
  --status-ok: #2FBF71;
  --white-14: rgb(255 255 255 / 14%);
  --white-70: rgb(255 255 255 / 70%);
  --space-0: 0px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;
  --space-96: 96px;
  --space-120: 120px;
  --space-160: 160px;
  --radius-8: 8px;
  --radius-10: 10px;
  --radius-12: 12px;
  --radius-15: 15px;
  --radius-14: 14px;
  --radius-18: 18px;
  --radius-24: 24px;
  --radius-28: 28px;
  --radius-32: 32px;
  --radius-999: 999px;
  --opacity-14: 0.14;
  --opacity-34: 0.34;
  --opacity-65: 0.65;
  --opacity-70: 0.7;

  /* Tokens, mode Licht */
  --color-bg-base: var(--neutral-0);
  --color-bg-soft: var(--neutral-50);
  /* Secundaire achtergrond voor blokken, tegels en panelen: effen tint, nooit een gradient */
  --color-bg-tint: var(--moss-100);
  --color-fg-on-tint: var(--moss-600);
  /* Zachte versie van de tint: je ziet het verloop amper. De echte gradient blijft voor paginaachtergronden. */
  --color-bg-tint-fill: radial-gradient(70% 90% at 12% 8%, rgb(255 255 255 / 55%), rgb(255 255 255 / 0) 60%), radial-gradient(60% 80% at 100% 100%, color-mix(in srgb, var(--moss-200) 35%, transparent), transparent 70%), linear-gradient(135deg, color-mix(in srgb, var(--moss-100) 70%, white) 0%, var(--moss-100) 50%, color-mix(in srgb, var(--moss-100) 88%, var(--moss-400)) 100%);
  --color-bg-muted: var(--neutral-200);
  --color-fg-default: var(--neutral-500);   /* lopende tekst; titels via --color-fg-title */
  --color-fg-muted: var(--neutral-500);
  --color-fg-subtle: var(--neutral-300);
  --color-fg-on-color: var(--neutral-0);
  --color-fg-on-color-muted: var(--white-70);
  --color-brand-accent: var(--moss-500);
  --color-brand-light: var(--moss-200);
  --color-brand-gradient-start: var(--moss-300);
  --color-brand-gradient-end: var(--moss-700);
  --color-status-ok: var(--status-ok);
  --color-effect-glass: var(--white-14);
  --radius-sm: var(--radius-14);          /* velden, labels, kleine tegels */
  --radius-btn: var(--radius-24);
  --radius-btn-lg: var(--radius-24);
  --radius-card: var(--radius-24);        /* kaarten */
  --radius-tile: var(--radius-18);        /* beelden in het metselwerk op de casepagina's */
  --radius-card-lg: var(--radius-28);     /* grote kaarten en beeldvlakken */
  --radius-float: var(--radius-32);       /* zwevende kleurvlakken (zijde) */
  --radius-xl: var(--radius-28);
  --radius-pill: var(--radius-999);
  --space-xs: var(--space-4);
  --space-sm: var(--space-8);
  --space-md: var(--space-16);
  --space-lg: var(--space-24);
  --space-xl: var(--space-40);
  --space-2xl: var(--space-64);
  --space-3xl: var(--space-96);

  /* Effecten. Glas is één waarde (besluit 15 okt 2026): wit 9 tot 14%, blur 10, geen rand, geen ring, geen schaduw. */
  --glass-bg: linear-gradient(140deg, rgb(255 255 255 / 14%) 0%, rgb(255 255 255 / 10%) 40%, rgb(255 255 255 / 9%) 70%, rgb(255 255 255 / 12%) 100%);
  --glass-blur: 10px;
  --effect-glass-fill: var(--glass-bg);
  --effect-glass-blur: var(--glass-blur);
  /* Glas in decks en voorstellen */
  --effect-glass-deck-fill: rgb(255 255 255 / 9%);
  --effect-glass-deck-blur: 8px;
  --effect-card-shadow: 0 1px 2px rgb(12 15 14 / 6%), 0 1px 1px rgb(12 15 14 / 4%);
  --effect-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.34 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  --gradient-cover: linear-gradient(135deg, var(--moss-300) 0%, var(--moss-700) 100%);
  --font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Format: standaard website desktop */
  --format-width: 1440px;
  --format-height: 900px;
  --format-margin: 120px;
  --format-gutter: 32px;
  --format-title-size: 80px;
  --format-subtitle-size: 32px;
  --format-body-size: 20px;
  --format-stat-size: 160px;
  color-scheme: light;
}

/* Tokens, mode Donker */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg-base: var(--neutral-800);
    --color-bg-soft: var(--neutral-900);
    --color-bg-tint: var(--moss-700);
    --color-fg-on-tint: var(--moss-100);
    --color-bg-tint-fill: linear-gradient(135deg, color-mix(in srgb, var(--moss-700) 88%, var(--moss-400)) 0%, var(--moss-700) 55%, color-mix(in srgb, var(--moss-700) 90%, black) 100%);
    --color-bg-muted: var(--neutral-700);
    --color-fg-default: var(--neutral-100);
    --color-fg-muted: var(--neutral-400);
    --color-fg-subtle: var(--neutral-450);
    --color-brand-accent: var(--moss-400);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --color-bg-base: var(--neutral-800);
  --color-bg-soft: var(--neutral-900);
  --color-bg-tint: var(--moss-700);
  --color-fg-on-tint: var(--moss-100);
  --color-bg-tint-fill: linear-gradient(135deg, color-mix(in srgb, var(--moss-700) 88%, var(--moss-400)) 0%, var(--moss-700) 55%, color-mix(in srgb, var(--moss-700) 90%, black) 100%);
  --color-bg-muted: var(--neutral-700);
  --color-fg-default: var(--neutral-100);
  --color-fg-muted: var(--neutral-400);
  --color-fg-subtle: var(--neutral-450);
  --color-brand-accent: var(--moss-400);
  color-scheme: dark;
}

/* Format-modes: zet data-format op het canvas of de pagina */
[data-format="linkedin-1x1"] {
  --format-width: 1080px;
  --format-height: 1080px;
  --format-margin: 96px;
  --format-gutter: 24px;
  --format-title-size: 88px;
  --format-subtitle-size: 40px;
  --format-body-size: 32px;
  --format-stat-size: 240px;
}
[data-format="linkedin-4x5"] {
  --format-width: 1080px;
  --format-height: 1350px;
  --format-margin: 96px;
  --format-gutter: 24px;
  --format-title-size: 96px;
  --format-subtitle-size: 44px;
  --format-body-size: 34px;
  --format-stat-size: 260px;
}
[data-format="linkedin-9x16"] {
  --format-width: 1080px;
  --format-height: 1920px;
  --format-margin: 80px;
  --format-gutter: 24px;
  --format-title-size: 104px;
  --format-subtitle-size: 48px;
  --format-body-size: 36px;
  --format-stat-size: 260px;
}
[data-format="website-desktop"] {
  --format-width: 1440px;
  --format-height: 900px;
  --format-margin: 120px;
  --format-gutter: 32px;
  --format-title-size: 80px;
  --format-subtitle-size: 32px;
  --format-body-size: 20px;
  --format-stat-size: 160px;
}
[data-format="website-mobiel"] {
  --format-width: 390px;
  --format-height: 844px;
  --format-margin: 20px;
  --format-gutter: 16px;
  --format-title-size: 40px;
  --format-subtitle-size: 22px;
  --format-body-size: 16px;
  --format-stat-size: 88px;
}
[data-format="deck-16x9"] {
  --format-width: 1280px;
  --format-height: 720px;
  --format-margin: 80px;
  --format-gutter: 24px;
  --format-title-size: 56px;
  --format-subtitle-size: 28px;
  --format-body-size: 20px;
  --format-stat-size: 140px;
}


/* ------------------------------------------------------------------
   Website. Dit bestand is de enige bron: site.css gebruikt alleen deze namen, geen losse hexcodes,
   geen eigen glas en geen eigen radius. Regels (Ecomtrada-deck v8 en Sergio, 15 okt 2026):
   - Titels #0C0F0E: eerste deel Geist 500, tweede deel Geist 300. Nooit groen, nooit 600 of 700.
   - Eyebrow: Geist 500 14px, zinsvorm, twee tonen. Lead: Geist 400 19px/1.6, #6C716E. Op kleur alles wit.
   - Glas: --glass-bg en --glass-blur, alleen op kleur. Geen rand, ring of schaduw.
   - Radius: kaarten 24 tot 28, zwevende kleurvlakken 32 (mobiel 24).
   ------------------------------------------------------------------ */
:root {
  /* Aanvullende primitives uit het website-ontwerp */
  --moss-350: #7FB39F;
  --moss-650: #2A6353;
  --neutral-150: #E1E3DF;
  --zijde-base: #6E9F8E;           /* gemiddelde kleur van de zijde, zichtbaar zolang het beeld laadt */
  --error-500: #A6503B;
  --field-focus: #EEF3F0;
  --ink: #0C0F0E;
  --mask-solid: #000;              /* alleen voor mask-image, wordt nooit getoond */

  /* Wit en inkt met dekking (tekst en vlakken op zijde, schaduwen van beelden) */
  --white-0: rgb(255 255 255 / 0);
  --white-4: rgb(255 255 255 / 4%);
  --white-6: rgb(255 255 255 / 6%);
  --white-10: rgb(255 255 255 / 10%);
  --white-12: rgb(255 255 255 / 12%);
  --white-18: rgb(255 255 255 / 18%);
  --white-25: rgb(255 255 255 / 25%);
  --white-45: rgb(255 255 255 / 45%);
  --white-55: rgb(255 255 255 / 55%);
  --white-72: rgb(255 255 255 / 72%);
  --white-80: rgb(255 255 255 / 80%);
  --white-85: rgb(255 255 255 / 85%);
  --white-92: rgb(255 255 255 / 92%);
  --ink-6: rgb(12 15 14 / 6%);
  --ink-22: rgb(12 15 14 / 22%);
  --ink-34: rgb(12 15 14 / 34%);
  --moss-100-0: rgb(216 237 228 / 0);
  --moss-100-15: rgb(216 237 228 / 15%);
  --moss-100-45: rgb(216 237 228 / 45%);
  --moss-300-0: rgb(143 194 176 / 0);
  --moss-300-6: rgb(143 194 176 / 6%);
  --moss-300-16: rgb(143 194 176 / 16%);
  --moss-300-10: rgb(143 194 176 / 10%);
  --moss-300-24: rgb(143 194 176 / 24%);
  --moss-650-92: rgb(42 99 83 / 92%);
  --moss-600-8: rgb(47 111 94 / 8%);
  --moss-200-0: rgb(155 196 178 / 0);
  --moss-200-70: rgb(155 196 178 / 70%);
  --moss-700-0: rgb(30 79 75 / 0);
  --moss-700-45: rgb(30 79 75 / 45%);

  /* Tekst */
  --color-fg-title: var(--neutral-900);      /* titels, beide delen (deck: rgb 12 15 14) */
  --color-fg-title-2: var(--neutral-900);
  --color-fg-body: var(--neutral-500);       /* lopende tekst en leads */
  --color-fg-soft: var(--neutral-500);
  --color-fg-mid: var(--neutral-500);
  --color-fg-label: var(--neutral-500);
  --color-fg-faint: var(--neutral-300);
  --color-eyebrow-1: var(--neutral-500);
  --color-eyebrow-2: var(--neutral-300);
  --color-on-color: var(--neutral-0);
  --color-on-color-2: var(--white-72);
  --color-error: var(--error-500);

  /* Vlakken */
  --color-bg-panel: var(--neutral-50);       /* kaarten op wit */
  --color-field: var(--neutral-50);
  --color-field-focus: var(--field-focus);
  --color-pill-bg: var(--moss-600-8);
  --color-pill-fg: var(--moss-500);
  --card-bg: var(--neutral-50);
  --card-radius: var(--radius-card);
  --card-shadow: none;
  --card-pad: 24px;
  --shadow-shot: 0 24px 60px var(--ink-22);  /* alleen onder echte beelden en mockups */
  --shadow-float: 0 1px 2px var(--ink-6), 0 24px 64px var(--ink-6);   /* wit blok op wit: zweeft, zonder rand */
  --scrim-photo: linear-gradient(160deg, var(--moss-300), var(--moss-700));   /* zwart-witfoto op kleur, multiply 90% */

  /* Zijde: elk kleurvlak, nooit een vlakke CSS-verloop */
  --gradient-flow: linear-gradient(var(--flow-angle, 135deg), var(--moss-350) 14.286%, var(--moss-500) 53.571%, var(--moss-650) 85.714%);
  --zijde-v3: image-set(url("../img/site/zijde/zijde-v3.avif") type("image/avif"), url("../img/site/zijde/zijde-v3.webp") type("image/webp"));
  --zijde-v2: image-set(url("../img/site/zijde/zijde-v2.avif") type("image/avif"), url("../img/site/zijde/zijde-v2.webp") type("image/webp"));
  --zijde-v3-st: image-set(url("../img/site/zijde/zijde-v3-staand.avif") type("image/avif"), url("../img/site/zijde/zijde-v3-staand.webp") type("image/webp"));
  --zijde-v2-st: image-set(url("../img/site/zijde/zijde-v2-staand.avif") type("image/avif"), url("../img/site/zijde/zijde-v2-staand.webp") type("image/webp"));

  /* Typografie */
  --font-family-ui: var(--font-family);
  --type-h1: clamp(44px, 6.4vw, 88px);
  --type-h2: clamp(36px, 4.6vw, 64px);
  --type-h3: clamp(26px, 2.6vw, 34px);
  --type-lead: 19px;
  --type-body: 16px;
  --type-small: 14px;
  --type-label: 13px;
  --type-eyebrow: 14px;
  --type-stat: clamp(44px, 4.4vw, 56px);
  --ls-h1: -0.03em;
  --ls-h2: -0.025em;
  --lh-title: 1.04;
  --lh-body: 1.6;

  /* Ruimte en beweging */
  --page-gutter: var(--space-40);
  --nav-height: 60px;
  --title-gap: 64px;          /* titel tot content */
  --intro-gap: 18px;          /* titel tot intro */
  --intro-content-gap: 44px;  /* intro tot content */
  --ease-flow: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-expand: 650ms;
}
@media (max-width: 809px) {
  :root { --page-gutter: var(--space-20); --radius-float: var(--radius-24); }
}

/* Overige dekkingen die de site gebruikt */
:root {
  --neutral-450-28: rgb(140 145 141 / 28%);
  --neutral-450-35: rgb(140 145 141 / 35%);
  --black-10: rgb(0 0 0 / 10%);
  --neutral-450-14: rgb(140 145 141 / 14%);
  --neutral-500-50: rgb(108 113 110 / 50%);
  --black-25: rgb(0 0 0 / 25%);
  --neutral-450-16: rgb(140 145 141 / 16%);
  --white-22: rgb(255 255 255 / 22%);
  --ink-45: rgb(12 15 14 / 45%);
  --ink-52: rgb(12 15 14 / 52%);
  --white-82: rgb(255 255 255 / 82%);
  --ink-28: rgb(12 15 14 / 28%);
  --white-16: rgb(255 255 255 / 16%);
  --white-40: rgb(255 255 255 / 40%);
  --white-30: rgb(255 255 255 / 30%);
  --ink-14: rgb(12 15 14 / 14%);
  --white-8: rgb(255 255 255 / 8%);
  --ink-25: rgb(12 15 14 / 25%);
  --moss-700-70: rgb(30 79 75 / 70%);
}

/* ------------------------------------------------------------------
   Easter egg "Make it Glow": de schakelaar in de footer zet data-richting="ember" op <html>.
   Dezelfde tokens, andere waarden: Ember uit Figma Studio rebranding (Richting, accent gloed #FF5A1F,
   midden #E0401A, diep #8A1C0A; zijde Ember / v3 en v2), zacht gehouden zoals Moss. De namen --moss-* blijven
   bestaan zodat site.css niet verandert; hier krijgen ze de Ember-waarden.
   ------------------------------------------------------------------ */
:root[data-richting="ember"] {
  --moss-100: #FBE3D8;
  --moss-200: #F4B79B;
  --moss-300: #FF9A6E;
  --moss-350: #F08A5E;
  --moss-400: #DD5A30;
  --moss-500: #C8481F;
  --moss-600: #A8341A;
  --moss-650: #8F2C12;
  --moss-700: #6E1408;
  --zijde-base: #BC5C42;
  --field-focus: #F7EFEB;
  --moss-100-0: rgb(251 227 216 / 0);
  --moss-100-15: rgb(251 227 216 / 15%);
  --moss-100-45: rgb(251 227 216 / 45%);
  --moss-300-0: rgb(255 154 110 / 0);
  --moss-300-6: rgb(255 154 110 / 6%);
  --moss-300-16: rgb(255 154 110 / 16%);
  --moss-300-10: rgb(255 154 110 / 10%);
  --moss-300-24: rgb(255 154 110 / 24%);
  --moss-650-92: rgb(143 44 18 / 92%);
  --moss-600-8: rgb(168 52 26 / 8%);
  --moss-200-0: rgb(244 183 155 / 0);
  --moss-200-70: rgb(244 183 155 / 70%);
  --moss-700-0: rgb(110 20 8 / 0);
  --moss-700-45: rgb(110 20 8 / 45%);
  --moss-700-70: rgb(110 20 8 / 70%);
  --zijde-v3: image-set(url("../img/site/zijde/zijde-v3-ember.avif") type("image/avif"), url("../img/site/zijde/zijde-v3-ember.webp") type("image/webp"));
  --zijde-v2: image-set(url("../img/site/zijde/zijde-v2-ember.avif") type("image/avif"), url("../img/site/zijde/zijde-v2-ember.webp") type("image/webp"));
  --zijde-v3-st: image-set(url("../img/site/zijde/zijde-v3-ember-staand.avif") type("image/avif"), url("../img/site/zijde/zijde-v3-ember-staand.webp") type("image/webp"));
  --zijde-v2-st: image-set(url("../img/site/zijde/zijde-v2-ember-staand.avif") type("image/avif"), url("../img/site/zijde/zijde-v2-ember-staand.webp") type("image/webp"));
}

/* Zachte crossfade van de hele pagina bij het wisselen (View Transitions) */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.8s; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }