:root {

  --clr-base:#4a8644;
  --clr-site-logo:#4a8644;

  --clr-body-bg:hsl(34, 63%, 90%);
  --clr-body-color: #515151;

  --clr-lightgray:hsl(228, 12%, 68%);

  /* intro */
  --clr-section-intro-before-bg-linear:linear-gradient(to top, hsl(120 100% 25% / .4), hsl(0 100% 15% / .6));
  --clr-section-intro-text-white:white;
  --clr-section-intro-after-bg-white:white;
  --clr-section-intro-logo-light:var(--clr-base);

  /* typewriter */
  --gray-80: #515151;
  --clr-typewriter-text:hsl(34, 63%, 55%);
  --clr-typewriter-cursor:var(--clr-base);
  --svg-arrow-down:var(--gray-80);

  /* carousel-product */
  --product-clr-primary-400: hsl(158, 36%, 37%);
  --product-clr-primary-500: hsl(158, 36%, 20%);
  --product-clr-secondary-200: hsl(30, 38%, 92%);

  --product-clr-neutral-900: hsl(212, 21%, 14%);
  --product-clr-neutral-400: hsl(228, 12%, 48%);
  --product-clr-neutral-100: hsl(0, 0%, 100%);

  --product-ff-accent: "Fraunces", serif;
  --product-ff-base: "Montserrat", sans-serif;

  --product-fw-regular: 500;
  --product-fw-bold: 700;

  --clr-carousel-indicator-bg:rgba(0, 0, 0,.3);
  --clr-carousel-indicator-current-bg:rgba(0, 0, 0,.85);
  --clr-product-border:black;
  --clr-product-bg:var(--product-clr-neutral-100);
  --clr-carousel-arrow:hsl(0, 0%, 5%);
  --clr-product-button-anim:black;

  --clr-scrollbar:black;

  /* fade-slide */
  --clr-fade-card-shadow-white:white;
  --clr-fade-card-shadow-black:black;
  --clr-btn--light-bg:hsl(34, 63%, 80%);
  --clr-btn--light-text:#414A4D;
  --clr-btn--dark-bg:#414A4D;
  --clr-btn--dark-text:hsl(34, 63%, 80%);
  --clr-btn--outline-text:#414A4D;
  --clr-card--dark-bg:#414A4D;
  --clr-card--dark-text:#A3B9BF;
  --clr-dark-section__title-text:white;
  --clr-section__title-text:#414A4D;
  --clr-card--light-bg:white;
  --clr-section__subtitle-text:#A3B9BF;

  /* footer */
  --clr-footer-copyright-a-tag:var(--clr-base);
  --clr-footer:var(--clr-base);

  --clr-footer-border:black;
  --clr-footer-hr:black;
  --clr-footer-linkme:blue;

  /*  */
  /* --clr-nav-overlay:#00001a; */
  --clr-nav-overlay:black;
  --clr-nav-link-hover:var(--clr-base);
  --clr-toggle-bg:hsl(0, 0%, 97%);
  --clr-svg-toggle-btn:black;
  --clr-nav-bg:var(--clr-body-bg);
  --clr-nav-shadow:black;
  --clr-hamburger-fill:#00001a;

  /* navbar */
  --c-white:#fffdfa;
  --c-blue:#00001a;
  --clr-nav-icons:#515151;

  /*h tag font-size min 40px, max 56px; viewport min 320px, max 1440px*/
  --Hstep--2: clamp(1.7361rem, 1.5921rem + 0.7198vw, 2.24rem);
  --Hstep--1: clamp(2.0833rem, 1.8786rem + 1.0238vw, 2.8rem);
  --Hstep-0: clamp(2.5rem, 2.2143rem + 1.4286vw, 3.5rem);
  --Hstep-1: clamp(3rem, 2.6071rem + 1.9643vw, 4.375rem);
  --Hstep-2: clamp(3.6rem, 3.0661rem + 2.6696vw, 5.4688rem);
  --Hstep-3: clamp(4.32rem, 3.6012rem + 3.5942vw, 6.8359rem);
  --Hstep-4: clamp(5.184rem, 4.2237rem + 4.8013vw, 8.5449rem);
  --Hstep-5: clamp(6.2208rem, 4.9464rem + 6.3719vw, 10.6812rem);
  /*p tag font-size min 14px max 28px; viewport min 320px, max 1440px*/
  --Pstep--2: clamp(0.6076rem, 0.4613rem + 0.7319vw, 1.12rem);
  --Pstep--1: clamp(0.7292rem, 0.5375rem + 0.9583vw, 1.4rem);
  --Pstep-0: clamp(0.875rem, 0.625rem + 1.25vw, 1.75rem);
  --Pstep-1: clamp(1.05rem, 0.725rem + 1.625vw, 2.1875rem);
  --Pstep-2: clamp(1.26rem, 0.8388rem + 2.1063vw, 2.7344rem);
  --Pstep-3: clamp(1.512rem, 0.9674rem + 2.7228vw, 3.418rem);
  --Pstep-4: clamp(1.8144rem, 1.1121rem + 3.5115vw, 4.2725rem);
  --Pstep-5: clamp(2.1773rem, 1.2735rem + 4.519vw, 5.3406rem);
  --f-xl:clamp(2.5rem, 2.2143rem + 1.4286vw, 3.5rem);
  --f-l: clamp(2rem, 1.8571rem + 0.7143vw, 2.5rem);
  --f-m:2rem;
  --f-s:1.25rem;
  --f-xs:1.125rem;
  --f-body:0.9375rem;

  --clr-footer-underline-span-bg:black;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* navbar */
    --clr-hamburger-fill:hsl(34, 63%, 80%);
    --clr-nav-bg:black;
    --clr-nav-shadow:hsl(34, 63%, 70%);
    --clr-toggle-bg:hsl(0, 0%, 20%);
    --clr-svg-toggle-btn:white;
    --clr-nav-overlay:hsl(34, 63%, 80%);

    --product-clr-neutral-400:var(--clr-lightgray);

    --clr-body-bg:black;
    --clr-body-color:hsl(0, 0%, 72%);
    
    --clr-section-intro-text-white:hsl(0, 0%, 5%);
    --clr-typewriter-text:hsl(34, 63%, 60%);
    --svg-arrow-down:hsl(120, 100%, 45%);
    --clr-carousel-indicator-bg:hsl(0, 0%, 62%);
    --clr-carousel-indicator-current-bg:hsl(0, 0%, 92%);
    --clr-product-border:hsl(34, 63%, 80%);
    --clr-product-bg:black;
    --clr-carousel-arrow:hsl(0, 0%, 55%);
    --clr-product-button-anim:hsl(34, 63%, 90%);
    --clr-scrollbar:hsl(34, 63%, 90%);

    --clr-footer-border:hsl(34 63% 80%);

    --clr-footer-underline-span-bg:hsl(34 63% 80%);

    --clr-nav-icons:hsl(34, 63%, 90%);   

  }
  .hamburger-rect{
    fill: var(--clr-hamburger-fill);
  }
}

.light-theme{
  /* navbar */
  --clr-hamburger-fill:#00001a;
  --clr-nav-bg:var(--clr-body-bg);
  --clr-nav-shadow:black;
  --clr-toggle-bg:hsl(0, 0%, 97%);
  --clr-svg-toggle-btn:black;
  --clr-nav-overlay:black;

  --c-white:#fffdfa;
  --c-blue:#00001a;
  --c-gray:#5e607a;
  --product-clr-neutral-400:var(--clr-lightgray);
  --clr-section-intro-text-white:white;
  --svg-arrow-down:var(--gray-80);
  
  --clr-body-bg:hsl(34, 63%, 90%);
  --clr-body-color:#515151;
  
  --clr-product-bg:var(--product-clr-neutral-100);
  --clr-carousel-indicator-bg:rgba(0, 0, 0,.3);
  --clr-carousel-indicator-current-bg:rgba(0, 0, 0,.85);
  --clr-product-border:black;
  --clr-product-bg:hsl(34, 63%, 90%);
  --clr-carousel-arrow:hsl(0, 0%, 5%);
  --clr-product-button-anim:black;

  --clr-scrollbar:black;

  --clr-footer-border:black;
  --clr-footer-hr:black;
  --clr-footer-linkme:blue;

  --clr-footer-underline-span-bg:black;

  --clr-nav-icons:#515151;

  .hamburger-rect{
    fill: var(--clr-hamburger-fill);
  }
}

.dark-theme{
  /* navbar */
  --clr-hamburger-fill:hsl(34, 63%, 80%);
  --clr-nav-bg:black;
  --clr-nav-shadow:hsl(34, 63%, 70%);
  --clr-toggle-bg:hsl(0, 0%, 20%);
  --clr-svg-toggle-btn:white;
  --clr-nav-overlay:hsl(34, 63%, 80%);

  --product-clr-neutral-400:var(--clr-lightgray);

  .hamburger-rect{
    fill: var(--clr-hamburger-fill);
  }


  --clr-section-intro-text-white:hsl(0, 0%, 5%);
  --clr-typewriter-text:hsl(34, 63%, 60%);
  --svg-arrow-down:hsl(120, 100%, 45%);

  --clr-carousel-indicator-bg:hsl(0, 0%, 62%);
  --clr-carousel-indicator-current-bg:hsl(34, 63%, 80%);
  --clr-product-border:hsl(34, 63%, 80%);
  --clr-product-bg:black;
  --clr-carousel-arrow:hsl(34, 63%, 80%);
  --clr-product-button-anim:hsl(34, 63%, 90%);

  --clr-scrollbar:hsl(34, 63%, 90%);
  
  --clr-body-bg:black;
  --clr-body-color:hsl(0, 0%, 72%);

  --clr-footer-border:hsl(34 63% 80%);
  --clr-footer-hr:hsl(34 63% 80%);
  --clr-footer-linkme:hsl(248, 39%, 59%);

  --clr-footer-underline-span-bg:hsl(34 63% 80%);

  --clr-nav-icons:hsl(34, 63%, 80%);

}