/* ==========================================================================
   Polyflor — design tokens
   Colour and type come from the Elementor kit (.elementor-kit-284).
   Change values here, nowhere else.
   ========================================================================== */

:root {
  /* ---- Colour ------------------------------------------------------- */
  --c-green:        #006633;
  --c-green-dark:   #004d26;
  --c-red:          #DC2F33;
  --c-black:        #000000;
  --c-white:        #FFFFFF;

  --c-grey-card:    #ededed;
  --c-grey-bar:     #dcdcdc;
  --c-grey-table:   #e8e8e8;
  --c-grey-line:    #d4d4d4;
  --c-grey-text:    #6b6b6b;

  /* ---- Type --------------------------------------------------------- */
  --font-body: "Overpass", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, Helvetica, Arial, sans-serif;

  --t-display-size:    50px;
  --t-display-weight:  700;
  --t-display-lh:      1.2em;

  --t-heading-size:    36px;
  --t-heading-weight:  600;
  --t-heading-lh:      1.1em;

  --t-body-size:       16px;
  --t-body-weight:     400;
  --t-body-lh:         1.5em;

  --t-btn-size:        16px;
  --t-btn-weight:      700;
  --t-btn-lh:          1em;

  /* ---- Layout ------------------------------------------------------- */
  --page-inset:        32px;
  --container-max:     1180px;
  --gutter:            24px;
  --section-space:     100px;
  --radius:            3px;

  --logo-height:       64px;   /* header logo */
  --banner-tall:       450px;  /* home + category banners */
  --banner-short:      250px;  /* range page banners */

  /* ---- Motion ------------------------------------------------------- */
  --ease:              cubic-bezier(0.2, 0, 0.2, 1);
  --speed:             0.2s;
}

@media (max-width: 1024px) {
  :root {
    --t-display-size: 45px;
    --t-heading-size: 25px;
    --t-body-size:    14px;
    --t-btn-size:     14px;
    --page-inset:     20px;
    --logo-height:    50px;
    --banner-tall:    380px;
  }
}

@media (max-width: 767px) {
  :root {
    --t-display-size: 28px;
    --t-display-lh:   1.1em;
    --t-heading-size: 20px;
    --section-space:  70px;
    --page-inset:     12px;
    --gutter:         18px;
    --logo-height:    42px;
    --banner-tall:    300px;
    --banner-short:   200px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --speed: 0.001s; }
}