/* =========================================================================
   SolarHub — tokens
   -------------------------------------------------------------------------
   Direcao: "Editorial Solar" na tipografia (titulo em serifa, numero em mono
   de instrumentacao), identidade Sustentar na cor: laranja da marca para
   acao e para o dado, verde para confirmacao, fundo claro neutro em vez do
   papel quente da versao anterior.

   Paleta de origem (marca Sustentar):
     laranja  #f1592a   verde       #7eb441   texto  #4a4a4a
     ambar    #f4a742   verde esc.  #5a8f2a   fundo  #f7f8fa
     status:  sucesso #2e7d32   alerta #e65100   critico #c62828
   Onde o valor da marca nao alcanca o piso de contraste para o papel que ele
   exerce aqui, o token guarda um degrau derivado dela (ex.: --sol-texto) e o
   comentario ao lado diz por que.

   Nada de valor literal fora deste arquivo: cor, espaco, tipo, raio e sombra
   saem todos daqui. Trocar a identidade inteira e mexer neste arquivo.
   ========================================================================= */

:root {
  /* --- superficies ------------------------------------------------------
     Fundo #f7f8fa da marca no corpo da pagina; o cartao sobe para branco
     puro, que aqui funciona (o fundo e frio e neutro, nao ha o "buraco na
     pagina" que branco puro abria ao lado de papel quente). */
  --papel: #f7f8fa;
  --papel-fundo: #eef0f4;   /* recuos: cabecalho de tabela, campo desabilitado */
  --superficie: #ffffff;
  --borda: #e1e4ea;
  --borda-forte: #b9bfc9;
  --grafico-grade: color-mix(in srgb, var(--borda) 55%, transparent);
  /* ^ grade dos graficos (Chart.js): mais clara que --borda pra ficar
     recessiva atras da barra/linha, nao competir com o dado. */
  --grafico-tendencia: var(--tinta-media);
  /* ^ linha de tendencia (o esperado) sobre as barras de geracao. Cinza de
     proposito: o laranja da marca e reservado ao valor MEDIDO, e um segundo
     matiz saturado disputaria a mesma atencao no mesmo grafico. Marca grafica
     pede 3:1 e #5f5f5f mede 6,39:1 sobre --superficie — folga de sobra. A
     linha ainda entra tracejada e com legenda: cor nao pode ser o unico
     diferenciador entre "gerado" e "esperado". */

  /* --- tinta ------------------------------------------------------------
     Cinza neutro da marca (#4a4a4a e o "Texto" da paleta) em tres niveis.
     Todos passam AA (4.5:1) sobre --superficie, sobre --papel e sobre
     --papel-fundo, que e o par mais apertado: --tinta-fraca mede 4,67:1
     sobre --papel-fundo, 5,02:1 sobre --papel e 5,33:1 sobre --superficie.
     #737373 seria o limite exato sobre --papel (4,46:1) — por isso a escala
     para em #6b6b6b e nao vai mais clara. */
  --tinta: #4a4a4a;
  --tinta-media: #5f5f5f;
  --tinta-fraca: #6b6b6b;

  /* --- cores que significam ---------------------------------------------
     O laranja da marca so preenche: #f1592a mede 3,39:1 sobre --superficie,
     suficiente para marca grafica e borda (3:1), insuficiente para texto.
     Texto laranja usa --sol-texto (5,34:1). */
  --sol: #f1592a;          /* laranja Sustentar — primario, acao, marca */
  --sol-texto: #bb431e;    /* 5,34:1 sobre --superficie; 5,02:1 sobre --papel */
  --sol-tinta: #fdf1e1;    /* puxado para o ambar, nao para o laranja: derivado de
                              --sol o pastel caia em rosa e a etiqueta de aviso ficava
                              igual a de erro (--alerta-tinta) lado a lado na tabela de
                              usinas. Em dourado a diferenca e de matiz, nao so de tom.
                              --sol-texto sobre ele: 4,79:1 */
  --sol-forte: #cb4a22;    /* --superficie sobre --sol-forte (.botao:hover) 4,62:1 AA */
  --sol-sobre: #441305;    /* texto sobre preenchimento solido de --sol (4,62:1);
                              branco sobre --sol daria so 3,39:1, abaixo do piso */

  --ambar: #f4a742;        /* laranja claro Sustentar — topo do gradiente de barra */

  /* Cor do dado nos graficos. A paleta da marca reserva o ambar para barra,
     mas ambar sozinho mede 2,01:1 sobre --superficie — em cima do piso, sem
     folga. Entao a barra e a area da linha sao o gradiente da marca na
     vertical (ambar no topo, laranja na base, o mesmo par do header
     Sustentar): o topo claro fica por conta do gradiente e a base ancora a
     forma em 3,39:1. */
  --dado: var(--sol);
  --dado-clara: var(--ambar);

  /* Verde de confirmacao. O verde da marca (#7eb441) mede 2,47:1 e o verde
     escuro (#5a8f2a) 3,89:1 sobre branco: nenhum dos dois serve como texto,
     e --mata e texto em etiqueta e aviso. Fica o verde de status da paleta,
     #2e7d32 (5,13:1 sobre --superficie, 4,63:1 sobre --mata-tinta). */
  --mata: #2e7d32;          /* dado positivo, online, confirmacao */
  --mata-tinta: #eef5ef;
  --mata-clara: #7eb441;    /* o verde da marca, que sobre claro nao passa de 2,47:1.
                               SO sobre fundo escuro, onde mede 6,69:1 contra
                               --noite: losango de marcador e regua do hero de
                               login. Nunca como texto sobre --papel/--superficie. */

  --alerta: #c62828;        /* offline, erro, inadimplencia — critico da paleta */
  --alerta-tinta: #faecec;
  --alerta-clara: #ef5350;  /* o mesmo papel de --alerta, para fundo escuro: sobre
                               --noite o #c62828 mede 3,03:1, abaixo do piso, e
                               este 4,89:1. Usado no chip de aviso dentro do capo.
                               Trio de fundo escuro com --mata-clara (6,89:1) e
                               --ambar (8,48:1). Nunca sobre --papel/--superficie. */

  /* --- hero do login -----------------------------------------------------
     A paleta Sustentar nao define um escuro; o painel de pitch usa um
     carvao neutro, que deixa o laranja da marca ser a unica cor da tela.
     O gradiente do header (laranja→ambar) nao serve aqui: o pitch tem
     paragrafo e lista em corpo, e texto claro sobre ele nao passa AA. */
  --noite: #1c1c1c;
  --noite-alvorada: color-mix(in srgb, var(--sol-forte) 24%, var(--noite));
  /* ^ canto quente do hero de login: luz de amanhecer entrando num comodo
     escuro, nao um gradiente decorativo. Mistura sutil, ainda bem mais
     proxima de --noite que de --sol-forte — ver .entrada-pitch. */

  /* Texto sobre --noite, em tres niveis (16,0:1 / 11,8:1 / 8,0:1). Moram
     aqui, e nao em telas.css, pela mesma regra do resto do arquivo. */
  --sobre-noite-forte: #f7f8fa;
  --sobre-noite: #d3d7dd;
  --sobre-noite-fraca: #adb2ba;

  /* --- motivo grafico: fileiras de modulos --------------------------------
     A assinatura visual que atravessa o material da casa (carrossel, painel
     de obra, video wall): a inclinacao de uma fileira de modulos vista de
     cima. Entra sempre mascarado, esmaecendo — e um sussurro atras do
     conteudo, nao papel de parede. Consumidores: .topo, .entrada-pitch,
     .numero-heroi e .rodape-app.

     Duas misturas para o mesmo motivo, porque o laranja translucido nao pesa
     igual nos dois fundos: 55% e o que se ve sobre --noite (capo, hero do
     login, rodape) e some no claro; 26% e o que se ve sobre --sol-tinta
     (o cartao-heroi) e vira listra de barbearia no escuro. Mesma presenca
     visual, dois valores. */
  --fileiras: repeating-linear-gradient(75deg,
                color-mix(in srgb, var(--sol) 55%, transparent) 0 3px,
                transparent 3px 27px);
  --fileiras-claras: repeating-linear-gradient(75deg,
                color-mix(in srgb, var(--sol) 26%, transparent) 0 3px,
                transparent 3px 27px);

  /* Granulacao: feTurbulence inline, sem arquivo externo e sem rede — mesma
     tecnica dos carrosseis da casa. Entra em overlay com opacidade baixa sobre
     as areas escuras; e o que separa "bloco de cor chapado" de peca impressa. */
  --grao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23g)'/%3E%3C/svg%3E");

  /* --- medidas de acento ---------------------------------------------------
     A barra colorida que diz a gravidade/estado pelo canto do olho (aviso,
     cartao, cabecalho) e a regua curta que abre um titulo. Estavam soltas
     como 3px literal em componentes.css. */
  --acento: 3px;
  --regua: 28px;

  /* --- escala de espaco (multiplos de 4) -------------------------------- */
  --e1: 4px;
  --e2: 8px;
  --e3: 12px;
  --e4: 16px;
  --e5: 24px;
  --e6: 32px;
  --e7: 48px;
  --e8: 64px;
  --e9: 96px;

  /* --- larguras de paineis flutuantes -------------------------------------
     Menu da conta, e qualquer outro <details>/popover que vier depois: uma
     largura minima para o conteudo nao ficar espremido quando so tem um
     item curto (ex.: "Sair" sozinho, sem Configuracoes/Meu plano). Multiplo
     da escala de espaco (2x --e9), nao um numero avulso. */
  --largura-painel-flutuante: 192px;

  /* --- escala tipografica ----------------------------------------------- */
  --t-micro: 0.6875rem;     /* 11px — sobrancelha em caixa alta */
  --t-peq: 0.8125rem;       /* 13px — meta, celula de tabela */
  --t-base: 0.9375rem;      /* 15px — corpo */
  --t-med: 1.0625rem;       /* 17px */
  --t-g: 1.375rem;          /* 22px — titulo de secao */
  --t-gg: 2rem;             /* 32px — titulo de pagina */
  --t-hero: 3.5rem;         /* 56px — numero-heroi, titulo do login */

  --altura-apertada: 1.15;
  --altura-base: 1.55;

  /* --- familias ---------------------------------------------------------- */
  --fonte-titulo: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --fonte: "Inter", -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --fonte-dado: "IBM Plex Mono", ui-monospace, "Cascadia Code", Consolas, Menlo, monospace;

  /* Eixos variaveis da Fraunces. WONK 1 liga as formas "erradas" de proposito
     (o g e o a com terminal torto) — e o que impede o titulo de parecer uma
     Georgia qualquer. SOFT arredonda os terminais para nao ficar severa. */
  --fraunces-titulo: "opsz" 48, "SOFT" 40, "WONK" 1;
  --fraunces-corpo: "opsz" 18, "SOFT" 30, "WONK" 0;

  /* --- raio -------------------------------------------------------------- */
  --raio-p: 5px;
  --raio: 9px;
  --raio-g: 14px;
  --raio-pilula: 999px;

  /* --- sombra (tingida de cinza-azulado, acompanhando o fundo frio) ------- */
  --sombra-1: 0 1px 2px rgba(28, 34, 46, 0.06);
  --sombra-2: 0 4px 14px rgba(28, 34, 46, 0.08);
  --sombra-3: 0 18px 50px rgba(16, 20, 28, 0.28);

  /* --- transicao --------------------------------------------------------- */
  --transicao: 0.16s ease;

  /* --- papel (o PDF do relatorio) -----------------------------------------
     O relatorio em PDF e a unica saida com pagina fisica, e pagina tem
     medida que a tela nao tem. Os valores moram aqui pela mesma regra do
     resto do arquivo, e nao em impressao.css.

     --pagina-raiz e o pino de toda a escala tipografica no papel: os tokens
     --t-* sao em `rem`, entao trocar a raiz reescala titulo, corpo e celula
     de uma vez, mantendo as proporcoes da tela. Em 10pt, --t-peq (0,8125rem)
     cai em 8,1pt, que e o corpo de tabela densa de relatorio impresso;
     --t-gg vira 20pt no titulo do documento. Uma raiz de 16px (o padrao do
     navegador) daria 12pt de corpo e a tabela de sete colunas nao caberia na
     largura util do A4.

     A margem de 16mm nao e estetica: abaixo de ~12mm impressora domestica
     comeca a cortar, e o rodape de numero de pagina mora dentro dela. */
  --pagina-tamanho: A4 portrait;
  --pagina-margem: 16mm;
  --pagina-raiz: 10pt;

  /* --- grafico de colunas do relatorio -------------------------------------
     O grafico do relatorio e desenhado em HTML/CSS, sem Chart.js, porque ele
     precisa sair igual na tela e no PDF — e no PDF nao roda JavaScript. Ver
     usinas/_relatorio_da_usina_corpo.html.

     A altura e token porque e medida de layout, e nao dado: 160px na tela dao
     ao mes inteiro uma silhueta legivel sem empurrar a tabela para fora da
     primeira dobra. No papel a versao de impressao usa a sua (--grafico-altura
     redefinida em impressao.css nao existiria sem valor aqui). */
  --grafico-altura: 160px;
  --grafico-altura-papel: 26mm;
}