/* ==========================================================================
   TOKENS DE DESIGN — ProdEx
   ==========================================================================

   FONTE ÚNICA da identidade visual. Toda tela do sistema importa este arquivo
   ANTES do seu CSS próprio:

       <link rel="stylesheet" href="/css/tokens.css">
       <link rel="stylesheet" href="/css/a-sua-tela.css">

   >>> PARA TROCAR A IDENTIDADE VISUAL: mexa SOMENTE neste arquivo. <<<
   Nenhuma tela deve escrever cor em hexadecimal fora daqui.

   --------------------------------------------------------------------------
   PALETA DA MARCA — CMYK
       Cyan #009FE3 · Magenta #E6007E · Yellow #FFED00 · Black #010101

   Os quatro tons puros são vibrantes demais para texto sobre branco: o cyan
   puro dá ~2.9:1 de contraste, reprovado em acessibilidade (o mínimo é 4.5:1).
   Por isso cada cor tem duas famílias — o PURO, para preenchimentos, bordas e
   realces, e a variação ESCURA, para texto e botões. São a mesma cor da marca.
   ========================================================================== */

:root {
    /* ===== Marca — tons puros ===== */
    --cor-cyan:            #009FE3;
    --cor-magenta:         #E6007E;
    --cor-amarelo:         #FFED00;
    --cor-preto:           #010101;

    /* ===== Marca — variações utilizáveis em texto/botão ===== */
    --cor-cyan-escuro:     #00648F;
    --cor-cyan-mais-escuro:#004A6B;
    --cor-cyan-claro:      #E1F4FC;
    --cor-cyan-borda:      #9BD3EC;

    --cor-magenta-escuro:  #C2006A;
    --cor-magenta-claro:   #FCE4F1;
    --cor-magenta-borda:   #F0A6CE;

    --cor-amarelo-escuro:  #6B5B00;
    --cor-amarelo-claro:   #FFFBE0;
    --cor-amarelo-borda:   #EEDF8A;
    --cor-amarelo-suave:   #FFFACC;

    /* ===== Papéis semânticos ===== */
    --cor-primaria:        var(--cor-cyan-escuro);
    --cor-primaria-hover:  var(--cor-cyan-mais-escuro);
    --cor-destaque:        var(--cor-amarelo);
    --cor-perigo:          var(--cor-magenta-escuro);
    --cor-perigo-claro:    var(--cor-magenta-claro);
    --cor-sucesso:         var(--cor-cyan-escuro);
    --cor-sucesso-claro:   var(--cor-cyan-claro);
    --cor-aviso:           var(--cor-amarelo-escuro);
    --cor-aviso-claro:     var(--cor-amarelo-claro);

    /* ===== Superfícies ===== */
    --cor-fundo:           #F4F7F9;
    --cor-superficie:      #FFFFFF;
    --cor-superficie-alt:  #F7FAFC;
    --cor-borda:           #DFE6EC;
    --cor-borda-forte:     #C3CED7;

    /* Cabeçalho/nav — claro.
       Era preto, herdado da versão anterior do sistema: com o conteúdo já claro,
       a faixa preta ficava como um bloco solto no topo, e obrigava as logos a
       carregarem um retângulo branco atrás para não sumirem. Em claro, as logos
       assentam direto e o cyan da marca fica sendo o único acento do topo. */
    --cor-topo:            var(--cor-superficie);
    --cor-topo-texto:      var(--cor-texto);
    --cor-topo-texto-suave:var(--cor-texto-suave);

    /* ===== Acentos por seção do painel =====
       O painel tem cinco seções e o CMYK oferece três cores além do preto.
       As duas que faltam NÃO são inventadas de fora: são as secundárias do
       próprio modelo subtrativo, o que mantém tudo dentro da mesma família.

           cyan + magenta = violeta
           cyan + amarelo = verde
           magenta + amarelo = âmbar

       Cada seção tem três valores, porque um só não serve para tudo:
           -vivo   borda de 4px e realces (elemento gráfico, exige 3:1)
           -forte  o glifo do ícone sobre o tom claro (exige 4.5:1)
           -claro  o fundo da caixinha do ícone
       O amarelo puro não aparece: sobre branco ele não alcança contraste
       nenhum, por isso a seção Configurações usa o âmbar escurecido. */
    --cor-secao-operacao-vivo:   var(--cor-cyan);
    --cor-secao-operacao-forte:  var(--cor-cyan-escuro);
    --cor-secao-operacao-claro:  var(--cor-cyan-claro);

    --cor-secao-cadastros-vivo:  var(--cor-magenta);
    --cor-secao-cadastros-forte: var(--cor-magenta-escuro);
    --cor-secao-cadastros-claro: var(--cor-magenta-claro);

    --cor-secao-acessos-vivo:    #7B4BC0;
    --cor-secao-acessos-forte:   #5B2E96;
    --cor-secao-acessos-claro:   #F1EAFA;

    --cor-secao-estoque-vivo:    #00A878;
    --cor-secao-estoque-forte:   #00795C;
    --cor-secao-estoque-claro:   #E0F2EC;

    --cor-secao-config-vivo:     #E0A100;
    --cor-secao-config-forte:    #8A5A00;
    --cor-secao-config-claro:    #FBF1DE;

    /* Usado por quem não declara seção — mantém o card neutro em vez de sem borda */
    --secao-vivo:  var(--cor-borda-forte);
    --secao-forte: var(--cor-texto-suave);
    --secao-claro: var(--cor-superficie-alt);

    /* ===== Texto ===== */
    --cor-texto:           var(--cor-preto);
    --cor-texto-suave:     #4A5560;
    /* Escurecido de #78848F: sobre branco dava 2.85:1, abaixo do minimo de
       3:1 para texto secundario (placeholder, texto desabilitado). */
    --cor-texto-fraco:     #6B7783;
    --cor-texto-invertido: #FFFFFF;

    /* ===== Forma ===== */
    --raio:                10px;
    --raio-peq:            6px;
    --raio-grande:         14px;

    --sombra:              0 1px 2px rgba(16,24,40,.06), 0 4px 12px rgba(16,24,40,.06);
    --sombra-media:        0 4px 12px rgba(16,24,40,.10), 0 12px 28px rgba(16,24,40,.08);
    --sombra-fixa:         0 -2px 16px rgba(16,24,40,.10);

    /* ===== Tipografia ===== */
    --fonte:               "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;

    /* ===== Espaçamento ===== */
    --esp-1: 4px;
    --esp-2: 8px;
    --esp-3: 12px;
    --esp-4: 16px;
    --esp-5: 24px;
    --esp-6: 32px;
    --esp-7: 48px;

    /* ===== Movimento ===== */
    --transicao:           .18s ease;
}

/* ==========================================================================
   TEMA ESCURO
   ==========================================================================

   Vale por dois caminhos, e a ordem importa:

   1) @media (prefers-color-scheme: dark) — quem já usa o Windows no escuro
      recebe o sistema escuro sem clicar em nada e SEM depender de JavaScript.
      O `:not([data-tema="claro"])` deixa a pessoa forçar claro mesmo com o
      sistema escuro.
   2) [data-tema="escuro"] — a escolha manual, gravada no localStorage e
      aplicada por /js/tema.js antes da primeira pintura.

   >>> NÃO defina uma cor SÓ aqui dentro. <<<
   Todo token precisa existir no :root claro lá em cima; aqui só se
   REDEFINE. Um token que só exista neste bloco fica indefinido no claro.

   Por que não basta "inverter": os tons -claro da marca são fundos de
   realce (a caixinha do ícone, o hover). No escuro eles não podem clarear,
   têm de ESCURECER puxando para a cor. E os tons -escuro, feitos para
   texto sobre branco, ficam ilegíveis sobre fundo escuro — no escuro quem
   assume o papel de texto é uma variação CLARA da mesma cor.
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"]) {
        --cor-cyan-escuro:     #4FC0F0;
        --cor-cyan-mais-escuro:#7FD3F5;
        --cor-cyan-claro:      #0E2B3A;
        --cor-cyan-borda:      #1F5A78;

        --cor-magenta-escuro:  #FF62B0;
        --cor-magenta-claro:   #3A1028;
        --cor-magenta-borda:   #7A2A55;

        --cor-amarelo-escuro:  #E3C75A;
        --cor-amarelo-claro:   #332B08;
        --cor-amarelo-borda:   #6B5B1F;
        --cor-amarelo-suave:   #3A3210;

        --cor-fundo:           #0F1519;
        --cor-superficie:      #171F26;
        --cor-superficie-alt:  #1E2831;
        --cor-borda:           #2B3742;
        --cor-borda-forte:     #3D4B58;

        --cor-topo:            #131A21;
        --cor-topo-texto:      #E8EEF3;
        --cor-topo-texto-suave:#B3C0CB;

        --cor-texto:           #E8EEF3;
        --cor-texto-suave:     #B3C0CB;
        --cor-texto-fraco:     #8A98A5;
        /* Texto sobre botão preenchido: no escuro o botão é claro, então o
           texto dele precisa ser escuro — o inverso do inverso. */
        --cor-texto-invertido: #0B1116;

        --cor-secao-acessos-vivo:    #9B6FE0;
        --cor-secao-acessos-forte:   #C3A6F0;
        --cor-secao-acessos-claro:   #241A38;

        --cor-secao-estoque-vivo:    #16C79A;
        --cor-secao-estoque-forte:   #63DDB6;
        --cor-secao-estoque-claro:   #0C2E24;

        --cor-secao-config-vivo:     #E8B325;
        --cor-secao-config-forte:    #F0CE6B;
        --cor-secao-config-claro:    #33280A;

        --secao-vivo:  var(--cor-borda-forte);
        --secao-forte: var(--cor-texto-suave);
        --secao-claro: var(--cor-superficie-alt);

        /* Sombras de fundo claro somem no escuro; aqui elas viram profundidade
           de verdade, em preto quase puro. */
        --sombra:       0 1px 2px rgba(0,0,0,.40), 0 4px 12px rgba(0,0,0,.30);
        --sombra-media: 0 4px 12px rgba(0,0,0,.45), 0 12px 28px rgba(0,0,0,.35);
        --sombra-fixa:  0 -2px 16px rgba(0,0,0,.45);
    }
}

:root[data-tema="escuro"] {
    --cor-cyan-escuro:     #4FC0F0;
    --cor-cyan-mais-escuro:#7FD3F5;
    --cor-cyan-claro:      #0E2B3A;
    --cor-cyan-borda:      #1F5A78;

    --cor-magenta-escuro:  #FF62B0;
    --cor-magenta-claro:   #3A1028;
    --cor-magenta-borda:   #7A2A55;

    --cor-amarelo-escuro:  #E3C75A;
    --cor-amarelo-claro:   #332B08;
    --cor-amarelo-borda:   #6B5B1F;
    --cor-amarelo-suave:   #3A3210;

    --cor-fundo:           #0F1519;
    --cor-superficie:      #171F26;
    --cor-superficie-alt:  #1E2831;
    --cor-borda:           #2B3742;
    --cor-borda-forte:     #3D4B58;

    --cor-topo:            #131A21;
    --cor-topo-texto:      #E8EEF3;
    --cor-topo-texto-suave:#B3C0CB;

    --cor-texto:           #E8EEF3;
    --cor-texto-suave:     #B3C0CB;
    --cor-texto-fraco:     #8A98A5;
    --cor-texto-invertido: #0B1116;

    --cor-secao-acessos-vivo:    #9B6FE0;
    --cor-secao-acessos-forte:   #C3A6F0;
    --cor-secao-acessos-claro:   #241A38;

    --cor-secao-estoque-vivo:    #16C79A;
    --cor-secao-estoque-forte:   #63DDB6;
    --cor-secao-estoque-claro:   #0C2E24;

    --cor-secao-config-vivo:     #E8B325;
    --cor-secao-config-forte:    #F0CE6B;
    --cor-secao-config-claro:    #33280A;

    --secao-vivo:  var(--cor-borda-forte);
    --secao-forte: var(--cor-texto-suave);
    --secao-claro: var(--cor-superficie-alt);

    --sombra:       0 1px 2px rgba(0,0,0,.40), 0 4px 12px rgba(0,0,0,.30);
    --sombra-media: 0 4px 12px rgba(0,0,0,.45), 0 12px 28px rgba(0,0,0,.35);
    --sombra-fixa:  0 -2px 16px rgba(0,0,0,.45);
}

/* ===== Botão de alternar tema (injetado por /js/tema.js) ===== */
.btn-tema {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    background: transparent;
    color: var(--cor-topo-texto-suave);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-peq);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--transicao), color var(--transicao), border-color var(--transicao);
}

.btn-tema:hover {
    background: var(--cor-cyan-claro);
    color: var(--cor-primaria);
    border-color: var(--cor-cyan);
}

.btn-tema:focus-visible {
    outline: 3px solid var(--cor-cyan);
    outline-offset: 2px;
}

/* Só um dos dois ícones aparece, conforme o tema em vigor. */
.btn-tema .icone-escuro { display: none; }
:root[data-tema="escuro"] .btn-tema .icone-claro  { display: none; }
:root[data-tema="escuro"] .btn-tema .icone-escuro { display: block; }

@media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"]) .btn-tema .icone-claro  { display: none; }
    :root:not([data-tema="claro"]) .btn-tema .icone-escuro { display: block; }
}

/* ===== Logos no tema escuro =====
   No tema claro o retângulo branco atrás das logos foi removido: elas têm
   tinta escura e assentam direto sobre o branco. No escuro isso as APAGA --
   a Mitto e a km somem por completo, sobra um risco.

   Inverter com filter() não serve: a imprimus é colorida e viraria outra
   marca. A saída honesta é devolver a placa clara, que aqui deixa de ser
   enfeite e passa a ser o que torna a logo visível. */
:root[data-tema="escuro"] .logos-container img,
:root[data-tema="escuro"] .logo img {
    background: #FFFFFF !important;
    padding: 5px 10px !important;
    border-right: none;
    border-radius: var(--raio-peq);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"]) .logos-container img,
    :root:not([data-tema="claro"]) .logo img {
        background: #FFFFFF !important;
        padding: 5px 10px !important;
        border-right: none;
        border-radius: var(--raio-peq);
    }
}