/* =========================================================================
   Gigantes — TOKENS VISUAIS COMPARTILHADOS
   (UI-QA-1 · Bloco 1  →  estendido pela UI-QA-2 · Bloco 1)

   Este arquivo contém SOMENTE variáveis CSS. Nenhum seletor de componente,
   nenhuma regra de layout. Na UI-QA-1 ele nasceu sem nenhum valor novo: tudo
   vinha de app.css / master.css / portal.css / publico.css, e a fase era
   invisível por definição — só tirava a duplicação de baixo da interface.

   A UI-QA-2 · Bloco 1 acrescentou duas coisas e NENHUMA aplicação de tema:
     a) cinco primitivas de tinta escurecidas para alcançar contraste AA no
        TEMA CLARO (camadas 1) — a única mudança visível deste arquivo;
     b) a camada 7, com as primitivas escuras, declaradas e NÃO aplicadas.
   Não existe `:root[data-tema="escuro"]` aqui, e ele não deve nascer aqui —
   ver a nota longa na camada 7.

   Como usar:
     1. carregue tokens.css ANTES do CSS específico da superfície;
     2. o CSS específico declara seus nomes próprios como ALIAS destes tokens;
     3. mudar uma cor do produto passa a ser uma linha, aqui.

   Camadas:
     1. primitivas       — a paleta crua, sem opinião de uso
     2. semânticos       — o significado (fundo, superfície, tinta, acento, estados)
     3. forma            — raio e sombra
     4. métricas         — alturas/larguras de shell
     5. tipografia       — pilhas de fonte (locais, sem webfont remota)
     6. impressão        — trava do tema claro
     7. primitivas escuras — a paleta do tema escuro, DECLARADA e NÃO APLICADA

   NÃO há dark mode aqui — há a matéria-prima dele. A camada 7 declara a escala
   escura; quem a aplica é o CSS de cada superfície, no seu próprio arquivo.
   Uma superfície que não escreveu o bloco escuro dela não escurece nem por
   acidente, e é assim que impressos e páginas públicas ficam protegidos.
   ========================================================================= */

:root {
  /* ---------------------------------------------------------------------
     1. PRIMITIVAS
     --------------------------------------------------------------------- */

  /* Navy do shell — topbar do Master e sidebar do painel */
  --gx-navy-900: #1f2a44;
  --gx-navy-800: #27345a;
  --gx-navy-700: #2f3f6b;

  /* Azul operacional — painel da escola e Master */
  --gx-blue-600: #2563eb;
  --gx-blue-700: #1d4ed8;

  /* Índigo e sky — acento próprio do Portal do Aluno */
  --gx-indigo-500: #6366f1;
  --gx-indigo-600: #4f46e5;
  --gx-indigo-050: #eef0fe;
  --gx-sky-500:    #0ea5e9;

  /* Estados (par cor/fundo).

     UI-QA-2 - Bloco 1: tres TINTAS foram escurecidas para alcancar AA (4,5:1)
     contra o proprio fundo `-050`, que e como elas aparecem de verdade -- em
     badge, mensagem e categoria de auditoria. Matiz e saturacao preservados;
     so a luminosidade caiu. O verde era o unico caso de REPROVACAO franca.

     Os fundos `-050` NAO mudaram, de proposito: `--gx-slate-050` nao e so o
     fundo de um badge, e tambem o fundo da pagina publica inteira
     (`--pub-bg`) e o hover da topbar do painel. Mexer nele seria uma mudanca
     de layout disfarcada de ajuste de contraste. */
  --gx-green-600: #117f3a;  /* era #16a34a: 2,95:1 REPROVAVA sobre -050 -> 4,56:1 */
  --gx-green-050: #e7f6ec;
  --gx-red-600:   #d32222;  /* era #dc2626: 4,17:1 -> 4,51:1 */
  --gx-red-050:   #fdeaea;
  --gx-amber-700: #b45309;  /* 4,50:1 -- ja no piso exato, deixado como estava */
  --gx-amber-050: #fdf1de;
  --gx-slate-500: #606f85;  /* era #64748b: 4,20:1 -> 4,51:1 */
  --gx-slate-050: #eef1f5;

  /* Neutros claros */
  --gx-white:    #ffffff;
  --gx-gray-050: #f1f4f8;  /* fundo do painel e do Master */
  --gx-gray-060: #f5f6fb;  /* fundo do Portal */
  --gx-gray-070: #f8f9fc;  /* superfície secundária do Portal */
  --gx-gray-080: #f7f9fc;  /* realce suave: hover de linha, citação */
  --gx-line-200: #e3e8ef;  /* borda do painel e do Master */
  --gx-line-210: #e7e9f2;  /* borda do Portal */
  --gx-ink-900:  #1f2937;  /* texto do painel e do Master */
  --gx-ink-850:  #1b2333;  /* texto do Portal */
  /* UI-QA-2 - Bloco 1: os dois "muted" foram medidos contra o fundo em que
     aparecem de fato (a pagina), nao contra branco -- e nos dois casos o
     resultado ficava logo abaixo de AA. O ajuste e de 2 a 4 pontos por canal:
     indistinguivel lado a lado, suficiente para sair da faixa reprovada. */
  --gx-ink-500:  #69707d;  /* era #6b7280: 4,38:1 sobre --gx-gray-050 -> 4,52:1 */
  --gx-ink-510:  #687084;  /* era #6b7488: 4,34:1 sobre --gx-gray-060 -> 4,59:1 */

  /* Marca da GIGANTES (operadora da plataforma) — UI-QA-1 · Microbloco 2.1.
     Valores amostrados do asset real, hoje em
     `static/interno/img/marca/gigantes-horizontal.png`:
     o fundo do arquivo é EXATAMENTE `--gx-brand-ink`, e é por isso que a topbar
     do Master usa essa cor — a logo tem fundo opaco (não é PNG transparente) e
     só encaixa sem emenda sobre ela. Trocar `--gx-brand-ink` sem trocar o asset
     deixa um retângulo visível atrás da logo.
     Consumidos SÓ pelo Master. Não pintam o painel da escola nem o Portal. */
  --gx-brand-ink: #0f161f;
  --gx-brand-orange: #fc5a00;
  --gx-brand-orange-strong: #ff7a2e;

  /* Escuro imersivo do Modo Aula / player.
     ATENÇÃO: isto é o tema de FOCO de uma tela específica, não é dark mode
     de produto. Não reaproveitar como base de tema escuro global. */
  --gx-focus-bg:        #0e1320;
  --gx-focus-surface:   #161d2e;
  --gx-focus-surface-2: #1d2740;
  --gx-focus-ink:       #e7ebf5;
  --gx-focus-ink-muted: #9aa4bd;
  --gx-focus-line:      #28324d;

  /* ---------------------------------------------------------------------
     2. SEMÂNTICOS — é por aqui que o CSS específico deve entrar
     --------------------------------------------------------------------- */

  --gx-bg:        var(--gx-gray-050);
  --gx-surface:   var(--gx-white);
  --gx-surface-2: var(--gx-gray-080);
  --gx-line:      var(--gx-line-200);
  --gx-ink:       var(--gx-ink-900);
  --gx-ink-muted: var(--gx-ink-500);

  --gx-accent:        var(--gx-blue-600);
  --gx-accent-strong: var(--gx-blue-700);

  /* Shell = a moldura escura (topbar do Master, sidebar do painel) */
  --gx-shell:        var(--gx-navy-900);
  --gx-shell-hover:  var(--gx-navy-800);
  --gx-shell-active: var(--gx-navy-700);

  --gx-ok:           var(--gx-green-600);
  --gx-ok-soft:      var(--gx-green-050);
  --gx-warn:         var(--gx-amber-700);
  --gx-warn-soft:    var(--gx-amber-050);
  --gx-danger:       var(--gx-red-600);
  --gx-danger-soft:  var(--gx-red-050);
  --gx-neutral:      var(--gx-slate-500);
  --gx-neutral-soft: var(--gx-slate-050);

  /* ---------------------------------------------------------------------
     3. FORMA
     --------------------------------------------------------------------- */

  --gx-radius-sm: 4px;   /* painel: cards, tabelas, botões */
  --gx-radius-md: 8px;   /* telas públicas */
  --gx-radius-lg: 10px;  /* Portal: elementos menores */
  --gx-radius-xl: 16px;  /* Portal: cards */

  --gx-shadow-card:  0 1px 2px rgba(18, 22, 40, .06), 0 10px 30px rgba(18, 22, 40, .06);
  --gx-shadow-hover: 0 2px 6px rgba(18, 22, 40, .08), 0 16px 40px rgba(18, 22, 40, .12);

  /* ---------------------------------------------------------------------
     4. MÉTRICAS DE SHELL
     --------------------------------------------------------------------- */

  --gx-sidebar-w:       240px;
  --gx-topbar-h:        56px;
  --gx-topbar-h-portal: 60px;

  /* ---------------------------------------------------------------------
     5. TIPOGRAFIA — pilhas locais do sistema, sem webfont remota
     --------------------------------------------------------------------- */

  --gx-font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --gx-font-portal: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* ---------------------------------------------------------------------
     7. PRIMITIVAS ESCURAS - DECLARADAS, NAO APLICADAS  (UI-QA-2 - Bloco 1)

     Estes valores NAO pintam nada. Nenhum seletor deste arquivo os consome, e
     nenhuma superficie os consome ainda. Existem para que o tema escuro, quando
     nascer, tenha uma paleta unica e ja medida -- em vez de cada CSS inventar o
     seu proprio escuro, que foi exatamente o problema que a camada de tokens
     resolveu no tema claro.

     REGRA DE APLICACAO (vale para os blocos seguintes, leia antes de usar):

       o override de tema mora no CSS DA SUPERFICIE, nunca aqui. Em portal.css,
       e so la, nasce um `:root[data-tema="escuro"]` que aponta os nomes locais
       (--pc-bg, --pc-surface, ...) para estas primitivas.

     E isso que impede o tema escuro de vazar: `publico.css` e o caminho de
     impressao simplesmente NAO escrevem esse bloco, entao nao escurecem nem por
     acidente -- a protecao e por construcao, nao por lista de excecoes. Um
     `:root[data-tema="escuro"]` GLOBAL aqui escureceria as quatro superficies
     de uma vez, inclusive contrato, recibo, certificado e ficha do aluno.
     NAO faca isso.

     ESCALA REVISADA no microbloco 3.1, depois de ver a coisa renderizada.

     A premissa original desta camada era "no escuro a separacao vem da BORDA,
     porque sombra nao funciona sobre fundo escuro". A primeira metade estava
     errada na dose. Medida em L* (claridade perceptual, que e a metrica certa
     perto do preto -- razao WCAG comprime nessa faixa e engana), a escala
     antiga colocava a borda 15,9 de L* acima do card, contra apenas 7,7 do
     card sobre a pagina: a MOLDURA era o degrau mais forte da tela, o dobro da
     elevacao que ela deveria apenas insinuar. Somado a um piso quase preto
     (L* 7,9), o resultado lia como pesado -- cada card emoldurado com risco
     claro sobre um fundo sem ar.

     A correcao inverte a hierarquia: quem separa e a SUPERFICIE; a borda so
     insinua. O degrau do card foi preservado (7,1 -- era 7,7, a parte que ja
     funcionava) e a borda caiu pela metade.

       nivel        L* antes -> depois
       pagina        7,9  ->  9,8    (menos "preto solido", mais ar)
       card         15,6  -> 16,9
       elevacao     22,4  -> 23,8
       borda        31,5  -> 24,2    (degrau sobre o card: 15,9 -> 7,3)

     A elevacao NAO acompanhou a suavizacao, e de proposito: ela e o
     preenchimento de `<input>` e de hover, ou seja, e o que identifica um
     CONTROLE. Com a borda agora discreta, quem diz "isto e um campo" e o
     preenchimento -- entao ele mantem o mesmo degrau sobre o card que o tema
     ja aprovado tinha (6,8 -> 6,9 de L*). Suavizar aqui junto teria deixado o
     formulario dificil de achar em troca de nada.

     Contrastes medidos (razao WCAG, sobre o card):
       ink 11,71:1 . muted 6,43:1 . muted sobre elevacao 5,19:1 . ink/pagina 14,01:1
     A tinta principal foi de #e8ecf4 para #e3e8f1: perto do branco puro sobre
     fundo escuro aparece halo (halation) e cansa em leitura longa. 11,71:1
     segue muito acima de AAA. O muted SUBIU (6,31 -> 6,43): o pedido era texto
     secundario visivel sem brilho excessivo, e o risco real no escuro e o
     cinza apagado, nao o claro demais.

     Hierarquia preservada: o Modo Aula (`--gx-focus-*`, #0e1320) continua sendo
     a superficie MAIS escura do produto. O escuro de produto e deliberadamente
     mais claro que ele, para que "entrar no Modo Aula" siga sendo uma mudanca
     perceptivel de foco, e nao escuro sobre escuro.

     Fora deste bloco de proposito: `color-scheme`. Ela e uma propriedade, nao
     uma variavel, e mudaria a renderizacao nativa de input/select/scrollbar em
     SO configurado como escuro. Nasce no bloco do Portal, junto com o `dark`,
     onde pode ser validada visualmente.
     --------------------------------------------------------------------- */

  --gx-dark-bg:        #161b26;
  --gx-dark-surface:   #222a39;
  --gx-dark-surface-2: #303949;
  --gx-dark-line:      #313a4a;
  --gx-dark-ink:       #e3e8f1;
  --gx-dark-ink-muted: #a3aec1;

  /* Estados no escuro: tinta CLARA sobre soft ESCURO. Nao e a inversao do par
     claro -- inverter produz cor suja e ilegivel. Cada tinta atinge AA tanto
     sobre `--gx-dark-surface` (uso solto, ex.: valor de KPI) quanto sobre o seu
     proprio soft (uso em badge).

     Os softs subiram junto com o card no microbloco 3.1, e por necessidade, nao
     por gosto: medidos contra o card NOVO, os valores antigos caiam entre -4 e
     +2,5 de L*, ou seja, rentes a superficie -- o badge perdia a forma de pilula
     e o vermelho virava um buraco escuro dentro do card. Agora cada soft fica
     +4 a +6 de L* acima do card: le como pilula, sem virar bloco de cor. */
  --gx-dark-ok:           #4ade80;  /* 8,26:1 sobre surface . 6,91:1 sobre o soft */
  --gx-dark-ok-soft:      #1b3d28;
  --gx-dark-warn:         #fbbf24;  /* 8,63:1 . 7,60:1 */
  --gx-dark-warn-soft:    #40301a;
  --gx-dark-danger:       #f87171;  /* 5,21:1 . 4,90:1 */
  --gx-dark-danger-soft:  #43262a;
  --gx-dark-neutral:      #a3aec1;  /* 6,43:1 . 5,50:1 */
  --gx-dark-neutral-soft: #2c3547;

  /* Acento no escuro. ATENCAO ao aplicar: o par do tema claro e "fundo azul +
     texto BRANCO", e ele NAO se traduz -- branco sobre `--gx-dark-accent` da
     2,54:1, ilegivel. Quem copiar `color: #fff` do tema claro produz um botao
     primario que ninguem le. Por isso existe `--gx-dark-on-accent` (7,03:1):
     e a tinta que vai SOBRE o acento quando ele for preenchimento. */
  --gx-dark-accent:        #60a5fa;  /* 5,66:1 sobre surface - link e texto */
  --gx-dark-accent-strong: #93c5fd;  /* 7,99:1 - hover e anel de foco */
  --gx-dark-on-accent:     #161b26;  /* 6,78:1 sobre o acento - acompanha o piso */
  /* UI-QA-2 - Bloco 4: faltava o PREENCHIMENTO suave do acento. Os quatro
     estados tinham par tinta/soft desde o Bloco 1, mas o acento nao -- e o
     painel usa "fundo azul claro + texto azul escuro" em badge de informacao,
     mensagem `.info`, aba selecionada e chip ligado. Sem este token, cada um
     desses viraria um literal escuro solto. +7,3 de L* sobre o card, na mesma
     dose dos outros softs (ver microbloco 3.1). */
  --gx-dark-accent-soft:   #213a5e;  /* accent-strong sobre ele: 6,36:1 */
}

/* ---------------------------------------------------------------------
   6. IMPRESSÃO — o tema claro é obrigatório

   Continua sendo um no-op hoje: os valores repetidos abaixo são os mesmos do
   :root. Existe para que um futuro `:root[data-tema="escuro"]` NUNCA vaze para
   contrato, recibo, certificado, aditivo ou ficha do aluno. `print_base.html`
   usa app.css, então a trava precisa morar aqui, na base.

   UI-QA-2 - Bloco 1: a trava foi ESTENDIDA. Antes ela devolvia ao claro apenas
   fundo, superfície, linha e tinta -- então um tema escuro que trocasse
   `--gx-ok`, `--gx-danger` ou `--gx-accent` ainda sairia no papel com a cor
   escura em badge, em valor de destaque e em link. Um recibo com badge verde
   fluorescente é tão errado quanto um com fundo preto. Agora a trava cobre
   também acento e os quatro pares de estado.

   Segunda linha de defesa, não a primeira: a primeira é `print_base.html` não
   emitir `data-tema`. Esta existe porque as duas podem falhar por motivos
   diferentes, e documento impresso errado não tem desfazer.
   --------------------------------------------------------------------- */
@media print {
  :root {
    --gx-bg:        var(--gx-gray-050);
    --gx-surface:   var(--gx-white);
    --gx-surface-2: var(--gx-gray-080);
    --gx-line:      var(--gx-line-200);
    --gx-ink:       var(--gx-ink-900);
    --gx-ink-muted: var(--gx-ink-500);

    --gx-accent:        var(--gx-blue-600);
    --gx-accent-strong: var(--gx-blue-700);

    --gx-ok:           var(--gx-green-600);
    --gx-ok-soft:      var(--gx-green-050);
    --gx-warn:         var(--gx-amber-700);
    --gx-warn-soft:    var(--gx-amber-050);
    --gx-danger:       var(--gx-red-600);
    --gx-danger-soft:  var(--gx-red-050);
    --gx-neutral:      var(--gx-slate-500);
    --gx-neutral-soft: var(--gx-slate-050);
  }
}

/* ---------------------------------------------------------------------------
   ROTA A, 2026-08-20 — a paleta MEDIDA no arquivo da logo da escola.

   Não foram escolhidas: saíram de `planeta-formacao-simbolo.png`, pixel a pixel.
   O anel da logo é um DEGRADÊ de três paradas, não uma cor — é a assinatura
   mais forte da marca, e é ela que a tela de entrada passa a repetir.
   --------------------------------------------------------------------------- */
:root {
  --gx-anel-a: #fe6101;   /* laranja, na base do arco */
  --gx-anel-b: #fc9401;   /* ambar, no topo */
  --gx-anel-c: #fcc601;   /* amarelo, no alto a direita */
  --gx-anel: linear-gradient(90deg, var(--gx-anel-a) 0%, var(--gx-anel-b) 55%, var(--gx-anel-c) 100%);
  --gx-preto-orbita: #000000;   /* 55% da propria logo */
  --gx-carvao: #0a0a0b;
  --gx-fio-orbita: #1b1b1e;
}