/* ==========================================================================
   Tokens — Eventos ABRHidro
   Fonte única de cores, tipografia, espaçamento e sombra. Nenhum componente
   define valor bruto: tudo sai daqui.
   ========================================================================== */

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

/* Arquivos embarcados no projeto, não puxados do Google. O app precisa abrir
   em corredor de evento sem rede, e uma fonte vinda de terceiro é exatamente o
   tipo de requisição que não volta. São fontes variáveis: um arquivo por
   subconjunto cobre os pesos 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 próprio arquivo do logo, contados pixel a pixel:
       #26348b é o "ABRH" (202 mil px) e #00b1eb é o "idro" (137 mil px). A
       especificação sugeria #005baa como primária, mas esse tom não aparece em
       nenhum ponto da arte — decidido com o Leandro usar as cores medidas. */
    --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 superfície preenchida com --cor-primaria (botão, aba ativa). */
    --texto-sobre-primaria:      #ffffff;
    /* Texto sobre o gradiente do cabeçalho, que é escuro nos dois temas. */
    --texto-sobre-cabecalho:     #ffffff;

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

    /* A especificação não previu erro, e a tela de login precisa. Escolhido no
       mesmo tom de saturação dos outros dois estados. */
    --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;
    /* Campo de formulário fica fora da escala de propósito: abaixo de 16px o
       iPhone dá zoom sozinho ao focar. */
    --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: 560px;

    /* Altura da barra inferior, usada também para reservar espaço no conteúdo. */
    --altura-barra: 64px;
}

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

/* Derivado do claro, não inventado: mesmos papéis, mesma marca. O azul da marca
   é escuro demais para texto sobre fundo escuro, então quem assume o papel de
   cor interativa é um tom clarificado dele, 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;
        /* No escuro a cor primária clareia, então texto branco em cima dela
           ficaria ilegível: quem vai por cima é o fundo do app. */
        --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);

        /* No escuro o gradiente vai para o azul profundo da marca, senão o
           cabeçalho brilha mais que o conteúdo. */
        --cabecalho-gradiente: linear-gradient(135deg, #1a237e 0%, #0a1a4e 100%);

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