/* ============================================================
   KLUS EXPERT — gedeeld kleursysteem + font (bron: homepage index.html)
   Deze file is de ENIGE bron van waarheid voor kleur/typografie.
   Elke publieke pagina linkt deze file; pagina-eigen :root-tokens
   mappen naar deze rollen. Wijzig kleuren ALLEEN hier.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  /* Merk */
  --primary:#E85D24;
  --primary-dark:#C24A18;
  --primary-light:#F0925A;
  --primary-tint:#FDEDE5;
  --secondary:#1C2333;
  --secondary-soft:#2A3245;
  --accent:#E85D24;
  --accent-dark:#CF4C17;
  --accent-tint:#FDEDE5;

  /* Neutraal */
  --white:#FFFFFF;
  --bg:#FFFFFF;
  --bg-soft:#F7F9F9;
  --bg-muted:#F1F4F5;
  --ink:#1C2333;
  --ink-soft:#4A5468;
  --ink-muted:#7A8496;
  --line:#E7ECEE;
  --star:#F5A623;

  /* ---- Logo-palet (bron: logo.svg) — merk-kleuren voor accenten & per-klant thema ---- */
  --logo-orange:#E85D24;
  --logo-amber:#F6B02A;
  --logo-magenta:#E0407A;
  --logo-purple:#8B3FD0;
  --logo-blue:#4F74EF;
  --brand-grad:linear-gradient(90deg,var(--logo-orange),var(--logo-amber),var(--logo-magenta),var(--logo-purple),var(--logo-blue),var(--logo-orange));

  /* Typografie */
  --font:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  /* Radius */
  --r-sm:10px;
  --r:14px;
  --r-lg:18px;
  --r-pill:999px;

  /* Schaduw (zacht) */
  --sh-xs:0 1px 2px rgba(28,35,51,.06);
  --sh-sm:0 4px 14px rgba(28,35,51,.07);
  --sh:0 10px 30px rgba(28,35,51,.09);
  --sh-lg:0 20px 50px rgba(28,35,51,.13);
  --sh-accent:0 10px 24px rgba(232,93,36,.28);

  /* Layout */
  --wrap:1200px;
  --gap:clamp(1rem,3vw,2rem);
  --header-h:74px;
  --ease:cubic-bezier(.22,.61,.36,1);

  /* Legacy-aliassen — oude paginatokens mappen naar canonieke rol */
  --brand-primary:#E85D24;
  --brand-primary-dark:#C24A18;
  --brand-primary-rgb:232,93,36;
  --brand-secondary:#1C2333;
  --brand-accent:#E85D24;
}

/* ---------- Basis-typografie (backstop; pagina's houden eigen layout) ---------- */
body{
  font-family:var(--font);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:var(--font)}

/* ---------- Animerend merk-woordmerk (gedeeld) ---------- */
.brand-name{background:var(--brand-grad);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:keBrandFlow 6s linear infinite;font-weight:900}
@keyframes keBrandFlow{to{background-position:300% 50%}}
@media(prefers-reduced-motion:reduce){.brand-name{animation:none}}