/* ============================================================
   TEMA — YAZY
   ------------------------------------------------------------
   ESTE É O ÚNICO ARQUIVO QUE MUDA DE CLIENTE PARA CLIENTE.
   Nada aqui é estrutura. Só identidade.

   Para criar uma loja nova: copie este arquivo, troque os
   valores, não renomeie nenhuma variável.
   ============================================================ */

:root {
  /* --- PALETA ------------------------------------------------
     YAZY: regra inviolável — sem preto. --deep substitui. */
  --marca-primaria:     #C8A84B;   /* dourado — acentos, bordas */
  --marca-primaria-alt: #E2C97E;   /* dourado claro — gradientes */
  --marca-escura:       #4A3B29;   /* texto forte, botões (no lugar do preto) */
  --marca-escura-hover: #3E3225;   /* hover de botão sólido */
  --marca-media:        #6B5540;   /* texto corrido */
  --marca-suave:        #8A7A63;   /* texto secundário, legendas */
  --marca-detalhe:      #A0855B;   /* links discretos, eyebrow */
  --marca-realce:       #A8842C;   /* itálico de destaque no hero */

  /* Tons que entraram com o design system Atelier Athleisure
     (docs/DESIGN-SYSTEM.md, 09/09/2026). O vinho e o contraste de
     prestígio: campanha, checkout, cartão escuro. O mocha e o
     taupe são transição e texto secundário. */
  --marca-vinho:        #4A1E2F;   /* contraste de prestígio */
  --marca-vinho-fundo:  #3D1826;   /* seção escura em vinho */
  --marca-mocha:        #8A6A4A;   /* filtros, tags, divisores */
  --marca-taupe:        #9B8B7A;   /* placeholder, estado inativo */

  --fundo:              #F8F5EE;   /* fundo da página — osso quente */
  --fundo-alt:          #F4EDE1;   /* seções alternadas, hero */
  --superficie:         #FDFCFA;   /* cartões */
  --borda-quente:       #EDE6D9;   /* fio de divisão, sem atrito visual */

  /* --- TIPOGRAFIA --------------------------------------------
     Três famílias, três papeis — decidido em 09/09/2026, seguindo
     docs/DESIGN-SYSTEM.md. Georgia e Lora sairam.

       EB Garamond  narrativa da marca: hero, título de seção,
                    nome de peça e de coleção
       Montserrat   tudo o que se opera: botão, rótulo, descrição,
                    formulário, menu
       Inter        SÓ número: preço, parcela, medida, quantidade

     A separação do número não é preciosismo. Fonte de texto usa
     algarismo old-style, que desce abaixo da linha de base e faz
     coluna de preço parecer torta — o painel já tinha resolvido
     isso, e agora a loja resolve igual.

     Toda pilha termina numa fonte que existe em qualquer máquina:
     Google Fonts fora do ar não pode deixar a loja sem tipografia. */
  --fonte-titulo: "EB Garamond", Georgia, "Times New Roman", serif;
  --fonte-corpo:  "Montserrat", -apple-system, "Segoe UI", Helvetica, sans-serif;
  --fonte-ui:     "Montserrat", -apple-system, "Segoe UI", Helvetica, sans-serif;
  --fonte-numero: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Assinatura da marca: "yazy" e a flor. Definido em 08/09/2026,
     Poppins Light. Nao usar em texto corrido. */
  --fonte-logo:   "Poppins", sans-serif;

  /* --- FORMA --------------------------------------------------
     Curva suave, nunca pastilha agressiva nem canto industrial:
     a silhueta lembra seda dobrada e costura colada. */
  --raio-sm: 2px;
  --raio-md: 4px;
  --raio-lg: 8px;

  /* --- ESPAÇO -------------------------------------------------
     Uma escala só, para o respiro entre seções ser decisão e não
     chute. Componente aperta por dentro (2xs a md) e o espaço
     generoso fica por fora (2xl a 4xl) — assim a foto lidera. */
  --espaco-2xs: 0.25rem;
  --espaco-xs:  0.5rem;
  --espaco-sm:  0.75rem;
  --espaco-md:  1rem;
  --espaco-lg:  1.5rem;
  --espaco-xl:  2rem;
  --espaco-2xl: 3rem;
  --espaco-3xl: 4.5rem;
  --espaco-4xl: 6rem;

  /* --- GRADE ---------------------------------------------------
     12 colunas até 1320px. A margem lateral encolhe por faixa, e
     e ela que garante que a foto respire no celular. */
  --largura-max:    1320px;
  --gutter:         1.5rem;
  --margem-lateral: 3rem;

  /* --- INTERAÇÃO ----------------------------------------------
     Como a interface se move e responde ao toque. Vale para a loja
     e para o painel: os dois leem este arquivo, então o site e o
     admin reagem do mesmo jeito.

     A curva sai rápido e chega devagar — o movimento termina calmo,
     em vez de frear de repente. */
  --mov-rapido: 130ms;
  --mov-normal: 220ms;
  --mov-lento:  420ms;
  --curva: cubic-bezier(.32, .72, 0, 1);

  --raio-controle: 7px;
  --raio-pastilha: 9px;

  --sombra-controle:  0 1px 1.5px rgba(74,59,41,.10);
  --sombra-flutuante: 0 4px 14px rgba(74,59,41,.10), 0 1px 3px rgba(74,59,41,.06);
  --sombra-alta:      0 18px 44px rgba(74,59,41,.16), 0 2px 8px rgba(74,59,41,.08);

  /* Difusão para gaveta da sacola, menu e dropdown: quase sem
     borda visível, tingida de cacau em vez de cinza sintético. */
  --sombra-ambiente:  0 16px 40px -12px rgba(74,59,41,.08), 0 2px 6px 0 rgba(74,59,41,.03);
  /* Fundo escurecido de modal, com calor preservado. */
  --scrim:            rgba(74,59,41,.45);
  --foco: 0 0 0 3.5px rgba(200,168,75,.32);

  /* --- PERFIL DA LOJA ----------------------------------------
     Ajusta a densidade visual conforme o público.
     fitness/grife → respiro e foto grande
     modinha       → mais produtos por tela, preço protagonista */
  --grade-vitrine:  4;      /* produtos por linha no desktop */
  --grade-catalogo: 3;
  --proporcao-foto: 3 / 4;  /* grife costuma usar 4/5 */
  --hero-altura:    640px;
}

/* Tablet: 8 colunas. */
@media (max-width: 1023px) {
  :root { --gutter: 1rem; --margem-lateral: 2rem; }
}

/* Celular: 4 colunas, e a margem some quase toda — foto de roupa
   perde muito quando encolhe. */
@media (max-width: 767px) {
  :root { --gutter: 1rem; --margem-lateral: 1rem; }
}