/* ==========================================================================
   Tokens — Painel de Estatísticas ABRHidro
   Cópia de css/tokens.css do abrh.org.br-app (16/10/2026), adaptada aqui.
   Não há ligação entre os dois arquivos: mudar o app não muda o painel.

   Diferenças em relação ao original:
     - --largura-max sobe de 560px (celular) para 1240px: o painel é de notebook;
     - saiu --altura-barra: o painel não tem barra inferior;
     - entrou o bloco "Painel", com os papéis de tabela e gráfico.
   ========================================================================== */

/* --------------------------------------------------------------- Open Sans */

/* Arquivos embarcados no projeto, não puxados do Google: em produção nada vem
   de CDN. São fontes variáveis: um arquivo por subconjunto cobre 400 a 700. */

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fontes/open-sans-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fontes/open-sans-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
        U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
        U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ------------------------------------------------------------------ claro */

:root {
    /* Marca. Os dois azuis saíram do arquivo do logo: #26348b é o "ABRH" e
       #00b1eb é o "idro". */
    --cor-primaria:              #26348b;
    --cor-primaria-escura:       #1a237e;
    --cor-primaria-mais-escura:  #0a1a4e;
    --cor-destaque:              #00b1eb;

    /* Superfície tintada da marca, para chips e estados ativos. */
    --tinta-primaria:            rgba(38, 52, 139, .10);
    --tinta-destaque:            rgba(0, 177, 235, .12);

    --fundo-app:                 #f7f9fc;
    --fundo-card:                #ffffff;
    --fundo-afundado:            #eef1f6;

    --texto-principal:           #1c2333;
    --texto-secundario:          #6b7488;
    --texto-desabilitado:        #a6adbb;
    --texto-sobre-primaria:      #ffffff;
    --texto-sobre-cabecalho:     #ffffff;

    --cor-sucesso:               #1e8e5a;
    --cor-sucesso-fundo:         #e6f4ed;
    --cor-alerta:                #b26a00;
    --cor-alerta-fundo:          #fff3e0;
    --cor-erro:                  #c0392b;
    --cor-erro-fundo:            #fdecea;

    --sombra-card:    0 1px 3px rgba(10, 26, 78, .08), 0 1px 2px rgba(10, 26, 78, .04);
    --sombra-elevada: 0 4px 12px rgba(10, 26, 78, .12);

    --cabecalho-gradiente: linear-gradient(135deg, var(--cor-primaria) 0%, var(--cor-primaria-escura) 100%);

    --skeleton-de:   #eef1f6;
    --skeleton-para: #e4e9f2;

    /* ---------------------------------------------------------- tipografia */

    --fonte-base: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    --texto-titulo:    20px;
    --texto-subtitulo: 15px;
    --texto-corpo:     14px;
    --texto-legenda:   12px;
    --texto-campo:     16px;

    --altura-linha-titulo: 1.3;
    --altura-linha-corpo:  1.5;

    /* --------------------------------------------------------- espaçamento */

    --espaco-1:  4px;
    --espaco-2:  8px;
    --espaco-3: 12px;
    --espaco-4: 16px;
    --espaco-5: 24px;
    --espaco-6: 32px;

    --raio-card:   14px;
    --raio-campo:  10px;
    --raio-pilula: 999px;

    --largura-max: 1240px;

    /* --------------------------------------------------------------- Painel */

    /* Número grande de destaque (frase do ritmo, cartões de resumo). */
    --texto-numero-grande: 28px;

    /* Linhas da tabela: zebra discreta e a linha de média em tinta da marca. */
    --tabela-borda:       #e4e9f2;
    --tabela-zebra:       #fafbfd;
    --tabela-media-fundo: var(--tinta-primaria);

    /* Gráficos. A edição atual é a única colorida; as anteriores ficam em
       cinza, para a atual saltar aos olhos sem legenda. */
    --grafico-atual:      var(--cor-destaque);
    --grafico-anterior:   #b7bfcf;
    --grafico-media:      var(--cor-primaria);
    --grafico-grade:      #e9edf4;
    --grafico-hoje:       var(--cor-alerta);

    /* Séries de um mesmo gráfico (visão geral, recortes), nesta ordem. */
    --grafico-serie-1:    var(--cor-primaria);
    --grafico-serie-2:    var(--cor-destaque);
    --grafico-serie-3:    var(--cor-sucesso);
    --grafico-serie-4:    var(--cor-alerta);
}

/* ------------------------------------------------------------------ escuro */

/* Derivado do claro: mesmos papéis, mesma marca. No escuro quem assume a cor
   interativa é um tom clarificado do azul, com o ciano do logo como destaque. */

@media (prefers-color-scheme: dark) {
    :root {
        --cor-primaria:              #8aa0ea;
        --cor-primaria-escura:       #6d85dd;
        --cor-primaria-mais-escura:  #0a1a4e;
        --cor-destaque:              #4cc9f5;

        --tinta-primaria:            rgba(138, 160, 234, .16);
        --tinta-destaque:            rgba(76, 201, 245, .16);

        --fundo-app:                 #10131a;
        --fundo-card:                #191d27;
        --fundo-afundado:            #232838;

        --texto-principal:           #e8ebf2;
        --texto-secundario:          #9aa3b7;
        --texto-desabilitado:        #6b7488;
        --texto-sobre-primaria:      #10131a;
        --texto-sobre-cabecalho:     #ffffff;

        --cor-sucesso:               #6fd39b;
        --cor-sucesso-fundo:         #14301f;
        --cor-alerta:                #f0bd6a;
        --cor-alerta-fundo:          #33260f;
        --cor-erro:                  #f2a49a;
        --cor-erro-fundo:            #3a1c18;

        --sombra-card:    0 1px 3px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .3);
        --sombra-elevada: 0 4px 14px rgba(0, 0, 0, .55);

        --cabecalho-gradiente: linear-gradient(135deg, #1a237e 0%, #0a1a4e 100%);

        --skeleton-de:   #1e2331;
        --skeleton-para: #272d3e;

        --tabela-borda:       #2a3042;
        --tabela-zebra:       #1c202b;
        --grafico-anterior:   #4a5266;
        --grafico-grade:      #262b3a;
    }
}