/* ==========================================================================
   Tema — a única fonte de cor do produto

   Regra: nenhum outro arquivo escreve cor. Se um hex aparecer fora daqui,
   ele é uma cor que o lojista nunca vai conseguir mudar — e o dia em que a
   marca mudar de tom, aquele pedaço fica para trás. O validador
   `scripts/validar-cores.mjs` recusa hex solto nos outros arquivos.

   Como está organizado
   --------------------
   1. MARCA      — o que o lojista escolhe. É o único bloco que a API
                   sobrescreve. Trocar estes valores repinta a loja inteira.
   2. SINALIZAÇÃO— verde/vermelho/âmbar de estado. NÃO seguem a marca:
                   são semáforo. Loja de marca vermelha não pode ter tudo
                   vermelho, senão erro deixa de ser distinguível.
   3. FORMA e TIPOGRAFIA — raio e fontes, iguais nas duas áreas.
   4. BASE       — as superfícies e os textos, em duas versões de fábrica,
                   escolhidas pelo atributo data-base:

                     <html data-base="escuro">  → loja
                     <html data-base="claro">   → painel
                     <aside data-base="escuro"> → a lateral do painel

                   ATENÇÃO: desde a 1.37.0 estas duas versões são o que se vê
                   quando /tema.css NÃO chega. Com a API no ar, a folha dela
                   sobrescreve os 43 tokens da base — a loja com a paleta
                   calculada do fundo escolhido, o painel com a cara que o
                   lojista pediu. O atributo é o plano B, não o retrato.

                   A folha da API escreve por ÁREA — [data-loja] e
                   [data-painel] — nunca em :root: as duas áreas carregam a
                   MESMA folha, e um :root pintaria as duas de uma vez.

   Transparências da marca
   -----------------------
   Onde o desenho pede "a cor da marca a 12%", a folha escreve
   `color-mix(in srgb, var(--marca) 12%, transparent)` no lugar de um rgba
   fixo. É o mesmo pixel de hoje, com uma diferença: acompanha a cor
   escolhida pelo lojista. Um rgba(219,136,22,.12) escrito à mão continuaria
   dourado numa loja azul.
   ========================================================================== */

:root{
  /* ── 1. MARCA ──────────────────────────────────────────────────────────
     Valores extraídos da logo oficial (preto neutro + ouro âmbar + branco).
     Os hex vieram da amostragem da imagem, não de escolha estética.
     A partir da Fase 3 a API reescreve este bloco por loja. */
  --marca:#DB8816;          /* corpo da cor: botões, links, item ativo */
  --marca-clara:#E8A63A;    /* a mesma cor um passo acima, para texto */
  --marca-brilho:#FBE66D;   /* o alto do relevo — só em degradê e halo */
  --marca-sombra:#652801;   /* o baixo do relevo — só em degradê e borda */
  /* Tinta para texto SOBRE a marca; nunca preto puro. Este valor nao foi
     escolhido a mao: e o que a API calcula para o dourado de fabrica. Ele so
     entra em cena se a API estiver fora do ar — e ai tem que ser o mesmo, ou
     a loja muda de tom justamente na hora em que algo ja deu errado.
     `scripts/validar-contraste.mjs` roda a conta da API e compara. */
  --sobre-marca:#372206;

  /* O fundo do código QR. Branco nos DOIS temas, e por isso um token
     próprio: o leitor do banco precisa de contraste, e um QR escuro sobre
     fundo escuro simplesmente não é lido. É a única cor do projeto que não
     acompanha o tema — e ela existe para uma máquina, não para os olhos. */
  --fundo-do-qr: #ffffff;
  --marca-relevo:linear-gradient(var(--marca-clara),var(--marca));

  /* ── A barra do alto ───────────────────────────────────────────────────
     Seis tokens que o cabeçalho da loja lê, e nenhuma regra dele lê outra
     coisa. Quem manda neles é a folha da API, conforme o lojista escolheu
     em Marca → A loja → Cabeçalho:

         marca      a barra é a cor dele, e a tinta é a calculada
         discreto   a barra volta ao vidro da página

     Os valores abaixo são o modo `marca`, que é o de fábrica. Eles entram
     em cena quando a API não responde — e aí precisam ser o mesmo modo que
     o servidor entregaria, ou a loja trocaria de cara justamente na hora em
     que algo já deu errado.

     O selo do carrinho troca de lado entre os dois modos: sobre a barra
     colorida ele é a cor da página, sobre a discreta ele volta a ser a
     marca. Nos dois casos o par é um fundo e a tinta que a paleta garante
     legível sobre ele. */
  --topo-fundo:var(--marca);
  --topo-tinta:var(--sobre-marca);
  --topo-realce:var(--sobre-marca);
  --topo-campo:var(--fundo);
  --topo-selo:var(--fundo);
  --topo-selo-tinta:var(--texto);

  /* Cor de apoio: selos, ícones, detalhes que não são clicáveis. Nasce
     igual à marca — a loja de hoje usa um dourado só. Separá-la agora é o
     que permite o lojista diferenciar depois sem tocar em CSS. */
  --apoio:#DB8816;
  --apoio-clara:#E8A63A;

  /* ── 2. SINALIZAÇÃO ────────────────────────────────────────────────────
     Não dourar, não deixar o lojista mexer.

     O tom de cada uma vive na base, logo abaixo, e não aqui: o verde que se
     lê sobre preto é claro demais para se ler sobre papel. Mesma função,
     dois tons — é o que mantém "deu certo" legível nas duas áreas. */
  --erro-forte:#7a1220;     /* faixa de manutenção: fundo cheio, texto branco */
  --sobre-erro:#ffffff;     /* tinta para texto SOBRE vermelho cheio */

  /* Branco de verdade, que NÃO acompanha o tema da loja. Existe para o único
     caso em que a cor não é decisão de design: o fundo do QR do Pix, que a
     câmera do banco precisa ler. Numa loja de tema escuro, um QR sobre a
     superfície do tema simplesmente não é lido. */
  --branco-fixo:#ffffff;

  /* A tinta que a impressora termica deposita, e o papel embaixo dela.
     Existe pela mesma razao do `--branco-fixo` logo acima: papel e papel em
     qualquer tema, e a previa do cupom nao pode seguir o tema escuro — ela
     esconderia problema de contraste que so apareceria depois de imprimir. */
  --preto-fixo:#000000;

  /* ── 3. FORMA e TIPOGRAFIA ─────────────────────────────────────────────
     Mesmo raio nas duas áreas: é o que faz um botão do painel parecer
     irmão de um botão da loja, e não de outro produto. */
  --raio:4px;
  --raio-g:10px;

  /* ── A ordem das camadas ───────────────────────────────────────────────
     Quem cobre quem, escrito num lugar só e em ordem de leitura.

     ── Por que isto virou token ──────────────────────────────────────────
     Porque com os números soltos pela folha ninguém tinha como comparar
     dois deles sem procurar os dois. E foi assim que a loja passou a
     recusar TODO pedido de quem não tinha conta: a janela de entrar estava
     em 50 e o carrinho em 60, os dois cobrindo a tela inteira. O carrinho
     ficava por cima, borrava a janela e comia todos os cliques. Nada
     quebrava, nada dava erro — o botão Finalizar simplesmente não levava a
     lugar nenhum.

     A regra que os números sozinhos não diziam: JANELA sempre acima de
     GAVETA. Uma janela existe para cobrar uma decisão; se algo fica na
     frente dela, a decisão não tem como ser tomada.

     Manutenção fica acima de tudo porque ela é o aviso de que o resto não
     deve ser usado. */
  --camada-colado:10;      /* topo e faixas que grudam ao rolar */
  --camada-suspenso:20;    /* menus que abrem sobre o conteúdo */
  --camada-gaveta:50;      /* o carrinho, entrando pela lateral */
  --camada-janela:60;      /* o que cobra uma decisão: entrar, confirmar */
  --camada-manutencao:100; /* a loja fora do ar */

  /* ── A escala de respiro ───────────────────────────────────────────────
     Seis degraus de 8 em 8, e nenhuma medida de espaço fora deles.

     Existe por um defeito de conjunto, e não de uma peça: a vitrine chegou
     à 1.131 com 24, 32, 34, 26, 16, 15, 13, 10 e 4 px de respiro, nove
     medidas sem parentesco nenhuma. Cada uma tinha sido escolhida sozinha e
     estava certa sozinha; juntas, davam à página o ar de peças coladas por
     gente diferente. É isso que se lê como "amador" antes de qualquer cor.

     Aqui e não em cada folha porque loja e painel precisam respirar igual:
     um cartão do painel com 15px de vão ao lado de um da loja com 16 é a
     mesma discórdia, só que entre áreas. */
  --respiro-1:8px;
  --respiro-2:12px;
  --respiro-3:16px;
  --respiro-4:24px;
  --respiro-5:32px;
  --respiro-6:40px;

  /* Largura da coluna de menu, igual nas duas areas. Vivia so na loja; o
     painel tinha 232px por conta propria, e a diferenca aparecia na hora de
     ir de uma tela para a outra. */
  /* Quanto esmaece na ponta de uma faixa que rola para o lado. So a medida
     mora aqui: o desenho da mascara precisa ser escrito no proprio elemento
     que rola, senao o navegador resolve os `var()` de dentro dele aqui no
     `:root` — onde as medidas de cada lado ainda nao existem — e a mascara
     sai sempre com as pontas em zero. Verde nos testes, invisivel na tela. */
  --esmaecido-ponta:36px;

  --trilha:200px;

  --ui:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  /* Aqui morava `--display`, a serifada (Fraunces). Ela saiu na 1.134.3 com
     o ultimo uso: nao ha token orfao no projeto, nem fonte baixada que
     ninguem desenha — eram ~90KB por visita, no celular, para nada.

     Ela volta no dia em que a escolha da fonte da marca existir na tela
     "Marca": ai `--marca-fonte` aponta para a serifada, e o `<link>` das
     fontes volta a pedi-la. Enquanto isso, apontar `--marca-fonte` para
     "Fraunces" nao renderiza — a fonte nao esta carregada. */

  /* ── A voz da MARCA, separada da voz da INTERFACE ──────────────────────
     `--display` respondia pelas duas coisas ao mesmo tempo: o nome da loja
     no alto da página e o rótulo de qualquer seção. São papéis diferentes.

     O nome da loja é da LOJA. Fixá-lo em Fraunces — uma serifada fina de
     revista — entregava voz de vinheria a toda loja vendida: a pizzaria, o
     pet shop e a farmácia herdavam a tipografia da adega que serviu de
     primeira instalação. É o mesmo erro de escrever "cerveja" no código de
     uma plataforma que também vende ração, só que em fonte.

     O rótulo de seção é da PLATAFORMA, e acompanha o resto da interface —
     que já é `--ui`. Serifada fina em rótulo pequeno lê como cardápio, e
     não como loja; e brigava com o nome e o preço do produto logo abaixo,
     que sempre foram sans.

     O padrão é neutro de propósito. Quem escolher a voz é o lojista, na
     tela "Marca" — a folha da API sobrescreve estas duas linhas, como já
     faz com a cor. Enquanto essa escolha não existe, a loja nasce com a
     fonte que não presume o ramo de ninguém. */
  --marca-fonte:var(--ui);
  --marca-peso:700;
  /* Codigo de conexao e qualquer numero que a pessoa vai digitar de volta:
     largura fixa evita confundir 0 com O. */
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

  /* ── A prévia da vitrine dentro do painel ──────────────────────────────
     O painel roda na base clara e a loja, na escura. Quando o painel mostra
     uma MINIATURA da loja — a fita de categorias na tela "Página inicial",
     por exemplo — ela precisa ser escura mesmo ali dentro: é a vitrine que
     está sendo mostrada, não o painel.

     Fica aqui, fora das duas bases, exatamente como a pílula de salvamento
     abaixo, e pelo mesmo motivo: não muda com elas.

     Escrever `#141416` na folha do painel resolveria a tela e criaria a
     terceira cor fora do tema — e a quarta, no dia da miniatura seguinte. */
  --previa-fundo:#141416;
  --previa-alta:#27272a;
  --previa-linha:#3f3f46;
  --previa-tinta:#a1a1aa;
  --previa-forte:#fafafa;

  /* ── Pílula de salvamento ──────────────────────────────────────────────
     Flutua sobre qualquer fundo, então é escura nas duas bases de
     propósito. Fica aqui, fora das bases, porque não muda com elas. */
  --pilula-fundo:rgba(24,24,27,.94);
  --pilula-texto:#e4e4e7;
  --pilula-linha:rgba(255,255,255,.08);
  --pilula-veu:rgba(255,255,255,.1);
  --pilula-borda:rgba(255,255,255,.28);
  --pilula-roda:rgba(255,255,255,.25);
  --pilula-ok-linha:rgba(16,185,129,.32);
  --pilula-ok-texto:#6ee7b7;
  --pilula-erro-fundo:rgba(69,10,10,.94);
  --pilula-erro-linha:rgba(239,68,68,.32);
  --pilula-erro-texto:#fca5a5;
  --pilula-sombra:0 10px 30px rgba(0,0,0,.35);
}

/* ══════════════════════════════════════════════════════════════════════════
   Derivação da marca

   Os quatro tons da marca acima são a paleta que veio da logo. A partir do
   momento em que o lojista escolhe a própria cor, só `--marca` e `--apoio`
   chegam do banco — os outros três precisam sair deles, ou uma loja azul
   teria botão azul com brilho dourado.

   A conta é feita em OKLCH, onde a claridade é perceptualmente uniforme:
   somar claridade a um azul e a um amarelo produz o mesmo salto aos olhos,
   o que não acontece em HSL. É o que mantém o degradê do botão com a mesma
   força seja qual for a cor escolhida.

   Os valores escritos acima seguem valendo como plano B em navegador sem
   `oklch(from ...)`. Não é uma versão degradada por descuido: é a paleta
   original da logo, que é exatamente o que aquele navegador deve mostrar.
   ══════════════════════════════════════════════════════════════════════════ */
/* Primeiro degrau: misturar com branco e com preto. E uma aproximacao —
   clareia e dessatura junto — mas ja acompanha a cor escolhida. Sem este
   degrau, um navegador sem OKLCH mostraria botao azul com brilho dourado,
   que e pior que um brilho azul lavado. */
@supports (color: color-mix(in srgb, red 50%, #fff)){
  :root{
    --marca-clara:color-mix(in srgb,var(--marca) 78%,#ffffff);
    --marca-brilho:color-mix(in srgb,var(--marca) 42%,#ffffff);
    --marca-sombra:color-mix(in srgb,var(--marca) 45%,#000000);
    --apoio-clara:color-mix(in srgb,var(--apoio) 78%,#ffffff);
  }
}

/* Segundo degrau: a conta certa. Sobe a claridade sem lavar a cor. */
@supports (color: oklch(from #000 l c h)){
  :root{
    --marca-clara:oklch(from var(--marca) calc(l + .08) c h);
    --marca-brilho:oklch(from var(--marca) calc(l + .26) calc(c * .85) h);
    --marca-sombra:oklch(from var(--marca) calc(l * .45) c h);
    --apoio-clara:oklch(from var(--apoio) calc(l + .08) c h);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   4. BASE ESCURA — a loja
   Superfícies em camadas. Preto único deixa tudo no mesmo plano e o produto
   não se separa do fundo; cada nível se destaca do anterior.
   ══════════════════════════════════════════════════════════════════════════ */
[data-base="escuro"]{
  /* Avisa o navegador de que esta area e escura. Sem isto ele pinta com o
     padrao dele o que o CSS nao alcanca: barra de rolagem, campo de data,
     menu de select. A barra da lateral do painel saia BRANCA por causa
     disto — um risco claro cortando o menu preto.

     E um TOKEN, e nao a propriedade escrita direto, porque o painel troca de
     cara pela folha da API: com `color-scheme:dark` preso aqui, o painel
     escuro continuaria avisando "claro" e a barra dele voltaria a sair
     branca. Como token, a API sobrescreve junto com o resto da paleta. */
  --esquema:dark;

  --fundo:#0A0A0A;            /* a página inteira */
  --superficie:#121212;       /* faixa, campo, painel discreto */
  --superficie-alta:#161616;  /* cartão: o único que sobe de tom de verdade */

  /* Bordas em transparência, não cinza fixo: se ajustam ao que está atrás.
     É o que dá sensação de vidro em vez de contorno desenhado. */
  --linha:rgba(255,255,255,.06);
  --linha-forte:rgba(255,255,255,.16);

  /* Véu: luz caindo de cima. Sozinho não se vê; sem ele, tudo vira
     retângulo chapado. */
  --veu:rgba(255,255,255,.03);
  --veu-forte:rgba(255,255,255,.05);
  --luz:linear-gradient(180deg,var(--veu) 0%,transparent 60%);

  /* tinta — branco neutro da faixa "ADEGA NEW TREND" */
  --texto:#F0F0F0;
  --texto-2:#A8A49E;
  /* Era #77726B, depois #837D76. Medido no navegador sobre o CARTAO — que
     e mais claro que a pagina e portanto o pior caso — dava 4.45:1, ainda
     abaixo do minimo. Este passa em 4.82:1. */
  --texto-3:#89837B;

  /* Vidro: barras fixas com desfoque por baixo. */
  --vidro:rgba(10,10,10,.72);
  --vidro-forte:rgba(10,10,10,.86);

  /* Cortina: o que apaga a página atrás de um modal. */
  --cortina:rgba(5,7,6,.7);
  --cortina-leve:rgba(5,7,6,.65);

  --sombra:0 18px 40px rgba(0,0,0,.45);
  --sombra-cartao:0 10px 24px rgba(0,0,0,.35);
  --sombra-cartao-alta:0 18px 36px rgba(0,0,0,.5);
  --sombra-faixa:0 14px 34px rgba(0,0,0,.4);
  /* A sombra da barra do pedido sobe, e não desce: ela é a única superfície
     fixa que encosta na borda de BAIXO da tela. Existe para a barra flutuar
     sobre a loja — antes, uma borda de 1px chapada cortava a página em duas
     e a barra lia como rodapé colado, não como camada. */
  --sombra-barra:0 -14px 34px rgba(0,0,0,.5);
  /* A sombra do produto, em TRES PARTES: quanto desce, quanto borra, e a cor.
     Separadas porque a folga embaixo da imagem sai das duas primeiras, e
     porque uma peca menor — o bloco da fita — precisa encolher as duas
     juntas. A composicao mora em `estilo.css`, no lugar do uso.

     Uma linha so aqui (`--sombra-foto:0 14px 18px rgba(...)`) nao serviria:
     variavel composta e resolvida ONDE E DECLARADA, entao um bloco menor que
     redeclarasse as partes nao mudaria nada. Foi o que a medida em navegador
     mostrou antes desta forma existir. */
  --sombra-desce:14px;
  --sombra-borra:18px;
  --sombra-cor:rgba(0,0,0,.55);

  /* Nicho iluminado: a prateleira com luz de cima onde o produto aparece. */
  --nicho-alto:#3A3129;
  --nicho-meio:#1A1714;
  --nicho-baixo:#0B0A09;

  /* A cor de CADA produto, quando a loja escolhe esse modo em Marca.
     Aqui ela e so o plano B: o valor de verdade chega no `style` do cartao,
     produto a produto, porque uma folha por loja nao pinta trinta quadros
     de trinta cores. Sem este padrao, o cartao de um produto sem cor
     guardada desenharia com `color-mix` sobre nada.
     O valor e o proprio `--nicho-meio`: cair aqui devolve exatamente o
     quadro de sempre, que e o estado certo para "esta foto nao tem cor". */
  --cor-do-produto:#1A1714;

  /* A cor de CADA imagem de categoria, no bloco do Azulejo (1.299.0).
     Mesmo plano B, e pelo mesmo motivo: o valor de verdade chega no `style`
     do bloco, categoria a categoria. Sem este padrao, uma folha de loja sem
     o bloco declarado desenharia com `color-mix` sobre nada.
     O valor tambem e o `--nicho-meio`: cair aqui devolve o bloco de sempre,
     que e o estado certo para "esta imagem nao tem cor". */
  --cor-da-categoria:#1A1714;

  /* Os dois extremos do degrade do nicho, para o modo acima misturar sobre
     a cor que chegou. Escritos aqui e nao no `color-mix` porque toda cor
     mora nesta folha — inclusive o branco e o preto que clareiam e
     escurecem. */
  --clareia:#FFFFFF;
  --escurece:#000000;

  /* Moldura clara: o nicho para a foto que chegou com fundo solido.
     Nao e branco puro. Branco puro encosta no branco da foto e a moldura
     some, deixando o produto flutuando sem limite dentro do cartao. Este
     tom fica um passo abaixo, entao a borda existe sem chamar atencao. */
  --foto-clara-fundo:#F4F2EE;
  --foto-clara-borda:rgba(0,0,0,.10);
  /* O coracao mora DENTRO do nicho. Sobre a moldura clara ele precisa de
     contorno escuro: o tom do tema escuro sumiria no branco da foto. */
  --foto-clara-coracao-fundo:rgba(255,255,255,.78);
  --foto-clara-coracao-linha:rgba(0,0,0,.16);
  --foto-clara-coracao-traco:#4A4A4A;

  /* Halo: a luz difusa atras do produto e no canto da faixa. Sobre preto ela
     precisa ser forte para existir. */
  --halo:color-mix(in srgb,var(--apoio) 20%,transparent);
  /* Contorno do desenho que ocupa o lugar da foto. E o que o cliente ve
     enquanto o produto nao tem imagem — na loja de hoje, todos. */
  --produto-traco:color-mix(in srgb,var(--marca) 34%,transparent);

  /* ── O convite do clube ──────────────────────────────────────────────
     A faixa e o cartao. Sao os unicos tons da loja que NAO acompanham a
     superficie das outras pecas, e de proposito: o cartao e um objeto
     escuro, com metal, e o mesmo cinza das prateleiras o deixaria chapado.

     Continuam saindo do tema, e nao escritos no desenho, porque a folha
     clara precisa de outros — e um hex dentro do SVG ficaria escuro no
     tema claro. */
  --clube-fundo:linear-gradient(178deg,#141210 0%, #0A0908 62%, #100E0C 100%);
  --clube-cartao-alto:#33302B;
  --clube-cartao-meio:#161412;
  --clube-cartao-baixo:#0D0C0B;
  /* O que fica SOBRE a tarja dourada: ela e a parte clara do cartao, e
     texto claro ali some. */
  --clube-sobre-tarja:rgba(0,0,0,.66);
  --clube-relevo-sombra:rgba(0,0,0,.65);
  /* A marca de "sem foto" NAO usa o dourado da marca, e este e o ponto: em
     dourado ela ficava mais acesa que a foto de verdade do produto ao lado,
     e quem nao fotografou ganhava a vitrine. Cinza, ela preenche o buraco e
     deixa o olho ir para as fotos. */
  --sem-foto-traco:color-mix(in srgb,var(--texto-2) 34%,transparent);

  /* A marca virando texto. Sobre preto, o tom claro e o que se le. */
  --marca-texto:var(--marca-clara);
  --apoio-texto:var(--apoio-clara);
  /* Realce: texto sobre um fundo que JA e tingido da propria cor — faixa de
     convite, aviso do carrinho. Sobre preto pede o tom mais alto. */
  --marca-realce:var(--marca-brilho);
  --erro-realce:var(--erro-brilho);

  /* Sinalização sobre preto: tons claros, que é o que se lê aqui. */
  --erro:#B4394E;
  --erro-clara:#E58095;     /* texto de erro sobre fundo escuro */
  --erro-brilho:#F0A6B2;    /* faixa de impedimento, que já tem fundo vermelho */
  --ok:#79C9A4;
  --alerta:#E0A030;

  /* Pastilhas de estado. Sobre escuro, fundo translúcido e texto claro. */
  --ok-fundo:color-mix(in srgb,var(--ok) 12%,transparent);
  --ok-texto:var(--ok);
  --erro-fundo:color-mix(in srgb,var(--erro) 16%,transparent);
  --erro-texto:var(--erro-clara);
  --alerta-fundo:color-mix(in srgb,var(--alerta) 14%,transparent);
  --alerta-texto:var(--alerta);

  /* Superfícies de apoio do painel (usadas quando ele adota esta base). */
  --cabecalho-tabela:#0F0F0F;
  --trilho:#161616;
  --coluna:#111111;
}

/* ══════════════════════════════════════════════════════════════════════════
   4. BASE CLARA — o painel
   Papel quente, não branco puro: o painel fica aberto horas seguidas e o
   branco de tela cheia cansa mais que um creme.
   ══════════════════════════════════════════════════════════════════════════ */
[data-base="claro"]{
  --esquema:light;

  --fundo:#f7f6f2;
  --superficie:#ffffff;
  --superficie-alta:#ffffff;

  --linha:#e6e2d9;
  /* Borda de destaque: era #9b978c, que dava 2.92:1 contra o branco e
     reprovava no minimo de 3:1 para elemento de interface. */
  --linha-forte:#8c887e;

  --veu:rgba(0,0,0,.03);
  --veu-forte:rgba(0,0,0,.05);
  --luz:linear-gradient(180deg,var(--veu) 0%,transparent 60%);

  --texto:#16150f;
  --texto-2:#6f6c63;
  /* Era #9b978c (2.92:1) e depois #79766d. O segundo passava sobre branco,
     mas a loja clara tem PAPEL como fundo de pagina, mais escuro que o
     cartao: ali caia para 4.20:1. Este passa nos dois — 4.57 sobre papel,
     4.94 sobre branco. */
  --texto-3:#747066;

  --vidro:rgba(255,255,255,.78);
  --vidro-forte:rgba(255,255,255,.9);

  --cortina:rgba(0,0,0,.45);
  --cortina-leve:rgba(0,0,0,.4);

  --sombra:0 18px 40px rgba(0,0,0,.14);
  /* Sobre papel, o cartao branco so existe se tiver sombra: sem ela e uma
     mancha branca sobre creme, e o olho nao separa as camadas. */
  --sombra-cartao:0 1px 3px rgba(0,0,0,.07), 0 6px 16px rgba(0,0,0,.05);
  --sombra-cartao-alta:0 2px 6px rgba(0,0,0,.09), 0 14px 30px rgba(0,0,0,.09);
  --sombra-faixa:0 10px 26px rgba(0,0,0,.07);
  /* Sobre papel a sombra da barra precisa ser mais curta e mais forte que a
     das faixas: ela não tem fundo escuro atrás para somar, e no claro a
     barra é branca sobre papel creme — dois tons vizinhos. Sem sombra as
     duas camadas viram uma só. */
  --sombra-barra:0 -10px 24px rgba(0,0,0,.1);
  /* A sombra da base clara e mais curta e mais fraca: sobre papel, a mesma
     sombra do escuro vira uma mancha. As tres partes mudam juntas, e a folga
     embaixo do produto acompanha sozinha — ela sai das duas primeiras. */
  --sombra-desce:10px;
  --sombra-borra:16px;
  --sombra-cor:rgba(0,0,0,.12);

  /* A prateleira no claro. Nao e o negativo da escura: la a luz vem de cima
     e o fundo afunda no preto; aqui o papel ja e claro, entao o que separa o
     produto e a prateleira ser mais FUNDA que a pagina, nao mais clara. */
  --nicho-alto:#EDEDEA;
  --nicho-meio:#DFDFDB;
  --nicho-baixo:#CBCBC6;

  /* O mesmo plano B do bloco escuro, com o valor DESTA base: o produto sem
     cor guardada precisa cair no quadro claro, e nao no escuro. */
  --cor-do-produto:#DFDFDB;
  /* E o bloco da fita junto: sem esta linha, a categoria sem cor guardada
     cairia no quadro ESCURO no meio de uma loja clara. */
  --cor-da-categoria:#DFDFDB;

  /* No tema claro a moldura precisa ser MAIS clara que o nicho, nao mais
     escura: aqui ela e a excecao dentro de uma pagina ja clara. */
  --foto-clara-fundo:#FFFFFF;
  --foto-clara-borda:rgba(0,0,0,.09);
  --foto-clara-coracao-fundo:rgba(255,255,255,.86);
  --foto-clara-coracao-linha:rgba(0,0,0,.14);
  --foto-clara-coracao-traco:#4A4A4A;

  /* Halo sobre papel: quase nada. A 20% ele virava uma mancha azul difusa
     que parece defeito de impressao, nao luz. */
  --halo:color-mix(in srgb,var(--apoio) 7%,transparent);
  /* O contorno do desenho precisa do tom escurecido: o tom cheio da marca
     sobre prateleira clara e um risco que some. */
  --produto-traco:color-mix(in srgb,var(--marca-texto) 55%,transparent);

  /* O convite do clube no tema claro. O cartao continua escuro — ele e um
     objeto, e cartao de socio branco nao existe em lugar nenhum —, mas a
     faixa em volta acompanha o papel. */
  --clube-fundo:linear-gradient(178deg,#FFFDF8 0%,#F1EDE4 100%);
  /* Mais tinta que no escuro, e nao menos. Sobre a prateleira clara o mesmo
     34% desbota, e desenho desbotado nao le como discreto: le como defeito.
     Sai de `--texto-2` e nao da marca — ver a razao no tema escuro. */
  --sem-foto-traco:color-mix(in srgb,var(--texto-2) 62%,transparent);

  /* A marca virando texto. O ouro cheio da 2.78:1 contra o branco: serve de
     preenchimento, nao de letra. Escurecido a 70% ele passa (5.25:1) e
     continua sendo a mesma cor — nao um marrom escolhido a parte. A conta e
     em cima de var(--marca), entao acompanha a cor que o lojista escolher. */
  --marca-texto:color-mix(in srgb,var(--marca) 70%,#000000);
  --apoio-texto:color-mix(in srgb,var(--apoio) 70%,#000000);
  /* Sobre papel tingido, o realce e o mesmo tom escuro do texto: o tom
     alto que brilha no preto e invisivel aqui. */
  --marca-realce:var(--marca-texto);
  --erro-realce:var(--erro-texto);

  /* Sinalização sobre papel: os mesmos três estados, em tom escuro o
     bastante para se ler. Trocar por um tom da base escura reprova em
     contraste — foi medido, não é preferência. */
  --erro:#a32d2f;
  --erro-clara:#c9605f;
  --erro-brilho:#e08a88;
  --ok:#1d6b4a;
  --alerta:#8a5a08;

  /* Pastilhas de estado. Sobre claro, fundo lavado e texto escuro. */
  --ok-fundo:#eef0e8;
  --ok-texto:#3f4a35;
  --erro-fundo:#f7ebeb;
  /* Serve a dois usos: a letra da pastilha e qualquer texto de erro sobre o
     papel da pagina. Um tom so, porque a pastilha e um fundo lavado — o que
     se le nela tambem se le na pagina. */
  --erro-texto:#7a2020;
  --alerta-fundo:#fbf0da;
  --alerta-texto:#6b4a10;

  --cabecalho-tabela:#faf9f5;
  --trilho:#f1efe8;
  --coluna:#efece4;
}

/* ══════════════════════════════════════════════════════════════════════════
   Prévia da logo — sempre escura, nas duas bases
   A logo vai viver sobre o preto da loja. Prévia sobre branco esconde o erro
   mais comum: logo escura, ou com contorno preto, que some quando publicada.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --previa-fundo:#141312;
  --previa-xadrez:rgba(255,255,255,.05);
  --previa-texto:#8c887e;
}

/* ══════════════════════════════════════════════════════════════════════════
   Barra de rolagem
   Mora aqui, e nao na folha da loja ou do painel, porque quem decide a cor
   dela e a BASE — e a base e o assunto deste arquivo. A lateral do painel e
   uma ilha escura dentro de uma pagina clara: uma regra em cada folha
   deixaria as duas barras diferentes na mesma tela.

   `color-scheme` acima ja conserta o padrao do navegador. Isto aqui e o
   acabamento: fina, sem trilho, e do tom do proprio texto rebaixado — some
   quando nao esta em uso e aparece quando o dedo procura.
   ══════════════════════════════════════════════════════════════════════════ */

/* A area avisa o navegador de qual e a base dela. Vale para tudo que o CSS
   nao alcanca — barra de rolagem, campo de data, menu de select — e e
   herdado, entao a ilha escura dentro do painel claro avisa por si. */
[data-base]{color-scheme:var(--esquema)}

/* Firefox e o padrao novo. `thin` sem trilho e o mais discreto que existe
   sem sumir de vez — barra invisivel esconde que a lista continua. */
*{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--texto) 20%,transparent) transparent}

/* Chrome, Edge e Safari. A borda transparente com `background-clip` e o que
   afina o polegar sem afinar a area de clique: o alvo continua com 10px. */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
  background:color-mix(in srgb,var(--texto) 20%,transparent);
  border:3px solid transparent;background-clip:content-box;border-radius:999px;
}
::-webkit-scrollbar-thumb:hover{
  background:color-mix(in srgb,var(--texto) 34%,transparent);background-clip:content-box;
}
::-webkit-scrollbar-corner{background:transparent}