/* ==========================================================================
   SmartPresent · design tokens
   Basis: huisstijl Smart Concepts (run-013, smart-concepts-website-2026).
   Ruwe merkkleuren zijn vast; componenten gebruiken de semantische --c-*-laag.
   Standaard is het LICHTE thema (crème); .thema-donker zet de laag om voor de
   filmische demovlakken, de hero en de footer.
   ========================================================================== */
:root{
  /* merk */
  --bg-licht:#F3F1EC;
  --bg-licht-2:#EAE7E0;
  --bg-donker:#0E0F12;
  --surface:#15171B;
  --dark:#16181B;
  --zwart:#060607;
  --muted:#83878F;
  --soft:#CFCDC8;
  --line:#23262C;
  --red:#FF002C;        /* lijnen, stippen, kaderhoekjes, rode tekst op donker */
  --red-hover:#C80022;  /* hover van rood vlak: donkerder, zodat wit erop >= 4,5:1 blijft */
  --red-vlak:#ED0028;   /* rood vlak met witte tekst (4,53:1) */
  --red-text:#D1001F;   /* kleine rode tekst op licht (4,98:1 op crème) */
  --wit:#FFFFFF;

  /* maat en ritme */
  --pad:clamp(20px,5vw,88px);
  --max:1440px;
  --gap:clamp(14px,2vw,30px);
  --sectie-y:clamp(72px,11vw,168px);
  --radius:3px;
  --radius-device:clamp(6px,1vw,14px);
  --header-h:70px;

  /* letter */
  --f-display:"Anton",Impact,"Arial Narrow Bold",system-ui,sans-serif;
  --f-label:"Archivo","Inter",system-ui,sans-serif;
  --f-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  /* beweging */
  --ease:cubic-bezier(.6,0,.2,1);
  --ease-out:cubic-bezier(.2,.7,.2,1);
  --ease-soft:cubic-bezier(.5,0,.15,1);
  --dur:.5s;

  /* kader-motief (SmartPresent) */
  --kader-dikte:3px;
  --kader-lengte:clamp(14px,2vw,28px);
  --kader-kleur:var(--red);
}

/* semantisch: licht (standaard) */
:root,.thema-licht{
  --c-bg:var(--bg-licht);
  --c-bg-2:var(--bg-licht-2);
  --c-ink:var(--bg-donker);
  --c-soft:#3A3E46;
  --c-muted:#5E626A;     /* 5,6:1 op crème */
  --c-line:#D8D4CB;
  --c-line-strong:#B9B4A9;
  --c-accent-text:var(--red-text);
  --c-header-bg:rgba(243,241,236,.88);
}
/* semantisch: donker */
.thema-donker,.site-footer{
  --c-bg:var(--bg-donker);
  --c-bg-2:var(--surface);
  --c-ink:var(--bg-licht);
  --c-soft:var(--soft);
  --c-muted:#9A9EA6;     /* 7,2:1 op #0E0F12 */
  --c-line:var(--line);
  --c-line-strong:#3A3E46;
  --c-accent-text:var(--red);
  --c-header-bg:rgba(14,15,18,.84);
}