/* ============================================================
   TOKENS — paleta Bella Lu, tipografia fluida e grid.

   Estes sao os valores de fabrica do briefing de design. O painel de tema
   sobrescreve qualquer um deles com um bloco <style> injetado no <head>,
   entao NUNCA use um valor fixo nos outros arquivos: use var(--token).

   TIPOGRAFIA FLUIDA
   -----------------
   Os tokens editaveis no painel (--h1, --h2, --font-base...) guardam o
   tamanho DE DESKTOP. Ao lado de cada um existe um par "-fluid" que e o que
   a folha de estilo realmente usa: um clamp() entre um piso legivel no
   celular e o token como teto.

   A substituicao de custom properties e preguicosa — o var(--h1) dentro do
   clamp so e resolvido no momento do uso —, entao quando a administradora
   troca --h1 no painel a escala fluida inteira acompanha sozinha, sem
   precisar de nenhuma regra extra.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;600;700&family=Great+Vibes&display=swap");

:root {
    /* ── Familias ───────────────────────────────────────────── */
    --body-font: "Ubuntu", sans-serif;
    --heading-font: "Ubuntu", sans-serif;
    --script-font: "Great Vibes", cursive;
    --title-font-weight: 600;

    /* ── Escala de apoio (fixa; sao rotulos, nao texto corrido) ─ */
    --font-smallest: 11px;
    --font-medium: 12px;
    --font-small: 14px;
    --font-nav: 15px;

    /* ── Escala principal — teto de desktop, editavel no painel ─ */
    --font-base: 16px;
    --font-big: 18px;
    --font-large: 20px;
    --font-huge: 22px;

    --h1: 48px;
    --h2: 38px;
    --h3: 30px;
    --h4: 25px;
    --h5: 22px;
    --h6: 19px;

    /* ── Escala fluida — o que a folha de estilo consome ─────── */
    --font-base-fluid: clamp(15px, calc(0.9rem + 0.25vw), var(--font-base));
    --font-big-fluid:  clamp(16px, calc(0.95rem + 0.4vw), var(--font-big));
    --font-large-fluid: clamp(17px, calc(1rem + 0.6vw), var(--font-large));
    --font-huge-fluid: clamp(19px, calc(1.05rem + 0.8vw), var(--font-huge));

    --h1-fluid: clamp(28px, calc(1.05rem + 2.9vw), var(--h1));
    --h2-fluid: clamp(24px, calc(1rem + 2.2vw), var(--h2));
    --h3-fluid: clamp(20px, calc(0.95rem + 1.6vw), var(--h3));
    --h4-fluid: clamp(18px, calc(0.9rem + 1.2vw), var(--h4));
    --h5-fluid: clamp(17px, calc(0.88rem + 0.9vw), var(--h5));
    --h6-fluid: clamp(16px, calc(0.85rem + 0.6vw), var(--h6));

    /* Titulo do hero em fonte script: precisa de mais corpo que um h1 comum
       porque a Great Vibes tem altura-x muito baixa. */
    --hero-title: clamp(44px, calc(1.6rem + 7vw), 88px);
    --script-display: clamp(30px, calc(1.2rem + 2.6vw), 44px);

    /* ── Paleta Bella Lu ──────────────────────────────────────
       Neutros: preto, branco, bege claro, creme e cinza escuro.
       Acentos: dourado/bronze (destaque principal) e laranja queimado
       (variacao de destaque). */
    --main-background: #F9F4EC;
    --main-foreground: #000000;
    --accent-color: #ab977f;
    --button-background: #ab977f;
    --button-foreground: #ffffff;
    --button-hover: #B8A792;

    --announce-background: #ab977f;
    --announce-foreground: #ffffff;

    --topbar-background: #F1E9DE;
    --topbar-foreground: #000000;
    --header-background: #F1E9DE;
    --header-foreground: #000000;
    /* O menu (Inicio, Produtos, Sobre...) SEGUE o cabecalho. Eram cores fixas
       aqui, fora do painel: o campo "Letra e icones do cabecalho" dizia pintar
       o menu, trocava Atendimento e Minha conta, e o menu continuava preto. */
    --nav-desktop-background: var(--header-background);
    --nav-desktop-foreground: var(--header-foreground);
    --header-badge-background: #A57D38;
    --header-badge-foreground: #ffffff;

    --footer-background: #141413;
    --footer-foreground: #F9F4EC;
    --newsletter-background: #141413;
    --newsletter-foreground: #F9F4EC;

    --adbar-background: #F1E9DE;
    --banner-services-background: #F1E9DE;
    --welcome-background: #ab977f;
    --welcome-foreground: #ffffff;
    --featured-background: #F1E9DE;
    --best-seller-background: #F1E9DE;
    --new-background: #F1E9DE;

    --label-background: #141413;
    --label-foreground: #ffffff;

    /* Opacidades derivadas do texto do rodape (#F9F4EC). */
    --footer-fg-10: #F9F4EC1A;
    --footer-fg-20: #F9F4EC33;
    --footer-fg-60: #F9F4EC99;
    --footer-fg-80: #F9F4ECCC;

    /* ── Cores funcionais (nao fazem parte da identidade) ───── */
    --success: #4bb98c;
    --warning: #dc8f38;
    --danger: #dd7774;
    --whatsapp: #4dc247;

    /* ── Grid e espacamento ─────────────────────────────────── */
    --border-radius: 4px;
    --gutter: 15px;
    --section-distance: 40px;
    --container-max: 1300px;

    /* Respiro lateral do container: acompanha a largura da tela em vez de
       saltar de 15px para 80px num unico breakpoint. */
    --gutter-container: clamp(16px, 3.2vw, 44px);

    /* ── Tamanhos de imagem — todos editaveis no painel ──────
       O painel valida cada um pelo tipo (medida com unidade ou proporcao
       "L / A"), entao nenhum valor colado no formulario vira CSS livre. */
    --logo-height: 104px;
    --logo-height-mobile: 72px;
    --logo-max-width: 320px;
    --portrait-width: 195px;
    --seal-height: 26px;

    --hero-height: 520px;
    --hero-height-mobile: 420px;
    /* cover preenche a caixa (pode cortar as bordas); contain mostra a arte
       inteira (pode sobrar faixa). Escolhido no painel. */
    --hero-fit: cover;

    --product-image-ratio: 3 / 4;
    --category-image-ratio: 41 / 59;
    --portrait-image-ratio: 3 / 4;

    /* ── Alturas do cabecalho ────────────────────────────────
       A faixa da logo tem altura PROPRIA, editavel no painel, separada da
       altura da logo: aumentar uma nao mexe na outra. No mobile o topbar e a
       nav desktop somem, e sobra so essa faixa. */
    --announce-height: 34px;
    --topbar-height: 35px;
    --header-height: 126px;
    --header-height-mobile: 72px;
    --nav-row-height: 47px;
}