@import url(fonts.css);

/* ============================================================
   De Klantenmaker — tokens.css
   Bestemming: webapp/public/tokens.css
   Bron: design-system/KLANTENMAKER-DESIGN-SYSTEM.md v1.0 (2026)
   Fonts: zie fonts.css + fonts/ (lokaal, geen externe verzoeken)
   ============================================================ */

:root {
  /* --- Basis --- */
  --dk-fond: #F7F6F2;          /* papier — standaard achtergrond */
  --dk-wit: #FFFFFF;           /* wit — kaarten/vlakken óp papier */
  --dk-ink: #161513;           /* inkt — koppen, tekst, primaire knop */
  --dk-ink-soft: #5F5D57;      /* grijs — secundaire tekst */
  --dk-lijn: #DEDBD2;          /* steen — hairlines, randen */

  /* --- Accent --- */
  --dk-primary: #0F5B66;       /* petrol — hét accent */
  --dk-primary-soft: #BDD6D9;  /* ijs — zachte vlakken, selecties */

  /* Tweede actie-kleur: het merk kent geen tweede accent.
     Keuze: inkt (de primaire knop uit het design system is inkt-op-papier;
     petrol blijft zo spaarzaam, ≈5–10% van een pagina). */
  --dk-accent: #161513;
  --dk-accent-soft: #E9E7E1;   /* zachte inkt-tint, oklch-verwant aan steen/papier */

  /* --- Status (alleen intern: CRM/portaal, nooit klantzichtbaar) ---
     Rustige tinten in dezelfde oklch-familie; geen signaalrood/-geel. */
  --dk-ok: #2E7D5B;            /* gedempt groen (= canvas-boodschap-groen) */
  --dk-let-op: #8A6A2F;        /* gedempt oker */
  --dk-fout: #8C4A3E;          /* gedempt terracotta */

  /* --- Typografie --- */
  --dk-font: "Instrument Sans", -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --dk-font-display: "Big Shoulders Display", "Arial Narrow", "Helvetica Neue Condensed", Impact, sans-serif;
  /* display: gewicht 700, UPPERCASE, letter-spacing .01em, line-height 0.94 */
  --dk-font-label: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  /* label: gewicht 600, UPPERCASE, letter-spacing .08em */
  --dk-maat: 16px;
  --dk-regel: 1.55;

  /* --- Vorm --- */
  --dk-radius: 0;              /* hoeken zijn recht */
  --dk-radius-klein: 0;
  --dk-schaduw: none;          /* schaduwen zijn verboden als stijlmiddel */
  --dk-ruimte: 24px;           /* 8px-grid basis */
  --dk-rotatie: 14deg;         /* het gekantelde vlak — altijd 14°, nooit anders */

  /* --- Canvas-signatuurkleuren (vaste combinaties, nooit wisselen) --- */
  --dk-canvas-gedrag: #0F5B66;     /* vierkant, 14° gekanteld */
  --dk-canvas-doelgroep: #2E5FA3;  /* cirkel */
  --dk-canvas-propositie: #5B4FA0; /* driehoek, punt omhoog */
  --dk-canvas-boodschap: #2E7D5B;  /* halve cirkel, platte kant onder */
  --dk-canvas-kanalen: #46617A;    /* drie horizontale balken */
  --dk-canvas-partners: #8C5B74;   /* twee overlappende vierkantjes */
}