/* ========================================
   MadeFlow-huisstijl, canonieke kleurtokens

   Eén bron voor de merkkleuren van MadeFlow zelf (madeflow.nl, de
   uitlegpagina, de ondertekenpagina, MadeFlow-mails). NIET voor de
   webshop of backoffice van een tenant: die krijgen hun kleuren
   per-tenant ingespoten via branding runtime (BrandKit).

   Bron: MadeFlow-brand-colors.pdf, levering 7 sep 2026.
   Bronbestanden + logo's: madeflow-marketing/assets/bron/huisstijl-2026-09/

   Laad dit vóór landing.css / uitleg.css / onderteken.css.
   ======================================== */

:root {
  /* --- Deze site is licht, en zegt dat ook. Zonder deze regel mag de
         browser zelf iets verzinnen zodra het systeem op donker staat:
         Chrome op Android klapt de hele pagina om (crème wordt bruin,
         Amulet verschiet, de foto's blijven licht), en op elke browser
         worden invoervelden, keuzelijsten, scrollbars en de autofill-
         kleur donker op een crème pagina. Het palet van Jeroen is warm
         en licht; een donkere variant bestaat niet, dus laten we de
         browser er niet zelf een verzinnen. Het favicon is de enige die
         het systeemthema wél volgt, want die staat in de balk van de
         browser en niet op onze pagina (madeflow-favicon.svg). --- */
  color-scheme: light;

  /* --- Palet, exact zoals geleverd --- */
  --mf-black: #000000; /* Black,       PANTONE Black 6 C */
  --mf-white: #FFFFFF; /* White */
  --mf-lunar-green: #444C42; /* Lunar Green, PANTONE 4224 C */
  --mf-siam: #5D6558; /* Siam,        PANTONE 4193 C */
  --mf-spring-wood: #F6F3EC; /* Spring Wood, PANTONE 9043 C */
  --mf-rum: #786684; /* Rum,         PANTONE 667 C  */
  --mf-paarl: #B8683D; /* Paarl,       PANTONE 7566 C */
  --mf-amulet: #89A47F; /* Amulet,      PANTONE 4206 C */
  --mf-marigold: #C89A3D; /* Marigold,    PANTONE 7407 C */

  /* --- Afgeleiden. Niet in de PDF; hier gemaakt omdat een scherm meer
         nuances nodig heeft dan negen kleuren. Elke afgeleide is een
         verdieping of verzachting van een paletkleur, geen nieuwe kleur.
         De contrastwaarde erachter is tegen Spring Wood (de papierkleur),
         gemeten volgens WCAG 2.1. --- */
  --mf-ink: #2E332C; /* Lunar Green verdiept    11.7 : 1  AAA */
  --mf-siam-light: #697065; /* Siam verzacht            4.6 : 1  AA  */
  --mf-paarl-deep: #A25A33; /* Paarl verdiept           4.7 : 1  AA  */
  --mf-amulet-deep: #526D48; /* Amulet verdiept          5.2 : 1  AA  */
  --mf-marigold-light: #E3C589; /* Marigold verzacht, vlak  1.6 : 1  vlak */
  --mf-paper: #FCFBF7; /* kaartvlak boven papier */
  --mf-mist: #E4EAE0; /* Amulet-waas, rustvlak  */

  /* --- Letters. Niet aangeleverd bij de huisstijl; het woordmerk is
         nagemeten en blijkt Outfit (500), dus dat is de sans van het merk.
         Fraunces houdt de koppen: een warme schreefletter boven een
         geometrische schreefloze is Joeke's eigen zin in typografie,
         ambacht van 1800 en techniek van 2030.
         Outfit heeft geen echte cursief, dus cursief is altijd Fraunces.
         Twee letters, geen derde: de aanloopregel boven een kop is een
         vorm (klein, kapitaal, ruime letterafstand), geen eigen font. --- */
  --mf-ff-kop: 'Fraunces', Georgia, 'Times New Roman', serif;
  --mf-ff-tekst: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* --- Wat mag waarop. Kort, omdat dit de fout is die je niet ziet
         tot iemand het scherm niet kan lezen:
         · tekst op papier  -> Lunar Green, Siam, Rum, --mf-*-deep
         · tekst op donker  -> Spring Wood, White, Amulet, Marigold
         · Amulet + Marigold zijn VLAKKEN, geen tekstkleuren op papier
           (2.5 : 1 en 2.3 : 1, dat leest niemand)
         · tekst óp Amulet of Marigold -> altijd --mf-ink --- */
}