/* ============================================================
   Zenith Web Solutions — Design Tokens
   Bron: live site (Webflow + Relume framework), geëxtraheerd 2026-06-02
   Gebruik deze variabelen voor opt-in, funnels en homepage-migratie.
   ============================================================ */

:root {
  /* --- Merkkleuren --- */
  --brand-blauw: #4175fc;        /* primair accent: knoppen, links, logo */
  --brand-licht-blauw: #d9e3fe;  /* zachte highlight / achtergrondvlakken */
  --brand-black: #03060d;        /* primaire tekst / koppen (bijna-zwart) */
  --brand-white: #ffffff;

  /* --- Achtergronden --- */
  --bg-primary: #ffffff;         /* standaard pagina-achtergrond */
  --bg-secondary: #fbfcff;       /* subtiel off-white sectievlak */
  --bg-alternate: #0f1439;       /* donkere navy sectie (dark mode blok) */

  /* --- Tekstkleuren --- */
  --text-primary: #0D1732;              /* koppen */
  --text-body: #3D455B;                 /* lopende tekst (body default) */
  --text-secondary: var(--brand-blauw); /* accent-tekst / links */
  --text-alternate: #ffffff;            /* tekst op donkere achtergrond */
  --text-grey: #444444;

  /* --- Neutralen --- */
  --neutral-darkest: #111111;
  --neutral-darker: #222222;
  --neutral-dark: #444444;
  --neutral: #666666;
  --neutral-light: #aaaaaa;
  --neutral-lighter: #cccccc;
  --neutral-lightest: #eeeeee;

  /* --- Systeem / feedback --- */
  --success: #027a48;
  --success-light: #ecfdf3;
  --error: #b42318;
  --error-light: #fef3f2;

  /* --- Typografie --- */
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-heading: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;   /* koppen + knoppen gebruiken 600 */

  /* --- Border radius --- */
  --radius-button: 8px;   /* primaire knoppen */
  --radius-card: 12px;    /* kaarten / grotere blokken */
  --radius-input: 8px;    /* formuliervelden (gelijk aan knop) */
  --radius-pill: 100px;   /* badges / pills */
  --radius-small: 3px;    /* kleine elementen / tags */

  /* --- Borders --- */
  --border-width: 1px;
  --border-primary: var(--brand-black);
  --border-secondary: var(--neutral-light);
}

/* ============================================================
   Basiscomponenten — afgeleid van de live site
   ============================================================ */

body {
  font-family: var(--font-body);
  color: var(--text-body);
  background-color: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--text-primary);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  margin: 0;
}
h1 { font-size: 3.5rem; }   /* ~56px desktop */
h2 { font-size: 2.75rem; }  /* ~44px */
h3 { font-size: 2.5rem; }
h4 { font-size: 1.75rem; }
h5 { font-size: 1.5rem; line-height: 1.4; }
h6 { font-size: 1.125rem; }

/* Primaire knop */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 1px solid var(--brand-blauw);
  background-color: var(--brand-blauw);
  color: var(--brand-white);
  font-weight: var(--fw-semibold);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border-radius: var(--radius-button);
  padding: 0.75rem 1.5rem;
}
.button.is-small      { padding: 0.5rem 1.25rem; }
.button.is-secondary  { background: transparent; color: var(--brand-black); }      /* outline-achtig */
.button.is-tertiary   { background: transparent; color: var(--brand-blauw); border-color: transparent; }
.button.is-alternate  { background: var(--brand-white); color: var(--brand-blauw); border-color: var(--brand-white); } /* op donkere achtergrond */

/* Formulier-input (footer newsletter referentie) */
.form-input {
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-input);
  padding: 0.75rem 1rem;
  font-family: var(--font-body);
  font-size: 1rem;
}
.form-input:focus {
  border-color: var(--brand-blauw);
  outline: none;
}