/* ─────────────────────────────────────────────────────────────────────────
   METRICUT — tokens
   Saída do design system (design/*.dc.html). ⛔ Não inventar valor aqui.

   O QUE `node design/conferir.mjs` CONFERE NESTE ARQUIVO (etapa 2 do auditor):
   · todo hex daqui existe na paleta das pranchas — ou é o que acento.js deriva do azul do
     Metricut (os valores de partida da pele interna), e o auditor confere a igualdade;
   · a única função de cor é o preto transparente das sombras (--sombra, --sombra-1, --sombra-3) — e,
     como exceção nomeada, os três transparentes do poste (o brilho de vidro e o filete do trilho);
   · o POSTE (--poste-*): definido uma vez, aqui, igual em todo tema e pele; --poste-azul é hex
     escrito (nunca var(--acento)); vermelho e azul dão ≥ 3:1 sobre o branco; o vermelho do poste não
     é o --ruim de tema nenhum; e o censo do poste reprova qualquer uso fora da fita e do selo da marca;
   · texto, apoio e as três semânticas dão ≥ 4,5:1 sobre --fundo, --sup, --sup-2, --sup-alta, o
     item selecionado e a zebra da tabela; borda de controle e marca gráfica dão ≥ 3:1 — nas duas
     peles e nos dois temas;
   · o tema escuro escrito duas vezes (escolha explícita e a do sistema) diz a mesma coisa.
   Ele também reprova qualquer hex, rgb() ou cor pelo nome FORA daqui, em publico/.
   ⚠️ Ele mede o que está nas listas dele. Um uso novo de cor sobre uma superfície que ninguém
   listou passa verde — por isso o censo dos tokens de acento, que reprova uso novo.

   DUAS PELES, uma só escada de superfícies (11/10/2026 — a página deixou de ser branca):
   · --sup-2   AFUNDADA: trilho, cabeçalho de tabela, linha em hover — um tom abaixo da mesa;
   · --fundo   A MESA: o fundo da página, com um fio do azul do produto (não é branco nem cinza neutro);
   · --sup     O PAPEL: cartão, menu, cabeçalho — a superfície mais clara, pousada na mesa (--sombra-1);
   · --sup-alta ELEVADA: o que flutua por cima de tudo — gaveta, diálogo, aviso, dica (--sombra).
     No claro ela é o mesmo branco do papel e quem a levanta é a sombra; no escuro, onde sombra
     não se vê, ela é um tom mais clara que o cartão.
   O que troca entre as peles é densidade e tipografia:
   · pública  (o cliente agenda): espaçosa, título em Archivo Black, acento da barbearia.
   · interna  (a barbearia trabalha): densa, Karla. Liga com <html data-pele="interna">.

   O ACENTO tem duas origens, e as duas passam por acento.js (que corrige a
   luminosidade para o tema em uso):
   · pele pública: é da BARBEARIA — não está aqui, vem do banco e é injetado em runtime;
   · pele interna: é do METRICUT — o valor de partida está no bloco da pele interna,
     mais abaixo, e central.js o rederiva a cada troca de tema.
   Exemplo vivo de tudo isto: /sistema.html
   ───────────────────────────────────────────────────────────────────────── */

:root {
  color-scheme: light;

  /* ── superfícies · tema claro (as duas peles). Os neutros são TINGIDOS: mesma matiz do azul do
        produto (OKLCH H≈265°), croma mínima (0,008–0,012) — é o que tira a tela do "branco de
        página em branco" sem virar cor. Medidos, não escolhidos no olho: ver o auditor. */
  --fundo:    #EEF1F7;   /* a mesa */
  --sup:      #FFFFFF;   /* o papel */
  --sup-2:    #E5E8ED;   /* afundada */
  --sup-alta: #FFFFFF;   /* elevada (no claro, quem levanta é a sombra) */
  --borda:    #D9DCE3;
  /* a borda que diz "isto se clica" — mín. 3:1 sobre TODA superfície, inclusive a afundada. A que
     só separa cartão é mais fraca de propósito: a 3:1 a tela vira grade cinza */
  --borda-controle: #7D8088;

  --texto:   #0A0A0A;
  --texto-2: #4D5057;
  --texto-3: #61656C;

  /* ── semânticas: significam ESTADO, nunca decoram. ⚠️ --bom e --ruim escureceram um passo em
        11/10/2026 (eram 0B7A45 e C8261B): com a superfície afundada mais funda eles caíam para
        4,37 e 4,53:1 nela. A matiz é a mesma — verde é atendido, vermelho é faltou. */
  --bom:     #107342;   /* atendido, pago, resolvido */
  --atencao: #8F5600;   /* falta pouco, precisa de olho — nunca bloqueia */
  --ruim:    #C42016;   /* não veio, cancelou, cobrança recusada */

  /* ── sombra: três alturas, sempre preto transparente (a cor da sombra não é escolha de tela)
        --sombra-1  o papel pousado na mesa (cartão): quase nada, só tira o "colado"
        --sombra    o que flutua (gaveta, diálogo, aviso, dica)
        --sombra-3  cenário — só a página de venda: o aparelho e a janela com as telas */
  --sombra-1: 0 1px 2px rgba(0,0,0,.05), 0 1px 1px rgba(0,0,0,.03);
  --sombra:   0 2px 6px rgba(0,0,0,.06), 0 12px 32px rgba(0,0,0,.12);
  --sombra-3: 0 2px 4px rgba(0,0,0,.05), 0 14px 28px rgba(0,0,0,.09), 0 44px 88px rgba(0,0,0,.14);

  /* ── O POSTE: as cores do poste de barbeiro. Existem em DOIS lugares — a fita (.pub-fita) e o selo da
        marca (.marca__selo) — e em nenhum outro: o censo do poste, no auditor, reprova qualquer outro uso.
        ⛔ O VERMELHO DO POSTE NÃO É COR DE INTERFACE. Não pinta botão, texto, borda, ícone nem estado:
        o único vermelho que SIGNIFICA algo continua sendo --ruim (faltou, cancelou, erro). O que separa
        os dois é o LUGAR, não o tom — a fita é uma faixa decorativa colada na borda, sempre junto de
        branco e azul; o erro é texto dentro de cartão. E vermelho segue proibido como ACENTO.
        ⚠️ IGUAIS EM TODO TEMA E EM TODA PELE: o poste é um objeto, não uma superfície — não escurece no
        tema escuro. Por isso estão só aqui, e nenhum bloco abaixo os redefine (o auditor confere).
        ⚠️ --poste-azul é o valor ESCRITO, nunca var(--acento): na página do cliente acento.js troca
        --acento pela cor da barbearia, e por aquela porta a cor da casa vazaria de volta para a fita.
        acento.js não lê, não deriva e não escreve nenhum --poste-*.
        Vermelho × azul entre si dão ≈ 1:1 — é por isso que o branco sempre os separa, na fita e na marca. */
  --poste-vermelho: #D7263D;   /* listra da fita · lâmina 1 da marca */
  --poste-azul:     #2B5CFF;   /* listra da fita · lâmina 2 da marca */
  --poste-branco:   #FFFFFF;   /* listra da fita · fundo do selo */
  --poste-tubo:     #DDE2EC;   /* o trilho vazio: a parte da fita ainda não preenchida */
  /* o tubo é de VIDRO: sombra nas duas bordas, um fio de luz a um terço da largura. São transparentes
     (a única função de cor daqui fora das sombras) porque ficam POR CIMA das listras, paradas. */
  --poste-vidro-sombra: rgba(10,20,50,.28);
  --poste-vidro-luz:    rgba(255,255,255,.38);
  --poste-filete:       rgba(20,30,60,.10);   /* o limite interno do trilho, sobre a mesa clara */

  /* ── tipografia */
  --f-display: "Archivo Black", system-ui, sans-serif;
  /* a marca. ⛔ Nunca muda de família: é ela que o cliente reconhece. */
  --f-marca:   "Archivo Black", system-ui, sans-serif;
  --f-corpo:   Karla, system-ui, sans-serif;
  --f-dado:    "DM Mono", ui-monospace, monospace;

  /* ── densidade · pele pública (é o padrão) */
  --corpo:     15px;
  --apoio:     13px;
  --campo:     16px;    /* ⚠️ abaixo de 16 o iOS dá zoom sozinho ao focar */
  --h-controle: 48px;   /* alvo de toque — nunca menos de 44 */
  --h-linha:    auto;
  --pad-cartao: 24px;
  --r-cartao:   16px;
  --r-campo:    12px;
  --r-chip:     8px;
  --r-selo:     8px;
  --r-pilula:   999px;

  /* ── escala de texto · pele pública. Os números saem das pranchas (Componentes),
        não de gosto: título 26, seção 22, dado 15, rótulo de coluna 10,5. */
  --t-titulo:  26px;
  --t-secao:   22px;
  --t-dado:    15px;
  --t-numero:  28px;   /* número de placar. ⚠️ sempre DM Mono, nunca Archivo Black */
  --t-selo:    10.5px;
  --t-coluna:  10.5px;

  /* ── espaço */
  --e-1: 4px;  --e-2: 8px;  --e-3: 12px; --e-4: 16px;
  --e-5: 24px; --e-6: 32px; --e-7: 48px; --e-8: 64px;

  --t: .22s cubic-bezier(.2,.7,.3,1);
}

/* ── tema escuro. Só os tokens que mudam. Guardado com :not([data-tema=claro])
      para a escolha explícita do usuário vencer o sistema operacional. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    color-scheme: dark;
    --fundo: #090B0F; --sup: #13161B; --sup-2: #1E2026; --sup-alta: #181B21;
    --borda: #2A2D33; --borda-controle: #686C73;
    --texto: #FAFAFA; --texto-2: #A6A9B0; --texto-3: #8B8E94;
    --bom: #3DD68C; --atencao: #F5A623; --ruim: #FF5C5C;
    --sombra-1: 0 1px 2px rgba(0,0,0,.4);
    --sombra: 0 2px 6px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.6);
    --sombra-3: 0 2px 4px rgba(0,0,0,.4), 0 14px 28px rgba(0,0,0,.5), 0 44px 88px rgba(0,0,0,.6);
  }
}
:root[data-tema="escuro"] {
  color-scheme: dark;
  --fundo: #090B0F; --sup: #13161B; --sup-2: #1E2026; --sup-alta: #181B21;
  --borda: #2A2D33; --borda-controle: #686C73;
  --texto: #FAFAFA; --texto-2: #A6A9B0; --texto-3: #8B8E94;
  --bom: #3DD68C; --atencao: #F5A623; --ruim: #FF5C5C;
  --sombra-1: 0 1px 2px rgba(0,0,0,.4);
  --sombra: 0 2px 6px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.6);
  --sombra-3: 0 2px 4px rgba(0,0,0,.4), 0 14px 28px rgba(0,0,0,.5), 0 44px 88px rgba(0,0,0,.6);
}

/* ─────────────────────────────────────────────────────────────────────────
   PELE INTERNA — a barbearia trabalhando.
   As superfícies são as mesmas da pública (papel claro sobre a mesa tingida); o que muda é a
   densidade, que aperta, e a tipografia. Nenhuma cor nova entra.
   ───────────────────────────────────────────────────────────────────────── */
:root[data-pele="interna"] {
  --corpo:      13.5px;
  --apoio:      12px;
  --campo:      13.5px;
  --h-controle: 36px;   /* ⚠️ ponteiro em desktop. No toque volta a 44 (abaixo) */
  --h-linha:    44px;
  --pad-cartao: 16px;
  --r-cartao:   10px;
  --r-campo:    8px;
  --r-selo:     6px;

  /* escala da prancha PeleInterna, seção 03: g-titulo, g-secao, g-dado, g-coluna.
     (--t-numero e --t-selo não mudam de pele) */
  --t-titulo:  20px;
  --t-secao:   15px;
  --t-dado:    13px;
  --t-coluna:  9.5px;

  /* ⭐ O acento da pele interna é o do METRICUT, não o da barbearia: o dono precisa
     reconhecer a ferramenta que ele assina. Estes são os mesmos quatro valores que
     painel.html e cadastro.html repetiam num <style> cada um — agora num lugar só.
     ⚠️ São o valor de PARTIDA (o que vale antes de o JS rodar). --acento é o escolhido; os
     outros três são o que acento.js DERIVA dele neste tema — o auditor confere a igualdade.
     ⚠️ --acento-texto NÃO é o azul cru: o cru dava 4,3:1 sobre o item selecionado, e ficava
     na tela enquanto central.js não chegava. Quem rederiva a cada troca de tema é central.js. */
  --acento: #2B5CFF; --acento-tinta: #FFFFFF; --acento-texto: #2655F8; --acento-sel: #E5EDFE;

  /* ⛔ Archivo Black sai daqui: caixa-alta larga vira ruído num cabeçalho de
     9,5px e cansa quem encara a tela 8h por dia. O peso do Karla separa título
     de corpo. A marca (--f-marca) é a única exceção e continua Archivo Black. */
  --f-display: Karla, system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root[data-pele="interna"]:not([data-tema="claro"]) { --acento-texto: #5C89F8; --acento-sel: #122147; }
}
/* o acento derivado para o tema escuro: sem isto o item selecionado nascia azul-claro no
   escuro (o valor do tema claro) e só se corrigia quando o JS chegava */
:root[data-pele="interna"][data-tema="escuro"] { --acento-texto: #5C89F8; --acento-sel: #122147; }

/* ⚠️ O alvo de 44px não sumiu — mudou de lugar. Ele vale onde se toca com o
   dedo, e isso inclui a pele interna aberta no celular.
   ⚠️ "Dedo" são DUAS condições: o ponteiro grosso OU a tela estreita (abaixo de 900px, onde a
   central vira gaveta). Só `pointer: coarse` deixava o alvo depender de o aparelho se declarar
   direito — e deixava a regra impossível de conferir num navegador de teste, que não se declara. */
@media (pointer: coarse), (max-width: 899.98px) {
  :root[data-pele="interna"] { --h-controle: 44px; --h-linha: 48px; --campo: 16px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   A PÁGINA DO PRÓPRIO METRICUT (a raiz do site: apresentação e venda)
   É pele PÚBLICA — espaçosa, título em Archivo Black —, mas quem fala ali é o Metricut, não uma
   barbearia: o acento é o azul do produto, e não há banco de onde ele chegue em runtime.
   Liga com <html data-acento="metricut" data-tema="claro"> (a página é só clara, por decisão).
   ⚠️ Os cinco valores são o que acento.js DERIVA do azul no tema claro, escritos aqui para a
   página nascer azul sem esperar script. Não são escolhidos: o auditor confere a igualdade com
   o motor, como faz com o bloco da pele interna.
   (O :not() está aí pelo peso: componentes.css pinta a pele pública de cinza até a barbearia
   chegar, e esta regra tem de vencer aquela.)
   ───────────────────────────────────────────────────────────────────────── */
:root[data-acento="metricut"]:not([data-pele="interna"]) {
  --acento: #2B5CFF; --acento-tinta: #FFFFFF; --acento-texto: #2655F8; --acento-marca: #2B5CFF; --acento-sel: #E5EDFE;
  /* O VÉU do vídeo da abertura: quanto do --fundo da faixa escura fica por cima da filmagem ATRÁS DO TEXTO (site.css).
     Não é cor nova — é a opacidade de uma que já existe. ⛔ Não baixe "para o vídeo aparecer mais": o auditor compõe
     este véu sobre BRANCO puro (o pior quadro que um vídeo pode ter) e reprova se o --texto da faixa escura ficar
     abaixo de 4,5:1 — o piso é ~57%. */
  --site-veu: 66%;
}

/* A FAIXA ESCURA da página do Metricut: um trecho da página clara que veste o tema escuro, para dar
   ritmo (a do dinheiro, na página de venda). Liga com data-faixa="escura" no elemento.
   ⚠️ É a TERCEIRA cópia do tema escuro (as outras duas: a escolha explícita e a do sistema operacional) mais o
   acento do Metricut derivado para o escuro. Nenhum valor é escolhido aqui: o auditor confere que as superfícies
   são as de :root[data-tema="escuro"] e que os cinco de acento são o que acento.js deriva do azul.
   ⛔ Só sob data-acento="metricut": numa página de barbearia o acento vem do banco, e esta faixa o trocaria. */
:root[data-acento="metricut"] [data-faixa="escura"] {
  color-scheme: dark;
  --fundo: #090B0F; --sup: #13161B; --sup-2: #1E2026; --sup-alta: #181B21;
  --borda: #2A2D33; --borda-controle: #686C73;
  --texto: #FAFAFA; --texto-2: #A6A9B0; --texto-3: #8B8E94;
  --bom: #3DD68C; --atencao: #F5A623; --ruim: #FF5C5C;
  --sombra-1: 0 1px 2px rgba(0,0,0,.4);
  --sombra: 0 2px 6px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.6);
  --sombra-3: 0 2px 4px rgba(0,0,0,.4), 0 14px 28px rgba(0,0,0,.5), 0 44px 88px rgba(0,0,0,.6);
  --acento: #2B5CFF; --acento-tinta: #FFFFFF; --acento-texto: #5C89F8; --acento-marca: #2B5CFF; --acento-sel: #122147;
}

/* ─────────────────────────────────────────────────────────────────────────
   TIPOGRAFIA — os dois papéis
   ⚠️ REGRA NASCIDA DE DEFEITO MEDIDO: Archivo Black NUNCA em número dentro de
   caixa estreita. Ela é larga — foi assim que "R$ 585,00" estourou o cartão do
   caixa num celular de 320px. Dinheiro, hora e duração são SEMPRE .dado.
   ⛔ E Archivo Black não entra na pele interna: caixa-alta pesada vira ruído
   num cabeçalho de 9,5px e cansa quem olha a tela 8h por dia.
   ───────────────────────────────────────────────────────────────────────── */
.display { font-family: var(--f-display); text-transform: uppercase; letter-spacing: -.01em; }
.dado    { font-family: var(--f-dado); font-variant-numeric: tabular-nums; }
.rotulo  { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; }
:root[data-pele="interna"] .rotulo { font-size: 9.5px; }
:root[data-pele="interna"] .display { text-transform: none; font-weight: 700; letter-spacing: -.005em; }