/* Tokens do ERP Altec. Única folha com cor, raio, sombra, camada e tempo.
   Valores: PILOTO-FRONTEND-PROMPT.md §5.3-5.5 com as correções P-11..P-14 (DECISOES-DO-PILOTO.md).
   Tema por atributo: html[data-tema] e qualquer bloco [data-tema] (a tela #/estados mostra os dois lado a lado). */

:root,
[data-tema="claro"] {
  color-scheme: light;
  --fundo: #F7F6F8;
  --superficie: #FFFFFF;
  --superficie-2: #F1EFF3;
  --borda: #E1DDE4;
  --tinta: #2A232D;
  --tinta-2: #56485B;
  --tinta-3: #5C6B73;
  --marca: #17B3BF;
  --marca-texto: #0B6B75;
  --marca-fundo: #0B6B75;
  --acao: #56485B;
  --acao-hover: #3F3446;
  --acao-texto: #FFFFFF;
  --ok: #17663F;
  --ok-fundo: #E7F3EC;
  --warn: #7A5200;
  --warn-fundo: #FBF1DC;
  --crit: #A33A35;
  --crit-fundo: #FAE7E6;
  --crit-fundo-hover: #F4D9D7;
  --crit-ativo: #F0CFCC;
  --acao-active: #322A38;
  --info: #17527A;
  --info-fundo: #E6F0F7;
  --neutro: #5C6B73;
  --neutro-fundo: #EFEDF1;
  --dado: var(--marca-texto);
  --dado-2: var(--tinta-2);
  --foco: var(--marca-texto);
  --veu: rgb(20 17 22 / 0.5);
  --teca-halo: none;
  --capa: #3F3446;
  --capa-texto: #FFFFFF;
  --spec-grade: color-mix(in srgb, var(--marca) 30%, transparent);
  --spec-alvo: color-mix(in srgb, var(--warn) 55%, transparent);
}

[data-tema="escuro"] {
  color-scheme: dark;
  --fundo: #141116;
  --superficie: #1D1920;
  --superficie-2: #262029;
  --borda: #332D38;
  --tinta: #F2EFF3;
  --tinta-2: #CFC6D2;
  --tinta-3: #B4ACB8;
  --marca: #17B3BF;
  --marca-texto: #4FC7D1;
  --marca-fundo: #0B6B75;
  --acao: #17B3BF;
  --acao-hover: #4FC7D1;
  --acao-texto: #141116;
  --ok: #7DD3A8;
  --warn: #F0C674;
  --crit: #E8A0A0;
  --info: #8FC7E8;
  --neutro: #B4ACB8;
  --ok-fundo: color-mix(in srgb, var(--ok) 14%, var(--superficie));
  --warn-fundo: color-mix(in srgb, var(--warn) 14%, var(--superficie));
  --crit-fundo: color-mix(in srgb, var(--crit) 14%, var(--superficie));
  --crit-fundo-hover: color-mix(in srgb, var(--crit) 18%, var(--superficie));
  --crit-ativo: color-mix(in srgb, var(--crit) 22%, var(--superficie));
  --acao-active: #12A0AA;
  --info-fundo: color-mix(in srgb, var(--info) 14%, var(--superficie));
  --neutro-fundo: color-mix(in srgb, var(--neutro) 14%, var(--superficie));
  --dado: var(--marca);
  --dado-2: var(--tinta-2);
  --foco: var(--marca-texto);
  --veu: rgb(0 0 0 / 0.6);
  --teca-halo: drop-shadow(0 0 8px rgb(242 239 243 / 0.55));
  --capa: #3F3446;
  --capa-texto: #FFFFFF;
}

:root {
  /* Tipografia (§5.4). Atalho `font`: peso tamanho/linha família. */
  --fonte-texto: Inter, system-ui, sans-serif;
  --fonte-titulo: "DM Sans", system-ui, sans-serif;
  /* P-117: código, chave de loja, SQL e hash. Só estes usos; texto corrido nunca é mono. */
  --fonte-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --t-legenda: 500 12px/16px var(--fonte-texto);
  --t-apoio: 400 13px/20px var(--fonte-texto);
  --t-corpo: 400 15px/22px var(--fonte-texto);
  --t-campo: 400 16px/24px var(--fonte-texto);
  --t-titulo: 600 18px/26px var(--fonte-texto);
  --t-numero: 600 22px/28px var(--fonte-texto);
  --t-pagina: 600 24px/32px var(--fonte-titulo);
  --t-hero: 700 32px/40px var(--fonte-titulo);

  /* Raio (§5.5) */
  --r-chip: 6px;
  --r-card: 10px;
  --r-modal: 14px;
  --r-pill: 999px;

  /* Elevação: o que pousa e o que interrompe */
  --superficie-elev: var(--superficie);
  --sombra-menu: 0 4px 16px rgb(0 0 0 / 0.08);
  --sombra-modal: 0 8px 24px rgb(0 0 0 / 0.12);

  /* Camadas: nenhum sexto número */
  --z-fixo: 10;
  --z-flutuante: 20;
  --z-menu: 30;
  --z-painel: 40;
  --z-modal: 50;

  /* Movimento: teto 160 ms; giro contínuo é a exceção */
  --dur-rapido: 120ms;
  --dur-normal: 160ms;
  --dur-giro: 800ms;
  --dur-zero: 0.01ms;
  --ease-saida: cubic-bezier(0.2, 0, 0, 1);
  --ease-padrao: cubic-bezier(0.4, 0, 0.2, 1);
  --anim-girar: girar var(--dur-giro) linear infinite;
  --anim-entrar-painel: entrar-painel var(--dur-normal) var(--ease-saida) 1;
  --anim-entrar-barra: entrar-barra var(--dur-rapido) var(--ease-saida) 1;
  --anim-esqueleto: esqueleto var(--dur-giro) var(--ease-padrao) infinite alternate;
  --anim-step-pulse: step-pulse var(--dur-giro) var(--ease-padrao) infinite alternate;

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

  /* Medidas de layout */
  --b: 1px;
  --b-foco: 2px;
  --offset-foco: 2px;
  /* Alvo de toque (P-81): 40 px vale para todo controle, inclusive link dentro de frase; só th tem 32. A ≤ 639 px sobe para o toque. */
  --alvo: 40px;
  --alvo-min: var(--alvo);
  --alvo-toque: 44px;
  --respiro-fim: var(--e-6);
  --cabecalho-h: 56px;
  --status-h: 40px;
  --nav-w: 56px;
  --fab: 40px;
  --fab-img: 28px;
  --trilho-teca: 400px;
  --folha-w: 400px;
  --dlg-sm: 400px;
  --dlg-md: 560px;
  --dlg-lg: 720px;
  --leitura: 72ch;
  --logo-w: 87px;
  --logo-h-login: 32px;
  --teca-vazio: 160px;
  --spec-w: 360px;
  --col-lista: 16rem;
}

@media (min-width: 1600px) {
  :root { --nav-w: 240px; }
}
@media (max-width: 639px) {
  :root { --alvo: var(--alvo-toque); --fab: var(--alvo-toque); --status-h: var(--alvo-toque); }
}

@keyframes girar { to { transform: rotate(360deg); } }
@keyframes entrar-painel { from { transform: translateX(100%); } to { transform: none; } }
@keyframes entrar-barra { from { transform: translateY(-8px); } to { transform: none; } }
@keyframes esqueleto { from { opacity: 1; } to { opacity: 0.55; } }
@keyframes step-pulse { from { opacity: 1; } to { opacity: 0.7; } }

/* F9: no escuro o menu flutuante pousa numa superfície mais clara que a do cartão, com sombra que ainda se vê sobre fundo escuro.
   `:root[data-tema]` (especificidade maior) porque o bloco de elevação do :root vem depois do bloco do tema. */
:root[data-tema="escuro"] {
  --superficie-elev: #2D2631;
  --sombra-menu: 0 8px 24px rgb(0 0 0 / 0.6);
  --sombra-modal: 0 12px 32px rgb(0 0 0 / 0.65);
}