/* ==========================================================================
   Design tokens — Steenhouwerij Breti
   Afgeleid van de oorspronkelijke thema-instellingen (kleuren, typografie,
   maten). Eén bron van waarheid voor de hele site.
   ========================================================================== */
:root {
  /* Kleuren — content */
  --c-bg:            #ffffff;
  --c-bg-alt:        #f5f5f5;
  --c-text:          #66525f;
  --c-heading:       #442b3d;
  --c-link:          #f4a641;
  --c-link-hover:    #921245;
  --c-primary:       #f4a641;
  --c-secondary:     #921245;
  --c-faded:         #b39fac;
  --c-border:        #ebe6e9;
  --c-overlay:       rgba(68,43,61,.85);

  /* Kleuren — alternatief kleurenschema */
  --c-alt-bg:        #f3f1ec;
  --c-alt-border:    #ded9dc;

  /* Kleuren — header */
  --hdr-top-bg:      #000000;
  --hdr-top-text:    #ffffff;
  --hdr-mid-bg:      linear-gradient(90deg, #f7f5f2 0%, #efeae4 50%, #f7f5f2 100%);
  --hdr-mid-text:    #333333;
  --hdr-mid-hover:   #c77b18;
  --hdr-bot-bg:      #5e5e5e;
  --hdr-bot-text:    #ffffff;

  /* Kleuren — footer */
  --ftr-cta-bg:      #e09900;
  --ftr-bg:          #1a1a1a;
  --ftr-text:        #b8a5b2;
  --ftr-link:        #f4a641;
  --ftr-link-hover:  #ffffff;

  /* Knoppen */
  --btn1-bg:         #c77b18;
  --btn1-bg-hover:   #de8616;
  --btn1-text:       #1a1a1a;
  --btn1-shadow:     #d6923a;
  --btn8-bg:         #4b7353;
  --btn8-bg-hover:   #3c5e43;
  --btn8-text:       #ffffff;
  --btn8-shadow:     #3c5e43;

  /* Typografie */
  --font-body:       Roboto, sans-serif;
  --font-heading:    Alata, sans-serif;
  --fs-body:         18px;
  --lh-body:         30px;
  --fs-h1:           2.6rem;
  --fs-h2:           1.8rem;
  --fs-h3:           1.5rem;
  --fs-h4:           1.4rem;
  --fs-h5:           1.4rem;
  --fs-h6:           1.3rem;

  /* Layout */
  --content-width:   1200px;
  --canvas-width:    1300px;
  --cols-gap:        3rem;
  --radius:          0.3rem;
  --shadow:          0 5px 15px rgba(0,0,0,.15);

  /* Secties */
  --sec-s:           2rem;
  --sec-m:           4rem;
  --sec-l:           6rem;

  /* Breekpunten (ter referentie in media queries):
     laptops ≤1280px · tablets ≤1024px · mobiel ≤600px · kolommen stapelen ≤768px */
}
@media (max-width: 600px) {
  :root { --fs-body: 17px; --lh-body: 28px; }
}