/* ============================================
   Design tokens — overgenomen uit de Elementor-kit van forwardx.nl (post-6.css)
   en gecontroleerd tegen de berekende stijlen in capture/live.
   ============================================ */
:root {
  /* Kleuren (kit: primary, secondary, text, accent, 183afd9, 4acebbe, c56e072) */
  --color-primary: #000516;        /* kit primary — donkerblauw, header/hero/footer */
  --color-white: #ffffff;          /* kit secondary */
  --color-text: #111111;           /* kit text — links, bodytekst in lichte secties */
  --color-accent: #ee8331;         /* kit accent — oranje */
  --color-accent-hover: #d4731f;   /* hover van oranje knoppen (post-1376/post-522) */
  --color-cream: #f5f4ef;          /* kit 183afd9 — lichte sectie-achtergrond */
  --color-light: #f6f6f8;          /* kit 4acebbe */
  --color-grey: #888888;           /* kit c56e072 — footer-lijn, meta */
  --color-footer-link: #c8c8c8;    /* footer-menu (post-1886) */

  /* Fonts */
  --font-heading: "Red Hat Display", sans-serif;
  --font-ui: "Poppins", sans-serif;
  --font-body: "Inter", sans-serif;

  /* Typografie-rollen uit de kit (desktop; mobiel in global.css) */
  --h-primary-size: 65px;   --h-primary-lh: 1.08em;           /* kit primary, 800 */
  --h-secondary-size: 44px; --h-secondary-lh: 1.12em;         /* kit secondary, 900, ls -0.9px */
  --h-text-size: 28px;      --h-text-lh: 1.2em;               /* kit text, 700 */
  --h-accent-size: 22px;    --h-accent-lh: 1.2em;             /* kit accent, 700 */
  --ui-lg-size: 18px;       --ui-lg-lh: 1.4em;                /* kit 767c423, Poppins 600 */
  --ui-size: 16px;          --ui-lh: 1.4em;                   /* kit 8d53b9a, Poppins 600 (knoppen) */
  --body-size: 16px;        --body-lh: 1.7em;                 /* kit d5dda32, Poppins 400 */

  /* Layout */
  --container: 1240px;      /* kit: container max-width (≤1024: 1024px, ≤767: 100%) */
  --widget-gap: 14px;       /* kit: --widgets-spacing */
  --header-height: 80px;    /* post-1376: min-height 80px (mobiel 50px) */

  /* Vormen */
  --radius-btn: 7px;        /* kit button radius */
  --radius-img: 12px;       /* kit: img border-radius */

  /* Overgangen — zoals Elementor: 0.3s voor knoppen/kleur, 0.4s transform */
  --t-color: 0.3s;
  --t-transform: 0.4s;
}

@media (max-width: 767px) {
  :root {
    --h-primary-size: 36px;   --h-primary-lh: 1.08em;
    --h-secondary-size: 32px; --h-secondary-lh: 1.12em;
    --h-text-size: 22px;      --h-text-lh: 1.12em;
    --h-accent-size: 18px;    --h-accent-lh: 1.12em;
    --ui-lg-size: 17px;
    --ui-size: 15px;
    --body-size: 16px;        --body-lh: 1.2em;
    --header-height: 50px;
  }
}