/* Topline Automotive · kleuren als CSS-variabelen, gelijk aan het merkboek.
   Vier merkkleuren (papier, inkt, geel, raster); de rest is daarvan afgeleid en is geen extra merkkleur.
   --geel alleen als accent: het monogram op inkt, een kenteken of een kleine markering. */
:root{
  /* vier merkkleuren */
  --papier:#F4F4F1;
  --inkt:#111B2E;
  --geel:#F4C300;
  --raster:#B9C5D3;
  /* afgeleiden, geen extra merkkleuren */
  --papier-2:#E7E8E4;
  --raster-licht:#E3E7EC;
  --papier-3:#D9DCDE;
  --inkt-2:#1A2640;
  --lijn:rgba(17,27,46,.16);
  --lijn-sterk:rgba(17,27,46,.40);
  --inkt-zacht:rgba(17,27,46,.62);
  --inkt-zacht-2:rgba(17,27,46,.78); /* kleine tekst op Rasterblauw: 5,9 : 1 */
  --papier-zacht:rgba(244,244,241,.62);
  --wit:#FFFFFF;
  --eu:#1D3E94;
  --schaduw:0 1px 2px rgba(17,27,46,.10), 0 18px 40px rgba(17,27,46,.16);
  --f:'Archivo', system-ui, sans-serif; /* zie letter.txt */
}

/* Letter: Archivo variabel, lokaal (assets/fonts/archivo.css). Rollen uit het merkboek, blad 09. */
:root{
  --wdth-kop:108%;      /* H1/H2 */
  --wdth-smal:66%;      /* maten, prijzen, kentekens */
  --wdth-breed:125%;    /* AUTOMOTIVE-stijl labels, spaarzaam */
  --fs-h1:clamp(2.5rem, 1.6rem + 3.6vw, 4.25rem);   /* 40–68 px */
  --fs-h2:clamp(1.75rem, 1.2rem + 2vw, 2.75rem);     /* 28–44 px */
  --fs-h3:clamp(1.25rem, 1.05rem + .7vw, 1.625rem);  /* 20–26 px */
  --fs-intro:clamp(1.125rem, 1rem + .5vw, 1.375rem); /* 18–22 px */
  --fs-tekst:1.0625rem;                              /* 17 px */
  --fs-cijfer:clamp(1.75rem, 1.2rem + 2vw, 2.125rem);/* 28–34 px */
  --fs-label:.8125rem;                               /* 13 px, kapitalen +16 % */
  --lh-kop:1.06; --lh-tekst:1.53;
  /* Motion-signatuur "klik": snel los, vast op zijn plek. Anime.js v4 lokaal. */
  --ease-in-klik:cubic-bezier(.2,.7,.1,1);
  --ease-uit-klik:cubic-bezier(.7,0,.84,0);
  --dur-kort:.32s; --dur:.56s; --dur-lang:.72s;
  --kolom:min(100% - 2rem, 76rem);
}