/* ============================================================
   DE ZONNEGLOED — CUSTOM CSS
   Breakpoints:
     Mobile:  0 – 767px
     Tablet:  768px – 1024px
     Desktop: > 1024px
   ============================================================ */

/* ============================================================
   CSS CUSTOM PROPERTIES
   Centrale plek voor kleuren en font-sizes.
   ============================================================ */
:root {
  /* Kleuren */
  --dz-black:           #000000;
  --dz-green-dark:      #30411f;
  --dz-moss-green-light:#49593a;
  --dz-yellow:          #f3bb21;
  --dz-ocher-light:     #b5903d;
  --dz-white:           #ffffff;
  --dz-beige:           #f5f2e5;
  --dz-cream:           #faf9f4;
  --dz-off-white:       #fafafa;
  --dz-grey-light:      #a6a6a6;

  --dz-green-available: #7f8d5a;
  --dz-red-unavailable: #b4530a;
  --dz-error-bg:        #92400d;
  --dz-error-text:      #fffbeb;
  --dz-warning-bg:      #fffbeb;
  --dz-warning-text:    #92400d;

  /* Font-sizes */
  --dz-fs-title:          32px;
  --dz-fs-subtitle:       20px;
  --dz-fs-label-lg:       19px;
  --dz-fs-label-sm:       14px;
  --dz-fs-body:           18px;
  --dz-fs-fine-print:     14px;

  --dz-fs-btn-sm:         15px;
  --dz-fs-btn-md:         20px;
  
  --dz-fs-highlight-sm:   20px;
  --dz-fs-highlight-md:   28px;
  --dz-fs-highlight-xl:   48px;

  --dz-fs-calendar-h:     24px;
  --dz-fs-calendar-d:     17px;
  --dz-fs-calendar-h-btn: 42px;
}

/* ============================================================
   RESPONSIVE — TABLET  (768px – 1024px)
   ============================================================ */
@media (min-width: 768px) and (max-width: 1024px) {
  :root {
     /* small fonts stay the same */
    --dz-fs-title:          26px;
    --dz-fs-subtitle:       18px;
    --dz-fs-label:          17px;
    --dz-fs-body:           17px;
    --dz-fs-fine-print:     14px;

    --dz-fs-btn-sm:         17px;
    --dz-fs-btn-md:         18px;

    --dz-fs-highlight-sm:   18px;
    --dz-fs-highlight-md:   22px;
    --dz-fs-highlight-xl:   36px;

    --dz-fs-calendar-h:     18px;
    --dz-fs-calendar-d:     16px;
    --dz-fs-calendar-h-btn: 30px;
  }
}

/* ============================================================
   RESPONSIVE — MOBILE  (0 – 767px)
   ============================================================ */
@media (max-width: 767px) {
  :root {
    /* small fonts stay the same */
    --dz-fs-title:          22px;
    --dz-fs-subtitle:       16px;
    --dz-fs-label:          16px;
    --dz-fs-body:           16px;
    --dz-fs-fine-print:     14px;

    --dz-fs-btn-sm:         16px;
    --dz-fs-btn-md:         17px;

    --dz-fs-highlight-sm:   16px;
    --dz-fs-highlight-md:   18px;
    --dz-fs-highlight-xl:   28px;

    --dz-fs-calendar-h:     16px;
    --dz-fs-calendar-d:     15px;
    --dz-fs-calendar-h-btn: 24px;
  }
}