/* As fontes vêm do next/font em layout.tsx; o @import do Google Fonts saiu. */

 

			
			
:root {
  
  
  
  
    
  
    
    
    
    
  
  --main-background: var(--off-white);
  --main-foreground: var(--tinta);

  --accent-color: var(--verde-agua);

  --button-background: var(--tinta);
  --button-foreground: var(--off-white);

  --label-background: var(--tinta);
  --label-foreground: var(--off-white);

  --label-shipping-background: var(--verde-agua);
  --label-shipping-foreground: var(--tinta);

  --stock-color: var(--tinta);

  
    
    
    
    
    
  
        
    
    
          
    
      
  --header-background: var(--off-white);
  --header-foreground: var(--tinta);

  --header-badge-background: var(--tinta);
  --header-badge-foreground: var(--off-white);

  --header-search-btn-background: var(--verde-agua-claro);
  --header-search-btn-foreground: var(--tinta);

  --header-desktop-utilities-background: var(--verde-agua-claro);
  --header-desktop-utilities-foreground: var(--tinta);

  --header-desktop-nav-background: var(--off-white);
  --header-desktop-nav-foreground: var(--tinta);
  
  --header-featured-link-foreground: var(--tinta);

  --primary-adbar-background: var(--tinta);
  --primary-adbar-foreground: var(--off-white);
  --secondary-adbar-background: var(--off-white);
  --secondary-adbar-foreground: var(--tinta);

  --footer-background: var(--off-white);
  --footer-foreground: var(--tinta-72);
  
  --banner-services-background: var(--off-white);
  --banner-services-foreground: var(--tinta);

  --institutional-background: var(--off-white);
  --institutional-foreground: var(--tinta);

  --video-background: ;
  --video-foreground: ;

  --timer-offers-background: ;
  --timer-offers-foreground: ;
  --timer-offers-module-background: ;
  --timer-offers-module-foreground: ;

  --newsletter-background: var(--off-white);
  --newsletter-foreground: var(--tinta);

  
  
                          
  --header-foreground-opacity-10: rgba(31, 35, 38, 0.1);
  --header-foreground-opacity-20: rgba(31, 35, 38, 0.2);
  --header-foreground-opacity-30: rgba(31, 35, 38, 0.3);
  --header-foreground-opacity-50: rgba(31, 35, 38, 0.5);

  --main-foreground-opacity-03: rgba(31, 35, 38, 0.03);
  --main-foreground-opacity-05: rgba(31, 35, 38, 0.05);
  --main-foreground-opacity-10: rgba(31, 35, 38, 0.1);
  --main-foreground-opacity-20: rgba(31, 35, 38, 0.2);
  --main-foreground-opacity-30: rgba(31, 35, 38, 0.3);
  --main-foreground-opacity-40: rgba(31, 35, 38, 0.4);
  --main-foreground-opacity-50: rgba(31, 35, 38, 0.5);
  --main-foreground-opacity-60: rgba(31, 35, 38, 0.6);

  --main-background-opacity-30: rgba(246, 243, 236, 0.3);
  --main-background-opacity-50: rgba(246, 243, 236, 0.5);
  --main-background-opacity-80: rgba(246, 243, 236, 0.8);

  --label-shipping-background-80: rgba(143, 211, 196, 0.8);

  --newsletter-foreground-opacity-50: rgba(31, 35, 38, 0.5);

  --footer-foreground-opacity-40: rgba(31, 35, 38, 0.29);
  --footer-foreground-opacity-60: rgba(31, 35, 38, 0.43);

  
  --success: var(--verde-agua-profundo); /* só borda: o texto do aviso é tinta (loja.css) */
  --danger: #9b2c24; /* exceção: vermelho de erro, o mesmo de loja.css; 7,6:1 no off-white */
  --warning: var(--cobre); /* só borda: o texto do aviso é tinta (loja.css) */

  
  
  --heading-font: "Archivo", sans-serif;
  --body-font: "IBM Plex Sans", sans-serif;

  
  
  --font-base: 16px;
  --font-base-default: 16px;

  
  --font-huge: 17px;
  --font-big: 16px;
  --font-medium: 14px;
  --font-small: 12px;
  --font-smallest: 10px;
  --font-extra-smallest: 9px;

  
  
  --h1: 48px;
  --h2: 40px;
  --h3: 33px;
  --h4: 28px;
  --h5: 23px;
  --h6: 19px;
  --h6-small: 16px;

  
  
  --title-font-weight: 700;

  
  
  --spacing-base: 16px;
  --spacing-half: calc(var(--spacing-base) / 2);
  --spacing-quarter: calc(var(--spacing-base) / 4);

  --spacing-1: calc(var(--spacing-base) * 0.25);
  --spacing-2: calc(var(--spacing-base) * 0.5);
  --spacing-3: var(--spacing-base);
  --spacing-4: calc(var(--spacing-base) * 1.5);
  --spacing-5: calc(var(--spacing-base) * 3);

  
  --gutter: var(--spacing-base);
  --gutter-container: var(--gutter);
  --gutter-container-md: calc(var(--gutter) * 2);
  --gutter-negative: calc(var(--gutter) * -1);
  --gutter-half: calc(var(--gutter) / 2);
  --gutter-half-negative: calc(var(--gutter) * -1 / 2);
  --gutter-double: calc(var(--gutter) * 2);

  
  
  --transition-fast: all 0.05s ease;
  --transition-normal: all 0.3s ease;
  --transition-slow: all 1s ease;

  
  --drop-shadow: 0 0 8px 4px var(--main-foreground-opacity-05);

  
  --border-radius: 8px;
  --border-radius-medium: calc(var(--border-radius) / 1.3333);
  --border-radius-small: calc(var(--border-radius) / 2);
  --border-radius-smallest: calc(var(--border-radius) / 4);
  --border-radius-full: 100%;

  
  --border-solid: 1px solid;

}