/* Tokens do CaptureHub — porte fiel do DESIGN-SYSTEM.md (v1.1) para a web.
   Nenhum valor de cor pode existir fora deste arquivo: hex solto em folha de
   estilo ou em marcação é defeito, a mesma regra que vale para o XAML e o C#.
   Cor nova entra primeiro no DESIGN-SYSTEM.md e só depois aqui. */

:root {
    /* Paleta oficial — §1 */
    --cor-navy: #0A0F1E;
    --cor-navy-superficie: #0E1322;
    --cor-menta: #2BE3A6;
    --cor-menta-escura: #1ED89A;
    --cor-branco-gelo: #F6F8FB;
    --cor-cinza-nevoa: #9AA7BA;
    --cor-tinta: #0E1526;

    /* Tokens funcionais — §1 */
    --cor-gradiente-topo: #4EF2BC;
    --cor-gravacao: #E5484D;
    --cor-aviso: #FFB020;
    --cor-erro: #E5484D;
    --cor-toggle-desligado: #24304A;
    --cor-overlay-escuro: rgb(0 0 0 / 60%);

    --gradiente-marca: linear-gradient(180deg, var(--cor-gradiente-topo) 0%, var(--cor-menta-escura) 100%);

    /* Tipografia — §2. Poppins ainda não é auto-hospedada: a pilha cai em
       Segoe UI, como o design system já previa. Nenhuma fonte é buscada em
       servidor de terceiro, por coerência com o ADR 0009. */
    --fonte-titulo: "Poppins", "Segoe UI", system-ui, sans-serif;
    --fonte-corpo: "Segoe UI", system-ui, sans-serif;

    --tamanho-tela: 2rem;        /* título de tela: 32 px */
    --tamanho-secao: 1.25rem;    /* título de seção: 20 px */
    --tamanho-corpo: 0.875rem;   /* corpo: 14 px */
    --tamanho-legenda: 0.6875rem;/* legenda: 11 px */

    /* Título de destaque, exclusivo da web. Não existe no DESIGN-SYSTEM.md:
       proposto para a §2 e pendente de aprovação. */
    --tamanho-destaque: clamp(2rem, 5vw, 3.25rem);

    /* Grade de 8 px — §3 */
    --espaco-1: 8px;
    --espaco-2: 16px;
    --espaco-3: 24px;
    --espaco-4: 32px;
    --espaco-6: 48px;
    --espaco-8: 64px;
    --espaco-12: 96px;

    /* Raios — §3 */
    --raio-controle: 8px;
    --raio-cartao: 12px;
    --raio-modal: 16px;
    --raio-pilula: 999px;

    /* Elevação única — §3 */
    --sombra-padrao: 0 4px 16px rgb(0 0 0 / 35%);

    --largura-conteudo: 1120px;
    --altura-cabecalho: 64px;
}