/* Tokens de design.
   Nenhuma cor é escrita fora daqui. Se aparecer um #hex em outro arquivo,
   é bug — é o que mantém claro e escuro coerentes sem retrabalho. */

:root {
    color-scheme: light dark;

    /* Superfícies */
    --fundo:            #f5f4f1;
    --superficie:       #ffffff;
    --superficie-2:     #faf9f6;
    --superficie-3:     #efedE8;

    /* Traços */
    --borda:            #e4e1da;
    --borda-forte:      #ccc7bd;

    /* Texto */
    --texto:            #1b1a18;
    --texto-suave:      #63605a;
    --texto-apagado:    #948f86;
    --texto-invertido:  #ffffff;

    /* Acento — verde de "pagar" */
    --acento:           #0e6b4c;
    --acento-forte:     #0a5239;
    --acento-suave:     #e5f1ec;
    --acento-borda:     #b9d9cb;

    /* Estados */
    --alerta:           #a03a17;
    --alerta-suave:     #fbeee8;
    --alerta-borda:     #edcdbc;

    --aviso:            #8a6712;
    --aviso-suave:      #fdf6e3;
    --aviso-borda:      #ecdcae;

    --info:             #1d5a80;
    --info-suave:       #e8f1f7;
    --info-borda:       #bcd6e6;

    --parado:           #6b6862;
    --parado-suave:     #f0eeea;

    /* Foco — sempre visível, nunca outline:none sem substituto */
    --foco:             #1d5a80;

    /* Escala tipográfica */
    --fonte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;
    --fonte-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                  "Liberation Mono", monospace;

    --txt-xs:   0.75rem;
    --txt-sm:   0.8125rem;
    --txt-base: 0.9375rem;
    --txt-md:   1.0625rem;
    --txt-lg:   1.25rem;
    --txt-xl:   1.5rem;
    --txt-2xl:  2rem;
    --txt-3xl:  2.5rem;

    /* Espaçamento */
    --e-1: 0.25rem;
    --e-2: 0.5rem;
    --e-3: 0.75rem;
    --e-4: 1rem;
    --e-5: 1.5rem;
    --e-6: 2rem;
    --e-7: 3rem;
    --e-8: 4rem;

    /* Formas */
    --raio-sm: 4px;
    --raio:    8px;
    --raio-lg: 14px;
    --raio-full: 999px;

    --sombra-sm: 0 1px 2px rgba(27, 26, 24, 0.06);
    --sombra:    0 2px 8px rgba(27, 26, 24, 0.07);
    --sombra-lg: 0 8px 28px rgba(27, 26, 24, 0.10);

    --largura-conteudo: 720px;
    --largura-admin: 1180px;
}

/* O sistema respeita a preferência do aparelho; o botão de tema sobrepõe. */
@media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"]) {
        --fundo:            #14151a;
        --superficie:       #1c1e25;
        --superficie-2:     #22252d;
        --superficie-3:     #2a2e37;

        --borda:            #313640;
        --borda-forte:      #454b57;

        --texto:            #eceae5;
        --texto-suave:      #a8a49c;
        --texto-apagado:    #77736c;
        --texto-invertido:  #14151a;

        --acento:           #4bbd91;
        --acento-forte:     #6bd0a8;
        --acento-suave:     #17352a;
        --acento-borda:     #27553f;

        --alerta:           #e5906a;
        --alerta-suave:     #3a2119;
        --alerta-borda:     #5d3626;

        --aviso:            #dcb659;
        --aviso-suave:      #362d15;
        --aviso-borda:      #574728;

        --info:             #74b3d8;
        --info-suave:       #172b38;
        --info-borda:       #2b4a5e;

        --parado:           #8b877f;
        --parado-suave:     #262930;

        --foco:             #74b3d8;

        --sombra-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
        --sombra:    0 2px 8px rgba(0, 0, 0, 0.45);
        --sombra-lg: 0 8px 28px rgba(0, 0, 0, 0.5);
    }
}

:root[data-tema="escuro"] {
    --fundo:            #14151a;
    --superficie:       #1c1e25;
    --superficie-2:     #22252d;
    --superficie-3:     #2a2e37;

    --borda:            #313640;
    --borda-forte:      #454b57;

    --texto:            #eceae5;
    --texto-suave:      #a8a49c;
    --texto-apagado:    #77736c;
    --texto-invertido:  #14151a;

    --acento:           #4bbd91;
    --acento-forte:     #6bd0a8;
    --acento-suave:     #17352a;
    --acento-borda:     #27553f;

    --alerta:           #e5906a;
    --alerta-suave:     #3a2119;
    --alerta-borda:     #5d3626;

    --aviso:            #dcb659;
    --aviso-suave:      #362d15;
    --aviso-borda:      #574728;

    --info:             #74b3d8;
    --info-suave:       #172b38;
    --info-borda:       #2b4a5e;

    --parado:           #8b877f;
    --parado-suave:     #262930;

    --foco:             #74b3d8;

    --sombra-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --sombra:    0 2px 8px rgba(0, 0, 0, 0.45);
    --sombra-lg: 0 8px 28px rgba(0, 0, 0, 0.5);
}