/* Nextkozijnen designtokens. Eén bron voor kleur, type en ruimte.
   Bewust ver van Datadenkt (donkergroen #0E3D2F + koper #B57A16) en van
   Umely (oranje verloop). De richting komt uit het onderwerp zelf:
   thermografie. Buiten koud, binnen warm, en het kozijn is de grens.
   Zie ONTWERP-IDENTITEIT.md voor de onderbouwing. */

/* Fonts: zelf gehost, want de site doet geen enkel extern verzoek.
   Archivo (display) is een stevige grotesk uit de technische hoek: de
   bouwplaats. Public Sans (body) is ontworpen voor overheidscommunicatie:
   de taal van het formulier, maar leesbaar. Samen zijn ze precies de twee
   werelden die Nextkozijnen verbindt. Beide variabel, dus één bestand per rol. */
@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-var.woff2") format("woff2-variations");
  font-weight: 500 800;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "Public Sans";
  src: url("/assets/fonts/publicsans-var.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-display: swap;
  font-style: normal;
}

:root {
  /* Kleur: de thermische schaal.
     Nacht is de koude buitenkant in de winter en draagt alle koppen en
     primaire knoppen. Warm is de amber uit een warmtebeeld: spaarzaam,
     alleen waar het over behouden warmte of een primaire actie gaat. */
  --nacht:      #0C2233;
  --nacht-diep: #071722;
  --nacht-zacht:#1B3A52;
  /* Het logoblauw: het logo dat Aart op 6 sep 2026 voor Instagram liet maken
     (huis met N, "NEXT KOZIJNEN"). Draagt sinds 7 sep de kop, de links en de
     primaire knoppen, zodat site en Instagram hetzelfde merk laten zien.
     Nacht blijft voor de donkere secties en de voet; warm blijft het accent. */
  --merk:       #0F4C8A;
  --logo:       #013E74;   /* het blauw van het echte logo (natekening 8 sep 2026) */
  --merk-diep:  #0B3A6B;
  --merk-licht: #E7EFF8;
  --koud:       #3E8FC4;   /* koude kant van de schaal */
  --koud-licht: #A8CFE6;
  --warm:       #FFB020;   /* warme kant van de schaal, het accent */
  --warm-diep:  #C97F00;   /* zelfde accent; op wit maar 3,2:1 - niet voor lopende tekst; wel voor vlakken, lijnen en tekst op donker (5,1:1 op nacht) */
  --warm-tekst: #996100;   /* het accent voor kleine tekst op licht (16 sep 2026, SEO-loop): 5,2:1 op wit en 4,8:1 op #F4F8FA, dus WCAG AA. Tot dan stonden .kicker, .label en de duur van een stap in --warm-diep (3,0:1) */

  --ruit:  #F4F8FA;        /* paginagrond: koel glas, geen cream */
  --kaart: #FFFFFF;
  --inkt:  #16232E;
  --grijs: #5A6B78;
  --lijn:  #DCE6EC;
  --lijn2: #C3D3DD;

  --goed:  #12795A;
  --fout:  #C0392B;

  /* De thermolijn: het signatuurelement. Koud links, warm rechts, precies
     wat een warmtecamera laat zien. Gebruikt als hero-rand, sectiegrens en
     als vulling van de budgetmeter; daar is het verloop ook betekenisvol. */
  --thermo: linear-gradient(90deg, var(--koud) 0%, #7FB5D8 38%, #FFD37A 72%, var(--warm) 100%);

  /* Type */
  --display: "Archivo", "Segoe UI", system-ui, sans-serif;
  --body: "Public Sans", "Segoe UI", system-ui, sans-serif;
  /* Schaal: 1.25 op mobiel, ruimer op desktop via clamp. */
  --t-mega: clamp(34px, 7.5vw, 60px);
  --t-groot: clamp(26px, 4.2vw, 38px);
  --t-kop: clamp(20px, 2.6vw, 26px);
  --t-sub: 18px;
  --t-basis: 17px;
  --t-klein: 15px;
  --t-fijn: 13.5px;

  /* Ruimte en vorm */
  --r-kaart: 12px;
  --r-knop: 8px;
  --r-pil: 999px;
  --schaduw: 0 1px 2px rgba(12,34,51,.06), 0 8px 24px rgba(12,34,51,.06);
  --schaduw-op: 0 2px 4px rgba(12,34,51,.08), 0 14px 32px rgba(12,34,51,.10);
}