/* Flow Factory — design tokens */
:root {
  /* ---------- Kleur ---------- */
  /* Hoofdkleuren — drie stemmen */
  --ff-ink: #2E2432;              /* inkt-aubergine, hoofdkleur */
  --ff-paper: #F3EEE4;            /* warm papier, basis */
  --ff-heart: #D9A327;            /* mosterd-geel, spaarzaam */

  /* Ink-schaal */
  --ff-ink-90: #352A3A;
  --ff-ink-80: #3B3040;
  --ff-ink-60: #5B4E62;
  --ff-ink-40: #8B8090;
  --ff-ink-20: #C9C2CE;
  --ff-ink-10: rgba(46, 36, 50, 0.10);
  --ff-ink-05: rgba(46, 36, 50, 0.05);

  /* Paper-schaal */
  --ff-paper-deep: #EAE2D3;       /* dieper vlak */
  --ff-paper-soft: #F8F4EB;       /* hoger/lichter vlak */
  --ff-paper-white: #FBF8F1;      /* bijna-wit voor cards op paper */

  /* Hart-varianten (gebruik met beleid) */
  --ff-heart-deep: #B4861A;
  --ff-heart-soft: #E8BE5E;

  /* Status/ondersteunend */
  --ff-positive: #5C7A5A;
  --ff-danger: #A34A3A;

  /* ---------- Type ---------- */
  --ff-sans: 'General Sans', 'Söhne', -apple-system, 'Helvetica Neue', sans-serif;
  --ff-serif: 'Instrument Serif', 'GT Sectra', 'Tiempos Headline', Georgia, serif;
  --ff-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Type-schaal (clamp voor responsief) */
  --ff-t-display: clamp(56px, 9vw, 128px);
  --ff-t-h1: clamp(40px, 5.2vw, 72px);
  --ff-t-h2: clamp(30px, 3.6vw, 48px);
  --ff-t-h3: clamp(22px, 2.4vw, 30px);
  --ff-t-h4: 20px;
  --ff-t-lede: clamp(18px, 1.6vw, 22px);
  --ff-t-body: 16px;
  --ff-t-small: 14px;
  --ff-t-micro: 12px;
  --ff-t-mono: 11px;

  /* Line-heights */
  --ff-lh-display: 0.95;
  --ff-lh-heading: 1.05;
  --ff-lh-lede: 1.4;
  --ff-lh-body: 1.55;

  /* Letter-spacing */
  --ff-ls-display: -0.035em;
  --ff-ls-heading: -0.025em;
  --ff-ls-body: -0.005em;
  --ff-ls-mono: 0.12em;

  /* ---------- Ruimte ---------- */
  --ff-s-1: 4px;
  --ff-s-2: 8px;
  --ff-s-3: 12px;
  --ff-s-4: 16px;
  --ff-s-5: 24px;
  --ff-s-6: 32px;
  --ff-s-7: 48px;
  --ff-s-8: 64px;
  --ff-s-9: 96px;
  --ff-s-10: 128px;

  /* ---------- Grid ---------- */
  --ff-col: 12;
  --ff-gutter: 24px;
  --ff-margin: 80px;
  --ff-max: 1440px;
  --ff-read: 680px;           /* ideale leesbreedte body */

  /* ---------- Radii & lines ---------- */
  --ff-radius-0: 0;
  --ff-radius-1: 2px;
  --ff-radius-2: 4px;
  --ff-line: 1px solid var(--ff-ink-10);
  --ff-line-strong: 1px solid var(--ff-ink);

  /* ---------- Motion ---------- */
  --ff-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ff-dur-1: 120ms;
  --ff-dur-2: 200ms;
  --ff-dur-3: 400ms;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--ff-sans);
  font-size: var(--ff-t-body);
  line-height: var(--ff-lh-body);
  letter-spacing: var(--ff-ls-body);
  background: var(--ff-paper);
  color: var(--ff-ink);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "ss02";
  text-wrap: pretty;
}
::selection { background: var(--ff-ink); color: var(--ff-paper); }

/* ---------- Typography primitives ---------- */
.ff-display {
  font-family: var(--ff-sans);
  font-weight: 300;
  font-size: var(--ff-t-display);
  line-height: var(--ff-lh-display);
  letter-spacing: var(--ff-ls-display);
}
.ff-display em { font-family: var(--ff-serif); font-style: italic; font-weight: 400; letter-spacing: -0.015em; }
.ff-display .med { font-weight: 500; letter-spacing: -0.045em; }

.ff-h1 { font-family: var(--ff-sans); font-weight: 300; font-size: var(--ff-t-h1); line-height: var(--ff-lh-heading); letter-spacing: var(--ff-ls-display); }
.ff-h2 { font-family: var(--ff-sans); font-weight: 300; font-size: var(--ff-t-h2); line-height: var(--ff-lh-heading); letter-spacing: var(--ff-ls-heading); }
.ff-h3 { font-family: var(--ff-sans); font-weight: 400; font-size: var(--ff-t-h3); line-height: 1.2; letter-spacing: var(--ff-ls-heading); }
.ff-h4 { font-family: var(--ff-sans); font-weight: 500; font-size: var(--ff-t-h4); line-height: 1.3; letter-spacing: -0.01em; }

.ff-lede { font-size: var(--ff-t-lede); line-height: var(--ff-lh-lede); color: var(--ff-ink-80); max-width: var(--ff-read); }
.ff-body { font-size: var(--ff-t-body); line-height: var(--ff-lh-body); color: var(--ff-ink-80); max-width: var(--ff-read); }
.ff-small { font-size: var(--ff-t-small); line-height: 1.5; color: var(--ff-ink-60); }
.ff-micro { font-family: var(--ff-mono); font-size: var(--ff-t-mono); letter-spacing: var(--ff-ls-mono); text-transform: uppercase; color: var(--ff-ink-40); }
.ff-serif { font-family: var(--ff-serif); font-style: italic; font-weight: 400; letter-spacing: -0.015em; }

/* ---------- Wordmark ---------- */
.wordmark {
  font-family: var(--ff-sans);
  letter-spacing: -0.035em;
  line-height: 0.9;
  color: var(--ff-ink);
  display: inline-flex;
  align-items: baseline;
  gap: 0.18em;
  font-feature-settings: "ss01";
}
.wordmark .w-flow { font-weight: 300; }
.wordmark .w-factory { font-weight: 500; letter-spacing: -0.045em; }
.wordmark.on-ink { color: var(--ff-paper); }

/* ---------- Heart ---------- */
.ff-heart { display: inline-block; color: var(--ff-heart); line-height: 0; }
.ff-heart svg { display: block; width: 100%; height: 100%; aspect-ratio: 1 / 1; color: inherit; fill: currentColor; }
.ff-heart svg path,
.ff-heart svg use { fill: currentColor; }
.ff-heart.xs { width: 14px; height: 14px; }
.ff-heart.sm { width: 22px; height: 22px; }
.ff-heart.md { width: 40px; height: 40px; }
.ff-heart.lg { width: 80px; height: 80px; }
.ff-heart.xl { width: 160px; height: 160px; }