/* ==========================================================================
   Revo Nutri — Design Tokens · v1.0
   Base: design system do site Iceberg (tokens-site.css), adaptado para a
   identidade da Revo Nutri. Troca de cores aplicada:
     #FFAA00 → #FFCB63 (gold, primária)     #BFECF9 → #FAE7C0 (gold light)
     #DDECFD → #FCF2DC (gold mist)          #44B0F9 → #FFAA00 (amber)
     #93C2F5 → #F5D493 (gold marquee)       #E243EB → #C743EB (badge hot)
   Escala base: 1rem = 10px (valores já em px)
   ========================================================================== */
/* ---------- Fontes ---------- */
@font-face { font-family: "Poppins"; font-weight: 400; font-style: normal; font-display: swap; src: url("assets/fonts/poppins-400.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 400; font-style: italic; font-display: swap; src: url("assets/fonts/poppins-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 500; font-style: normal; font-display: swap; src: url("assets/fonts/poppins-500.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 500; font-style: italic; font-display: swap; src: url("assets/fonts/poppins-500-italic.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-style: normal; font-display: swap; src: url("assets/fonts/poppins-600.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-style: normal; font-display: swap; src: url("assets/fonts/poppins-700.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-style: italic; font-display: swap; src: url("assets/fonts/poppins-700-italic.woff2") format("woff2"); }
@font-face { font-family: "Oswald";  font-weight: 600; font-style: normal; font-display: swap; src: url("assets/fonts/oswald-600.woff2") format("woff2"); }
@font-face { font-family: "Oswald";  font-weight: 700; font-style: normal; font-display: swap; src: url("assets/fonts/oswald-700.woff2") format("woff2"); }

:root {
  /* ======================= PALETA BASE ======================= */
  --revo-black:        #000000;
  --revo-white:        #FFFFFF;
  --revo-gold:         #FFCB63; /* cor da marca: hover de botão, estrelas, acentos */
  --revo-gold-light:   #FAE7C0; /* botão secundário, botão "Filter" */
  --revo-gold-mist:    #FCF2DC; /* camada ::before do botão */
  --revo-amber:        #FFAA00; /* tags de benefício no card e tag do menu */
  --revo-gold-marquee: #F5D493; /* 2º item da barra de anúncio */
  --revo-gray-50:      #F5F5F5; /* campos; fundo do scheme-3 */
  --revo-gray-75:      #F7F7F7; /* borda/fundo secundário do scheme-3 */
  --revo-gray-100:     #F4F4F4; /* fundo do scheme-2 (cards, showcase, bundles) */
  --revo-gray-150:     #E5E5E5; /* trilho da barra de frete grátis (drawer) */
  --revo-gray-200:     #E6E6E6; /* bordas */
  --revo-gray-250:     #EEEEEE; /* divisor de avaliações (Judge.me) */
  --revo-gray-300:     #CFCFCF; /* variante desabilitada, divisores */
  --revo-gray-400:     #CCCCCC; /* trilho do slider de preço */
  --revo-gray-500:     #999999; /* texto muted em fundo escuro, valores auxiliares */
  --revo-gray-600:     #666666; /* texto secundário, preço riscado */
  --revo-gray-800:     #333333; /* texto do avatar de review */
  --revo-gray-900:     #282828; /* hover escuro (scheme-2) */
  --revo-red:          #D63A2F; /* preço promocional em fundo escuro */
  --revo-danger:       #BC1818;

  /* ---------- Badges ---------- */
  --color-badge-sale:          #BAF4A9; /* verde-menta */
  --color-badge-sale-text:     #000000;
  --color-badge-new:           #BAF4A9;
  --color-badge-new-text:      #000000;
  --color-badge-soldout:       #FF9968;
  --color-badge-soldout-text:  #000000;
  --color-badge-hot:           #C743EB;
  --color-badge-hot-text:      #000000;

  /* ---------- Feedback / status ---------- */
  --color-success:        #0C5132;
  --color-success-bg:     #CDFEE1;
  --color-error:          #8E1F0B;
  --color-error-bg:       #FEE9E8;
  --color-warning:        #5E4200;
  --color-warning-bg:     #FFF1E3;
  --color-in-stock:       #10A443; /* ponto pulsante de estoque */
  --color-focus-ring:     #0B61CD; /* outline de foco via teclado (2px, offset 3px) */

  /* ---------- Semânticos (esquema padrão / color-scheme-1) ---------- */
  --color-background:            var(--revo-white);
  --color-foreground:            var(--revo-black);
  --color-text-heading:          var(--revo-black);
  --color-text-muted:            var(--revo-gray-600);
  --color-text-subtext:          rgba(0,0,0,.69); /* contagens de filtro, "Clear" */
  --color-text-meta:             rgba(0,0,0,.60); /* tipo de produto, "voltar" do menu */
  --color-primary:               var(--revo-gold);
  --color-border:                rgb(230,230,230);
  --color-field:                 var(--revo-gray-50);
  --color-button:                var(--revo-black);
  --color-button-text:           var(--revo-white);
  --color-button-hover-bg:       var(--revo-gold);
  --color-button-hover-text:     var(--revo-black);
  --color-button-before:         var(--revo-gold-mist);
  --color-secondary-button:      var(--revo-gold-light);
  --color-secondary-button-text: var(--revo-black);
  --color-star:                  var(--revo-gold);
  --color-cart-bubble:           var(--revo-gold);   /* preto dentro do cart drawer */
  --color-overlay:               rgba(0,0,0,.5);   /* drawers (0.3 quando aninhado) */
  --color-rule:                  rgba(0,0,0,.2);   /* hr, bordas de tabela, blockquote */

  /* ======================= TIPOGRAFIA ======================= */
  --font-heading: "Oswald", sans-serif;
  --font-body:    "Poppins", sans-serif;

  --font-body-size: 13px;
  --font-body-line-height: 1.55;
  --font-body-weight: 400;
  --font-body-weight-bolder: 500;
  --font-body-weight-bold: 700;
  --font-heading-weight: 600;
  --font-nav-weight: 600;
  --font-subheading-weight: 600;

  /* Desktop (≥1024). Tablet (768–1023) ×0.7 · Mobile (<768) ×0.8 · h5/h6 fixos */
  --font-hd1: 50px;
  --font-hd2: 40px;
  --font-hd3: 30px;
  --font-h1:  40px;
  --font-h2:  32px;
  --font-h3:  28px;
  --font-h4:  22px;
  --font-h5:  18px;
  --font-h6:  16px;
  --font-text-lg: 15.6px;  /* line-height 30px · .text-lg */
  --font-text-sm: 11.7px;  /* line-height 22px · .text-sm, datas, badges */
  --font-pcard-title: 19.5px;
  --font-price-large: 22px; /* preço na página de produto (Poppins 700) */
  --font-tag: 12px;         /* tags do card, Poppins 600, letter-spacing .5px */
  --font-menu-tag: 10px;    /* tag do menu, Poppins 600, UPPERCASE */

  /* ======================= BOTÕES ======================= */
  --button-height: 48px;
  --button-height-xs: 32px;
  --button-height-sm: 40px;
  --button-height-md: 50px;
  --button-height-lg: 54px;
  --button-padding-x: 40px;
  --button-radius: 24px;
  --button-border-width: 1px;
  --button-font: var(--font-heading);
  --button-weight: 700;
  --button-letter-spacing: 0.1em;
  --button-transform: uppercase;

  /* ======================= FORMULÁRIOS ======================= */
  --input-height: 48px;
  --input-padding-x: 16px;
  --input-bg: var(--revo-gray-50);
  --input-border: var(--revo-gray-200);
  --input-placeholder: rgba(0,0,0,.5);
  --textarea-min-height: 180px;  /* 80px no mobile */
  --checkbox-size: 18px;
  --quantity-width: 125px;       /* seletor da página de produto (48px de altura) */
  --quantity-cart-height: 38px;  /* seletor da linha do carrinho */
  --variant-pill-min: 48px;

  /* ======================= RAIOS ======================= */
  --radius-button: 24px;
  --radius-input: 24px;
  --radius-textarea: 16px;
  --radius-block: 20px;
  --radius-block-mobile: 16px;
  --radius-block-md: 10px;   /* thumbs de galeria, alertas, drawer/tooltip */
  --radius-block-sm: 6px;    /* pills de variante, thumb do carrinho */
  --radius-pcard: 20px;
  --radius-pcard-inner: 10px;
  --radius-badge: 5px;
  --radius-tag: 4px;
  --radius-checkbox: 3px;
  --radius-progress: 30px;

  /* ======================= SOMBRAS ======================= */
  --shadow-header-scrolled: 0 4px 18px rgba(0,0,0,.10);
  --shadow-sticky-atc:      0 0 10px rgba(0,0,0,.09);
  --shadow-mobile-bar:      -1px -2px 10px rgba(0,0,0,.08);
  --shadow-milestone:       0 2px 4px rgba(0,0,0,.15);
  --shadow-focus-field:     0 0 0 1px currentColor;

  /* ======================= LAYOUT ======================= */
  --page-width: 1440px;
  --page-padding-mobile: 15px;
  --page-padding-desktop: 50px;
  --page-padding-wide: 135px;
  --section-header-gap: 40px;
  --section-header-gap-mobile: 32px;
  --section-footer-gap: 40px;
  --reading-width-article: 990px;  /* painel do artigo */
  --reading-width-policy: 770px;
  --reading-width-form: 660px;
  --search-form-width: 650px;
  --drawer-width: 460px;
  --facet-width: clamp(300px, 18vw, 330px);
  --grid-gap-medium: 30px;         /* grid de coleção (mobile: 8px col / 30px row) */
  --grid-gap-large: 50px;
  --grid-gap-extra-large: 75px;    /* grid do blog (tablet 30px) */

  /* ---------- Espaçamento ---------- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-15: 60px; --space-19: 75px; --space-25: 100px;

  /* ---------- Alturas de hero ---------- */
  --hero-xs: 300px;  /* destaque do blog (225 mobile) */
  --hero-sm: 450px;
  --hero-md: 550px;  /* artigo, Why (412.5 mobile) */
  --hero-xm: 650px;
  --hero-lg: 800px;

  /* ======================= Z-INDEX ======================= */
  --z-sticky: 10; --z-mobile-bar: 11; --z-predictive: 11; --z-header: 20;
  --z-sticky-atc: 29; --z-drawer: 30; --z-loading: 50; --z-disclosure: 99;

  /* ======================= MOVIMENTO ======================= */
  --ease-default: cubic-bezier(.3, 1, .3, 1);
  --ease-nav:     cubic-bezier(.6, 0, .4, 1);
  --ease-fast:    cubic-bezier(.7, 0, .3, 1);
  --ease-drawer:  cubic-bezier(.7, 0, .2, 1);
  --ease-card:    cubic-bezier(.4, 0, .2, 1);
  --ease-menu:    cubic-bezier(.075, .82, .165, 1);
  --duration-default: 200ms;
  --duration-fast: 300ms;
  --duration-slow: 500ms;
  --duration-drawer: 600ms;
  --duration-overlay: 800ms;
  --duration-image: 1000ms;

  /* ---------- Breakpoints (referência) ---------- */
  --bp-sm: 640px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; --bp-xxl: 1410px; --bp-2xl: 1536px;
}

/* ======================= ESQUEMAS DE COR EM USO ======================= */
.scheme-light   { --color-background: #FFFFFF; --color-foreground: #000000; }               /* scheme-1: padrão de todas as páginas */
.scheme-gray    { --color-background: #F4F4F4; --color-foreground: #000000;                  /* scheme-2: cards, showcase, FAQ, coleção Bundles */
                  --color-button: #FFCB63; --color-button-hover-bg: #282828; --color-button-hover-text: #FFFFFF;
                  --color-secondary-button: #FFFFFF; --color-border: #FFFFFF; }
.scheme-soft    { --color-background: #F5F5F5; --color-foreground: #000000; --color-border: #F7F7F7; /* scheme-3: Why, Contato */
                  --color-button: #FFFFFF; --color-button-text: #000000;
                  --color-button-hover-bg: #000000; --color-button-hover-text: #FFFFFF; --color-button-before: #333333;
                  --color-secondary-button: #000000; --color-secondary-button-text: #FFFFFF; --color-field: #FFFFFF; }
.scheme-dark    { --color-background: #000000; --color-foreground: #FFFFFF;                  /* scheme-6: promo, multicoluna, marquee, lista de coleções */
                  --color-text-heading: #FFFFFF; --color-border: #FFFFFF; --color-text-muted: #999999;
                  --color-button-hover-bg: #FFFFFF; --color-button-hover-text: #000000;
                  --color-secondary-button: #FFCB63; --color-secondary-button-text: #FFFFFF; }
.scheme-form    { --color-background: #000000; --color-foreground: #FFFFFF; --color-text-heading: #FFFFFF; /* 50e8…: footer + formulário de contato */
                  --color-button: #000000; --color-button-text: #FFFFFF;
                  --color-button-hover-bg: #979AFF; --color-button-hover-text: #000000; --color-button-before: #FDFDFF; }
.scheme-overlay { --color-foreground: #FFFFFF; --color-text-heading: #FFFFFF; }               /* inverse: texto sobre hero/destaque do blog */
/* Definidos no tema e não aplicados: scheme-4 (#FAE7C0), scheme-7 (#FFCB63), scheme-8 (#EFDED9), scheme-9, d3c4… (#F6F6F6), f135… (#F3EEEA), 5330… (paleta de teste) */