/* ============================================
   Design tokens — Top Gevelbekleding
   Herkomst: Elementor-kit 12 (post-12.css) van topgevelbekleding.nl,
   gecontroleerd tegen de berekende stijlen in capture/live.
   ============================================ */

:root {
  /* Kleuren (kit: global colors) */
  --color-primary: #4B4E50;     /* e-global-color-primary: header, donkere secties, koppen */
  --color-white: #FFFFFF;       /* e-global-color-secondary */
  --color-text: #000000;        /* e-global-color-text */
  --color-accent: #FEBD17;      /* e-global-color-accent: gele knoppen */
  --color-grey: #A4A4A4;        /* e-global-color-1b957de */
  --color-mist: #F3F3F382;      /* e-global-color-36d7883: lichte vlakken, menu-hover */
  --color-copper: #CA895F;      /* e-global-color-d63c7c3: koperen knoppen, actief menu-item */
  --color-body: #333333;        /* Hello Elementor body-tekst */
  --color-footer-bg: #F2F2F2;   /* footer onderbalk */
  --color-footer-meta: #54595F; /* KVK/BTW-tekst footer */
  --color-rule: #DDDDDD;        /* scheidingslijnen in icoonlijsten */

  /* Fonts */
  --font-main: "Montserrat", sans-serif;
  --font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

  /* Typografie-rollen (kit: global typography) */
  --fs-primary: 56px;   --fw-primary: 700; --ls-primary: 0.2px;   /* primary */
  --fs-secondary: 28px; --fw-secondary: 600;                      /* secondary (mobiel 24px) */
  --fs-text: 16px;      --fw-text: 400;                           /* text */
  --fs-accent: 15px;    --fw-accent: 600;                         /* accent, uppercase (mobiel 12px) */
  --fs-lead: 22px;      --fw-lead: 600;                           /* 93d86d7 */
  --fs-kicker: 20px;    --fw-kicker: 400;                         /* 05603a1, uppercase */
  --fs-title: 38px;     --fw-title: 600;                          /* 23321c3 (mobiel 30px) */
  --fs-sub: 16px;       --fw-sub: 600;                            /* ad931b1 (mobiel 22px) */

  /* Container (kit: content width) */
  --container: 1120px;
  --widget-gap: 20px;

  /* Overgangen (gemeten op het origineel) */
  --t-button: 0.2s;
  --t-color: 0.3s;
  --radius: 5px;

  /* Breekpunten (ter referentie; mediaqueries kunnen geen variabelen gebruiken)
     mobiel ≤767 · mobiel-extra ≤880 · tablet ≤1024 · tablet-extra ≤1200 · laptop ≤1366 · breedbeeld ≥2400 */
}

@media (max-width: 1024px) {
  :root { --container: 1024px; }
}

@media (max-width: 767px) {
  :root {
    --container: 767px;
    --fs-secondary: 24px;
    --fs-accent: 12px;
    --fs-title: 30px;
    --fs-sub: 22px;
  }
}