/* ============================================================
   vitro-brand.css — camada de marca "Luz de Ipê"
   Carregar DEPOIS de vitro.css. Só redefine tokens e adiciona
   4 dispositivos gráficos. Nenhum JS é tocado.
   Todos os seletores abaixo existem em vitro.css / cards.js /
   client-nav.js: .product__media .product__img .product__fav
   .product__body .product__store .product__name .product__foot
   .price .badge .badge--gold .chip .chips .btn .btn--* .card
   .card--interactive .hero__* .section__title .app-header
   .app-header__actions .brand .tab .tab__badge .avatar
   .skeleton--card .empty__title .modal__title .ad-first
   ============================================================ */

/* Tudo abaixo vive em `@layer brand`, declarada em vitro.css depois de
   `components` e antes de `utilities`. Sem camada, este arquivo vencia o
   `components` inteiro por nao estar em camada nenhuma - o que e uma forma
   de ganhar que ninguem consegue prever lendo o seletor. */
@layer brand {


  :root {
    /* — Marfim como base institucional (60% de qualquer tela) — */
    --sand-50:  #FFFCF7;   /* superfície elevada, era #FDFAF6 */
    --sand-100: #F7F1E8;   /* marfim — inalterado */
    --sand-200: #EFE6D8;   /* fundo recuado */
    --sand-300: #E5D9C6;
    --sand-400: #DCCFBB;   /* borda / divisor */
    --sand-600: #6F5F6B;   /* texto secundário */
    --sand-900: #2A1226;   /* ipê noite — texto principal */

    /* Superfície deixa de ser branco puro: papel, não tela. */
    --c-bg:            var(--sand-100);
    --c-bg-elevated:   var(--sand-50);
    --c-surface:       var(--sand-50);
    --c-surface-2:     var(--sand-200);
    --c-surface-3:     var(--sand-300);
    --c-text:          var(--sand-900);
    --c-text-muted:    var(--sand-600);
    --c-text-inverse:  var(--sand-100);
    --c-border:        var(--sand-400);
    --c-border-strong: #B9A891;

    /* Ipê é assinatura, não ambiente. Ouro é luz. Coral é destaque único. */
    --c-primary:        #5B2350;
    --c-primary-hover:  #6E2C61;
    --c-primary-active: #4C1D43;
    --c-on-primary:     #F7F1E8;
    --c-primary-soft:   #F1E7EE;

    --c-accent:        #E8553E;
    --c-accent-hover:  #CE4128;
    --c-on-accent:     #FFF7F4;
    --c-accent-soft:   #FDE5E1;

    --c-gold:          #C9973E;
    --c-gold-soft:     #F7EBD5;
    --c-focus:         #C9973E;
    --c-overlay:       rgb(42 18 38 / 0.58);

    /* Semânticos dessaturados: avisam, não competem com o coral. */
    --success-bg: #E7EFE4; --success-fg: #3F6636;
    --warning-bg: #F7EBD5; --warning-fg: #8A6626;
    --danger-bg:  #FBE3DE; --danger-fg:  #B8321C;
    --info-bg:    #E4E8F0; --info-fg:    #4A5A78;

    /* — Tipografia: Mono entra para preço, etiqueta e dado — */
    --font-mono: "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;

    /* — Raio: 0 em tudo que se clica. O arco é o único raio da marca. — */
    --r-sm: 0; --r-md: 0; --r-lg: 0; --r-xl: 0; --r-2xl: 0; --r-3xl: 0;
    --r-full: 999px;                            /* avatar, pílula, badge do tab */
    --brand-arch: 50% 50% 0 0 / 34% 34% 0 0;    /* moldura de vitrine */

    /* — Sombra dura: deslocamento fixo, sem blur — */
    --sh-xs: 2px 2px 0 rgb(91 35 80 / 0.07);
    --sh-sm: 4px 4px 0 rgb(91 35 80 / 0.09);
    --sh-md: 8px 8px 0 rgb(91 35 80 / 0.11);
    --sh-lg: 14px 14px 0 rgb(91 35 80 / 0.13);
    --sh-xl: 20px 20px 0 rgb(91 35 80 / 0.16);

    /* — Ritmo editorial: curva de vitrine, um pouco mais lenta — */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --dur: 240ms;
    --dur-slow: 420ms;
  }

  /* Escuro: ipê noite, não roxo-cinza. Mesmo contrato de tokens.

     CORRIGIDO NA INTEGRAÇÃO: o arquivo original trazia os dois seletores
     juntos e SEM a media query. `:root:not([data-theme="light"])` casa sempre
     que a pessoa não escolheu claro explicitamente — que é o estado padrão de
     quase todo mundo. O site inteiro ficaria escuro para quem está com o
     sistema no claro.

     O vitro.css resolve isso separando os dois gatilhos: a preferência do
     sistema vale só dentro da media query; a escolha explícita vale sozinha.
     A camada de marca passa a seguir o mesmo contrato — senão ela venceria o
     arquivo que veio antes, justamente por não ter a media query. */
  :root[data-theme="dark"] {
    --c-bg:            #1C0C19;
    --c-bg-elevated:   #2A1226;
    --c-surface:       #2A1226;
    --c-surface-2:     #372031;
    --c-surface-3:     #45293D;
    --c-text:          #F7F1E8;
    --c-text-muted:    #B9A2B2;
    --c-text-inverse:  #2A1226;
    --c-border:        #45293D;
    --c-border-strong: #6E5167;
    --c-primary:       #E6C7DD;
    --c-primary-hover: #F2DCEC;
    --c-on-primary:    #2A1226;
    --c-primary-soft:  #372031;
    --c-gold:          #E0C084;
    --c-gold-soft:     #3B2E15;
    --sh-xs: 2px 2px 0 rgb(0 0 0 / 0.35);
    --sh-sm: 4px 4px 0 rgb(0 0 0 / 0.4);
    --sh-md: 8px 8px 0 rgb(0 0 0 / 0.45);
    --sh-lg: 14px 14px 0 rgb(0 0 0 / 0.5);
    --sh-xl: 20px 20px 0 rgb(0 0 0 / 0.55);
  }

  /* A mesma paleta, agora pela preferência do sistema. Duplicar os tokens é o
     preço de manter os dois gatilhos independentes — é o que o vitro.css já
     faz, e o que evita que uma escolha explícita de tema claro seja
     atropelada pelo sistema. */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
    --c-bg:            #1C0C19;
    --c-bg-elevated:   #2A1226;
    --c-surface:       #2A1226;
    --c-surface-2:     #372031;
    --c-surface-3:     #45293D;
    --c-text:          #F7F1E8;
    --c-text-muted:    #B9A2B2;
    --c-text-inverse:  #2A1226;
    --c-border:        #45293D;
    --c-border-strong: #6E5167;
    --c-primary:       #E6C7DD;
    --c-primary-hover: #F2DCEC;
    --c-on-primary:    #2A1226;
    --c-primary-soft:  #372031;
    --c-gold:          #E0C084;
    --c-gold-soft:     #3B2E15;
    --sh-xs: 2px 2px 0 rgb(0 0 0 / 0.35);
    --sh-sm: 4px 4px 0 rgb(0 0 0 / 0.4);
    --sh-md: 8px 8px 0 rgb(0 0 0 / 0.45);
    --sh-lg: 14px 14px 0 rgb(0 0 0 / 0.5);
    --sh-xl: 20px 20px 0 rgb(0 0 0 / 0.55);
    }
  }

  /* ============================================================
     1. MOLDURA — toda imagem de vitrine vive num arco
     Só border-radius: nada de clip-path, mask ou filter.
     ============================================================ */
  .product__media,
  .skeleton--card,
  .ad-first,
  .brand-arch {
    border-radius: var(--brand-arch);
    overflow: hidden;
  }
  .product__img { border-radius: 0; }          /* o arco é da moldura, não da foto */

  /* PROPORÇÕES do manual: produto 3:4 · editorial 4:5 · capa 16:9.
     `.product__media` já é 3:4. As outras duas entram como utilitário, para a
     foto ser enquadrada e não esticada. */
  .brand-editorial { aspect-ratio: 4 / 5; object-fit: cover; }
  .brand-capa      { aspect-ratio: 16 / 9; object-fit: cover; }

  /* A capa em 16:9 vale onde ela é IMAGEM. No hero de celular ela é caixa de
     TEXTO: a 16:9 num aparelho de 360px sobram 184px de altura, e a chamada
     com três linhas transbordaria - ou entraria no domo e seria cortada, que é
     justamente o defeito que esta rodada corrige. Então o hero fica 16:9 do
     tablet para cima, e no celular guarda altura para o texto caber. */
  @media (min-width: 40rem) {
    .hero { aspect-ratio: 16 / 9; }
  }
  .hero { min-height: 15rem; }
  .avatar { border-radius: var(--r-full); }    /* logo de loja segue círculo */

  /* ============================================================
     2. FACHO DE LUZ — a marca d'água. Uma vez por peça.
     Estático: composto na entrada, não repinta no scroll.
     ============================================================ */
  .brand-light { position: relative; isolation: isolate; }
  .brand-light::after {
    content: "";
    position: absolute;
    top: -12%;
    left: 58%;
    width: 26%;
    height: 130%;
    background: linear-gradient(180deg, rgb(201 151 62 / 0.30), rgb(201 151 62 / 0));
    transform: skewX(-16deg);
    pointer-events: none;
    z-index: -1;
  }

  /* ============================================================
     3. ETIQUETA — Space Mono em caixa alta, retângulo reto
     .badge e seus modificadores de status já existem: aqui muda
     só a forma. Os dois modificadores novos são aditivos.
     ============================================================ */
  .badge {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border-radius: 0;
  }
  .badge--gold { background: var(--c-gold); color: #2A1226; }   /* curadoria */

  /* "Coral: uma aparição por tela" é sobre PESO, não sobre contagem. Uma
     etiqueta coral chapada em cada card devolvia uma vitrine salpicada de
     laranja, competindo com o coração ativo - que é estado, e por isso fica
     com o coral cheio. A novidade guarda a cor e devolve a área. */
  .badge--novidade {
    background: transparent;
    border: 1px solid var(--c-accent);
    color: var(--c-accent);
  }
  .badge--local {
    background: transparent;
    border: 1px solid var(--c-primary);
    color: var(--c-primary);
  }

  .chip {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius: 0;
  }
  .chip[aria-pressed="true"], .chip.is-active {
    background: var(--c-primary);
    color: var(--c-on-primary);
    border-color: var(--c-primary);
  }

  /* Preço: mono tabular, para o número não dançar entre cards. */
  .price {
    font-family: var(--font-mono);
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
  }

  /* ============================================================
     4. VOZ EDITORIAL — Fraunces só onde a marca fala,
        e o LOGOTIPO na direção C do manual: o circunflexo é a luz

     O manual chama o lettering atual, Fraunces itálico puro, de "agradável,
     porém sem nada proprietário e frágil abaixo de 20px", e recomenda esta
     direção: o acento vira o ponto de luz da vitrine, em ouro. É o único
     elemento da marca que um concorrente não copia sem copiar a hora do dia.

     REDUÇÃO MÍNIMA 88px e ÁREA DE RESPIRO igual à altura do "v" — as duas
     regras do manual viram medida, para o logo não encolher nem encostar.
     ============================================================ */

  .brand {
    font-family: var(--font-headline);
    font-style: italic;
    font-weight: 600;
    font-variation-settings: "opsz" 144;
    letter-spacing: -0.03em;
    color: var(--c-primary);
    display: inline-block;
    min-width: 88px;
    padding: 0.34em 0;           /* respiro = altura do "v" na Fraunces */
  }
  .brand__luz {
    color: var(--c-gold);
    font-style: inherit;
  }
  /* Sobre ipê o ouro precisa subir de tom para não sumir. Classe, e não
     `[style*="#fff"]`: casar por pedaço de atributo quebra no dia em que
     alguém escrever `#FFF` ou `white`. */
  .brand--sobre-escuro .brand__luz { color: #E8BE72; }
  .hero__title,
  .section__title,
  .modal__title,
  .empty__title,
  .brand-display {
    font-family: var(--font-headline);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.08;
  }
  .hero__title, .brand-display {
    font-style: italic;
    font-variation-settings: "opsz" 144;
  }
  .section__title, .modal__title { font-variation-settings: "opsz" 72; }

  .hero { border-radius: var(--brand-arch); }
  .hero__eyebrow {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--c-gold);
  }
  /* Scrim quente: preserva a luz de fim de tarde da foto. */
  .hero__scrim {
    background: linear-gradient(180deg, rgb(42 18 38 / 0.10) 0%, rgb(42 18 38 / 0.72) 100%);
  }
  .product__store {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  /* ============================================================
     BOTÕES E CAMPOS — reto, com filete de ouro no foco
     ============================================================ */
  .btn { font-weight: 500; letter-spacing: 0.02em; border-radius: 0; }

  /* O manual diz "Botões: 0. Avatares: círculo" — e botão de ícone é botão.
     Esta linha faltava: o `.btn` recebeu raio zero e o `.btn-icon` ficou
     redondo. O coração circular cortado pelo arco era o encontro dos dois
     descuidos. */
  .btn-icon { border-radius: 0; }

  /* ALVO DE TOQUE, e por que NAO ha um truque aqui.

     Tentei esticar a area de .btn-icon--sm de 36 para 44px com um
     pseudo-elemento (`inset: -4px`). A sonda de acabamento reprovou, e estava
     certa: com 36px de botao e 4px de intervalo, dois alvos de 44 nao cabem em
     76 - eles se sobrepoem, e um toque no meio vai para o botao errado. O
     truque piorava a mira em vez de melhorar.

     36px passa folgado no criterio AA (WCAG 2.5.8, 24px). Os 44 do 2.5.5 sao
     AAA e nao cabem numa barra densa sem afastar os botoes, o que custaria o
     espaco que o manual pede para o resto. */

  .btn--primary { box-shadow: none; }
  .btn--primary:hover:not(:disabled) { box-shadow: 4px 4px 0 rgb(201 151 62 / 0.55); }
  .btn--accent { box-shadow: none; }
  .btn--outline { border-color: var(--c-primary); color: var(--c-primary); }
  .btn:focus-visible,
  .chip:focus-visible,
  .tab:focus-visible,
  .btn-icon:focus-visible,
  .input:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible {
    outline: 2px solid var(--c-gold);
    outline-offset: 2px;
  }

  /* Card: papel com sombra dura, sem elevação difusa. */
  .card { border: 1px solid var(--c-border); box-shadow: none; }
  .card--interactive { transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
  .card--interactive:hover { transform: translate(-3px, -3px); box-shadow: 8px 8px 0 rgb(91 35 80 / 0.11); }

  /* Shell: filete de ouro marca o item ativo da tabbar. */
  .app-header { border-bottom: 1px solid var(--c-border); }
  .tab { position: relative; }
  .tab[aria-current="page"] { color: var(--c-primary); }
  .tab[aria-current="page"]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 1.5rem;
    height: 2px;
    background: var(--c-gold);
    transform: translateX(-50%);
  }
  .tab__badge {
    font-family: var(--font-mono);
    background: var(--c-accent);
    color: var(--c-on-accent);
  }
  .ad-label {
    font-family: var(--font-mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border-radius: 0;
  }

  /* ============================================================
     MICROINTERAÇÃO — a vitrine abre. Só opacity e transform.
     ============================================================ */
  @keyframes vitro-open {
    from { opacity: 0; transform: translateY(10px) scale(0.985); }
    to   { opacity: 1; transform: none; }
  }
  .grid-products > *,
  .grid-stores > * {
    animation: vitro-open var(--dur-slow) var(--ease-out) both;
  }
  .grid-products > :nth-child(2), .grid-stores > :nth-child(2) { animation-delay: 40ms; }
  .grid-products > :nth-child(3), .grid-stores > :nth-child(3) { animation-delay: 80ms; }
  .grid-products > :nth-child(4), .grid-stores > :nth-child(4) { animation-delay: 120ms; }
  .grid-products > :nth-child(5), .grid-stores > :nth-child(5) { animation-delay: 160ms; }
  .grid-products > :nth-child(n+6), .grid-stores > :nth-child(n+6) { animation-delay: 200ms; }

  @media (prefers-reduced-motion: reduce) {
    .grid-products > *, .grid-stores > * { animation: none; }
    .card--interactive:hover { transform: none; }
  }
}