/*
 * Arquivo: pwa/biblioteca/tema.css
 * Descrição: O TEMA do app (D-108, docs/BIBLIOTECA_UI.md). Toda cor, sombra, fonte, raio, tamanho padronizado,
 *            camada e movimento da PWA mora aqui; o estilo.css e o JavaScript só usam var(--…).
 *
 * COMO TROCAR:
 *   - A cor do app: mude --cor-marca nos DOIS blocos (claro, logo abaixo, e escuro, no fim do arquivo), rode
 *     `node ferramentas/gerar-tema.mjs` (leva a cor à barra do iPhone e ao manifesto) e `node --test "testes/*.test.mjs"`
 *     (o teste de contraste diz se a troca deixou algum texto ilegível). O ícone da tela de início NÃO muda: ele é
 *     uma imagem própria (ferramentas/icone/icone-papelada.svg e ferramentas/gerar-icones.mjs).
 *   - Qualquer outra cor: o mesmo caminho, no token dela.
 *   - Tamanho de fonte, raio, sombra, velocidade: troque o valor aqui; vale no app inteiro.
 *   - Depois de qualquer troca: subir VERSAO_PWA (app.mjs) e VERSAO (sw.js) e publicar.
 *
 * Tela estreita: o CSS não aceita variável dentro de @media, então o ponto de quebra é sempre (max-width: 359px)
 * (iPhone SE de 1ª geração); o teste da biblioteca recusa outro valor.
 */

:root {
  color-scheme: light dark;

  /* ===== Cores: tema claro ===== */
  --cor-fundo: #f6f7f5;
  --cor-texto: #1d2420;
  --cor-texto-suave: #5c6862;
  --cor-marca: #1f5f4a;            /* A COR DO APP: botões, links, foco, chip ativo, ação Pagar */
  --cor-sobre-marca: #ffffff;      /* texto em cima de cor cheia (botão, ação do gesto, ícone de status) */
  --cor-erro: #b3261e;
  --cor-ok: #1e7a45;
  --cor-alerta: #8a5a00;           /* 5,5:1 sobre o fundo (era #9a6700, 4,53:1) */
  --cor-cartao: #ffffff;
  --cor-borda: #d9ded9;
  --cor-borda-campo: #7d8883;      /* 3:1 contra o fundo do campo (WCAG 1.4.11) */
  --cor-toque: #eef2ef;
  --cor-logo-fundo: #ffffff;       /* o quadrado atrás da logo do emissor: branco serve a toda logo, nos dois temas */
  --cor-pagina-pdf: #ffffff;
  --cor-veu: rgba(0, 0, 0, 0.45);  /* atrás da folha que sobe de baixo */
  --cor-avatar-neutro: #6b7a73;    /* círculo do emissor sem cor válida na planilha */
  --cor-avatar-neutro-letra: #000000;   /* o neutro tem luminância 0,183: a letra preta dá 4,66:1 */
  --cor-avatar-letra-clara: #ffffff;    /* letra sobre cor escura do emissor */
  --cor-avatar-letra-escura: #000000;   /* letra sobre cor clara do emissor (o corte é a luminância 0,179) */

  /* ===== Sombras ===== */
  /* Duas camadas (a curta, de contato, e a longa, difusa): o botão "+" parece estar acima da lista. */
  --sombra-fab: 0 6px 14px rgba(0, 0, 0, 0.30), 0 2px 5px rgba(0, 0, 0, 0.22);
  --sombra-fab-pressionado: 0 2px 6px rgba(0, 0, 0, 0.28);
  --sombra-puxar: 0 2px 8px rgba(0, 0, 0, 0.25);   /* o indicador do puxar para atualizar */
  --sombra-aviso-pe: 0 4px 16px rgba(0, 0, 0, 0.3);
  --sombra-pagina-pdf: 0 1px 3px rgba(0, 0, 0, 0.25);
  --sombra-anel-status: 0 0 0 2px var(--cor-cartao);
  --sombra-divisa-acoes: inset 1px 0 0 var(--cor-sobre-marca);   /* Pagar e Já paguei têm cores próximas (1,4:1): um fio separa */
  --sombra-contorno-marca: inset 0 0 0 1px var(--cor-marca);
  --sombra-contorno-erro: inset 0 0 0 1px var(--cor-erro);

  /* ===== Tipografia ===== */
  --familia-texto: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --familia-mono: ui-monospace, Menlo, monospace;
  --fonte-base: 16px;
  --altura-linha-base: 1.45;
  --altura-linha-titulo: 1.25;
  --altura-linha-compacta: 1.15;
  --fonte-valor-grande: 1.8rem;    /* valor no detalhe */
  --fonte-nome-app: 1.6rem;        /* "Papelada" no topo */
  --fonte-glifo-grande: 1.5rem;    /* × da busca */
  --fonte-titulo-tela: 1.4rem;
  --fonte-valor-medio: 1.4rem;     /* valor na folha */
  --fonte-titulo-detalhe: 1.3rem;
  --fonte-glifo-medio: 1.3rem;     /* × do aviso */
  --fonte-titulo-folha: 1.2rem;
  --fonte-titulo-cartao: 1.1rem;
  --fonte-subtitulo: 1rem;
  --fonte-corpo-menor: 0.95rem;    /* linha digitável, aviso do pé */
  --fonte-pequena: 0.9rem;         /* chips, filtro, avisos, subtítulos */
  --fonte-legenda: 0.85rem;        /* cabeçalho dos grupos, emissor da linha, passo */
  --fonte-mini: 0.8rem;            /* prazo, ícone de status, ações do gesto, versão */
  --fonte-selo: 0.75rem;
  --fonte-status-lista: 0.7rem;
  --fonte-status-lista-estreita: 0.65rem;
  --peso-normal: 400;
  --peso-forte: 600;
  --peso-titulo: 700;
  --espacamento-maiusculas: 0.04em;

  /* ===== Formas, foco e estados ===== */
  --raio-alca: 2px;
  --raio-selo: 6px;
  --raio-controle: 8px;            /* campos e botões */
  --raio-caixa: 10px;              /* busca, filtro, aviso, opção */
  --raio-cartao: 12px;             /* lista, cartão, aviso do pé, logo, esqueleto */
  --raio-folha: 16px;
  --raio-redondo: 9999px;          /* círculo ou pílula: avatar, status, botões redondos, chip, "+" */
  --foco-largura: 2px;
  --foco-afastamento: 2px;
  --foco-afastamento-dentro: -3px; /* linhas e listas cortam o que passa da borda: o anel vai para dentro */
  --opacidade-desativado: 0.5;
  --brilho-pressionado: 0.9;

  /* ===== Tamanhos ===== */
  --alvo-toque: 44px;              /* menor alvo de toque (44 pt, diretriz da Apple) */
  --tamanho-avatar: 40px;
  --tamanho-logo: 44px;
  --tamanho-logo-estreito: 40px;
  --tamanho-fab: 56px;
  --tamanho-puxar: 40px;           /* o indicador do puxar para atualizar */
  --tamanho-status: 22px;
  --tamanho-status-lista: 18px;
  --tamanho-status-lista-estreita: 16px;
  --icone-tamanho: 24px;
  --icone-tamanho-pequeno: 14px;
  --icone-tamanho-fab: 26px;
  --icone-traco: 2;
  --icone-traco-fab: 2.4;
  --largura-conteudo: 640px;       /* coluna do app no tablet e na janela larga */
  --largura-folha: 560px;
  --largura-acao-gesto: 76px;

  /* ===== Camadas (z-index), de baixo para cima ===== */
  --camada-linha: 1;
  --camada-topo: 2;
  --camada-puxar: 4;               /* o indicador do puxar para atualizar: sobre o topo, sob o "+" */
  --camada-fab: 5;
  --camada-avisos: 8;              /* abaixo da folha: o aviso nunca cobre os botões de uma janela aberta */
  --camada-folha: 10;

  /* ===== Movimento ===== */
  --duracao-deslize: 0.2s;         /* a linha arrastada e o "+"; GESTO.ANIMACAO_MS (comportamento.mjs) não pode ser menor */
  --duracao-subir: 0.2s;           /* a folha */
  --duracao-sombra: 0.15s;
  --duracao-giro: 1s;              /* ícone de atualizar */
  --duracao-pulso: 1.6s;           /* esqueleto da lista */
  --curva-padrao: ease;
  --curva-entrada: ease-out;
  --curva-giro: linear;
  --curva-pulso: ease-in-out;
}

/* ===== Cores e sombras: tema escuro ===== */
@media (prefers-color-scheme: dark) {
  :root {
    --cor-fundo: #121614;
    --cor-texto: #e6ebe8;
    --cor-texto-suave: #9aa6a0;
    --cor-marca: #6fc2a2;
    --cor-sobre-marca: #121614;    /* branco sobre o verde-menta dava 2,1:1; escuro dá 8,6:1 */
    --cor-erro: #f2b8b5;
    --cor-ok: #7fd3a0;
    --cor-alerta: #f0c060;
    --cor-cartao: #1b211e;
    --cor-borda: #2c3531;
    --cor-borda-campo: #6a7771;    /* 3:1 contra o cartão e o fundo (era #5f6b65, 2,94:1 sobre o cartão) */
    --cor-toque: #232b27;
    /* A sombra preta quase não aparece sobre o fundo escuro: sombra mais forte e um filete claro na borda. */
    --sombra-fab: 0 6px 16px rgba(0, 0, 0, 0.65), 0 2px 6px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.10);
    --sombra-fab-pressionado: 0 2px 6px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.10);
  }
}