/* =========================================================================
   Tokens do sistema de desenho DeTrigo
   -------------------------------------------------------------------------
   Uma única fonte de verdade para cor, espaço, tipo e forma.

   Regra: nenhum ficheiro de estilo nem componente escreve um valor literal.
   Se um valor é preciso e não existe aqui, acrescenta-se aqui primeiro. Foi a
   ausência disto que deixou 846 linhas de CSS com dezenas de verdes ligeiramente
   diferentes e nove raios de canto.

   O contexto é industrial: ecrãs vistos de pé, muitas vezes de longe, por vezes
   com luvas. Daí o texto base a 15px e não a 13, os alvos de toque com 40px, e
   contraste acima de 4.5:1 em tudo o que é para ler.
   ========================================================================= */

:root {
    /* ---- Cor: superfícies -------------------------------------------- */
    --cor-fundo: #f4f1ea;
    --cor-superficie: #ffffff;
    --cor-superficie-suave: #faf8f4;
    --cor-superficie-fria: #f2efe8;

    /* ---- Cor: traços -------------------------------------------------- */
    --cor-linha: #ded8cc;
    --cor-linha-suave: #eee9e0;
    --cor-linha-forte: #c9c2b4;

    /* ---- Cor: texto --------------------------------------------------- */
    /* Verificados sobre --cor-fundo (#f4f1ea) e não sobre branco: é o fundo
       tingido que manda, porque é sobre ele que a maior parte do texto assenta.
       O tom fraco era #6b7873 — 4.6:1 sobre branco, mas 4.3:1 sobre o fundo real,
       o que punha centenas de rótulos e metadados abaixo do legível. */
    --cor-texto: #17312b;         /* 11.8:1 sobre o fundo */
    --cor-texto-suave: #4d5b55;   /*  6.7:1 sobre o fundo */
    --cor-texto-fraco: #5b6862;   /*  5.2:1 — o mínimo, só para apoio */

    /* ---- Cor: marca --------------------------------------------------- */
    --cor-marca: #173d35;
    --cor-marca-clara: #235347;
    --cor-marca-fundo: #e9f4ec;
    --cor-destaque: #8c5620;   /* 5.2:1 sobre o fundo — usa-se em etiquetas de 12px */

    /* ---- Cor: estado --------------------------------------------------
       Quatro tons, cada um com traço, fundo e texto já verificados para
       contraste. Um estado nunca é comunicado só por cor: leva sempre
       palavra ou ícone. */
    --cor-ok: #1f5f43;
    --cor-ok-fundo: #e4f0e8;
    --cor-ok-linha: #b9d8c6;

    --cor-aviso: #8a5a10;
    --cor-aviso-fundo: #fbf1dd;
    --cor-aviso-linha: #e8d3a4;

    --cor-erro: #8f3f38;
    --cor-erro-fundo: #fbeceb;
    --cor-erro-linha: #eebfba;

    --cor-info: #2d5570;
    --cor-info-fundo: #e8eff5;
    --cor-info-linha: #bcd0e0;

    /* ---- Cor: barra lateral -------------------------------------------
       A barra é escura para se separar do trabalho sem competir com ele. As
       cores viviam soltas no CSS do shell; ficam aqui porque também fazem
       parte do sistema, e porque o contraste sobre fundo escuro tem de ser
       verificado como qualquer outro. */
    --cor-barra: #173d35;
    --cor-barra-fundo: #0f2c27;
    --cor-barra-texto: #f8f3e8;      /* 13.4:1 sobre a barra */
    --cor-barra-texto-suave: #b9d0c8; /*  7.1:1 — o mínimo aqui */
    --cor-barra-realce: #f3e8d5;
    --cor-barra-marca: #d79a52;

    /* ---- Espaço -------------------------------------------------------
       Escala de 4. Nada entre estes valores: é o que mantém o ritmo vertical
       previsível de ecrã para ecrã. */
    --e-1: 4px;
    --e-2: 8px;
    --e-3: 12px;
    --e-4: 16px;
    --e-5: 24px;
    --e-6: 32px;
    --e-7: 48px;
    --e-8: 64px;

    /* ---- Tipo ---------------------------------------------------------
       Seis tamanhos. Um ecrã usa três, no máximo quatro. Mais do que isso
       deixa de haver hierarquia e passa a haver ruído. */
    --letra: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --letra-mono: "Cascadia Code", "Consolas", ui-monospace, monospace;

    --t-xs: 0.75rem;    /* 12px — etiquetas, apenas com maiúsculas e espaçamento */
    --t-s: 0.8125rem;   /* 13px — apoio, metadados */
    --t-m: 0.9375rem;   /* 15px — texto corrente e tabelas */
    --t-l: 1.125rem;    /* 18px — títulos de painel */
    --t-xl: 1.5rem;     /* 24px — título de secção */
    --t-2xl: 2rem;      /* 32px — título de página */

    --peso-normal: 400;
    /* Inter no browser não tem eixo 550; 500 é o passo disponível mais próximo. */
    --peso-medio: 500;
    --peso-forte: 700;

    --altura-apertada: 1.25;
    --altura-normal: 1.55;

    /* ---- Forma -------------------------------------------------------- */
    --raio-s: 6px;
    --raio-m: 10px;
    --raio-l: 14px;
    --raio-redondo: 999px;

    /* ---- Elevação -----------------------------------------------------
       Duas sombras. Uma para o que assenta na página, outra para o que
       flutua por cima dela. Não há terceira. */
    --sombra-assente: 0 1px 2px rgba(23, 49, 43, .05);
    --sombra-flutuante: 0 12px 32px rgba(23, 49, 43, .12);

    /* ---- Alvos --------------------------------------------------------
       O mínimo com que uma pessoa acerta de pé, com pressa, eventualmente
       com luvas. Vale para botões e para qualquer coisa clicável. */
    --alvo-min: 40px;

    /* Altura da barra do topo em ecrãs estreitos. Vive aqui porque a gaveta de navegação
       precisa do mesmo valor para começar por baixo dela. */
    --altura-topo: 56px;
    --alvo-compacto: 32px;

    /* O alvo do terminal de chão de fábrica. Não é um 40px arredondado para cima: é a medida
       que uma mão com luva de padaria acerta sem olhar, à frente de uma máquina a andar. */
    --alvo-grande: 56px;

    /* ---- Movimento ---------------------------------------------------- */
    --transicao: 120ms ease;
}

@media (prefers-reduced-motion: reduce) {
    :root { --transicao: 0ms; }
}