/* tokens.css — UNICO arquivo do projeto com valor hexadecimal.
   Identidade AeS v3.0 (brand-tokens.json, 17/09/2026).
   Os contrastes dos pares estao medidos no spec e sao verificados por gates/g1_contraste.py. */

:root {
  /* --- cores de marca, valores fixos --- */
  --marinho:        #01040D;
  --azul:           #0012EE;
  --ambar:          #F59E0B;
  --branco-quente:  #FDF8EC;
  --azul-sinal:     #5B9CFF;
  --cinza-nevoa:    #A7AEC2;
  --cinza-aco:      #4F5670;
  --ambar-escuro:   #9A6207;

  /* --- forma --- */
  --radius:     4px;
  --radius-md:  8px;
  --radius-lg:  16px;
  --font-sans:  'Rubik', 'Helvetica Neue', Arial, system-ui, sans-serif;
  --maxw:       1200px;
  --gutter:     clamp(20px, 5vw, 64px);
  /* Altura das ondas de transicao - UM lugar so, as 4 ondas leem daqui.
     Quem governa cada faixa de largura:
       ate ~622px  -> o PISO de 56px (o celular nao muda se o coeficiente mudar)
       622..1667px -> o valor fluido 9vw
       acima disso -> o TETO de 150px
     ATENCAO: o teto quase nunca entra. Em 1440 quem manda e o 9vw (129,6px);
     mexer no teto ali nao muda um pixel. Quem levanta a onda em tela larga e
     o COEFICIENTE - com 7vw a onda tinha 100,8px em 1440. Medido. */
  --onda-altura: clamp(56px, 9vw, 150px);
  /* Respiro entre uma secao e a onda que a toca, dos DOIS lados. Existe porque
     o vao visivel e SOMA de duas coisas que ninguem tinha somado: o padding da
     secao MAIS a faixa transparente do proprio <svg> (a onda ocupa altura
     inteira, mas metade dela e do outro lado da curva).
     Medido em 1440 antes desta regra: 140px chapados depois do hero e 139px
     depois dos cards, contra 85 e 86 do outro lado das mesmas ondas - a
     transicao era assimetrica em ~54px sem que isso fosse decisao de ninguem.
     Um valor so para os dois lados deixa os 4 pontos dentro de 1px.
     Quem aplica sao as 2 regras irmas do sections.css (`.onda + .secao` e
     `.secao:has(+ .onda)`). NAO redeclarar o clamp la. */
  --respiro-onda: clamp(48px, 6vw, 92px);

  /* ---------- TEMA ESCURO — PADRAO, sem precisar de atributo.
     Um typo em data-theme, ou o JS do toggle nao rodando, tem de deixar a pagina
     no escuro (a decisao do cliente), nunca sem cor nenhuma. Por isso o jogo de
     valores do escuro mora aqui, no :root puro, e :root[data-theme="light"]
     e o unico que sobrescreve. --------------------------------------------- */
  --surface-base:            var(--marinho);
  --surface-contrast:        var(--branco-quente);
  --surface-card:            #0a0f26;
  /* ---- CARTAO e traco azul, por superficie -------------------------------
     Regra do arquivo, ja valida para --borda/--borda-contrast e para os
     textos: todo token ajustado por superficie ganha um par "-contrast", e o
     par carrega o VALOR DO OUTRO TEMA - porque dentro de .contraste a
     superficie e, literalmente, a superficie do outro tema. Aqui a regra
     fecha para o cartao. Nenhuma cor nova entra no projeto: os quatro sao
     copia do par equivalente do tema oposto.
     --traco-azul e o azul que funciona como TRACO FINO sobre a superficie
     corrente. Sobre o marinho tem de ser o azul-sinal (7,46:1): o
     azul-eletrico ali da 2,27:1 (pares.proibido) e a linha nao aparece.
     Sobre o branco-quente vale o azul-eletrico (8,54:1). */
  --traco-azul:              var(--azul-sinal);                 /* base = marinho */
  --traco-azul-contrast:     var(--azul);                       /* faixa contraste = branco quente */
  --surface-card-contrast:   #FFFFFF;                           /* = --surface-card do tema claro */
  --sombra-card-contrast:    0 4px 24px rgba(1, 4, 13, 0.10);   /* = --sombra-card do tema claro */
  --glow-azul-contrast:      0 0 60px rgba(0, 18, 238, 0.20);   /* = --glow-azul do tema claro */

  --text-on-base:            var(--branco-quente);   /* 19,34:1 */
  --text-muted-on-base:      var(--cinza-nevoa);     /*  9,25:1 */
  --accent-text:             var(--ambar);           /*  9,54:1 */
  --link:                    var(--azul-sinal);      /*  7,46:1 */

  --text-on-contrast:        var(--marinho);         /* 19,34:1 */
  --text-muted-on-contrast:  var(--cinza-aco);       /*  6,84:1 */
  --accent-on-contrast:      var(--ambar-escuro);    /*  4,80:1 */

  --borda:                   rgba(91, 156, 255, 0.18);

  /* Contorno de CONTROLE (.toggle e .botao-linha). Token proprio porque esses
     dois sao os unicos usos de --borda em que a linha IDENTIFICA o componente:
     o .botao-linha nao tem preenchimento, entao sem a borda ele e texto solto,
     nao botao. Cai na WCAG 1.4.11, minimo 3,0:1 - e --borda mede 1,25:1 no
     escuro e 1,30:1 no claro, medido em 18/09/2026 pela verificacao V3 do G1.
     --borda segue decorativa (divisoria do topo, contorno do card) e esta
     declarada como isenta na lista do portao, com justificativa.
     Mesmo precedente de --borda-contrast, --traco-passo e --traco-ambar. */
  --traco-controle:          rgba(91, 156, 255, 0.62);   /* 3,37:1 sobre o marinho */
  /* Anel da bolinha da trilha (.passo-num). Token PROPRIO porque --borda serve
     header, toggle e botao-linha, e a dose que a bolinha precisa derrubaria o
     desenho deles. Mesmo precedente do --borda-contrast da Task 5.
     MEDIDO: com --borda o anel dava 1,25:1 no escuro e 1,30:1 no claro - os
     DOIS invisiveis como objeto grafico (o minimo e 3,0:1, WCAG 1.4.11); quem
     segurava a bolinha era o numero ambar dentro dela, nao o anel.
     Mesma familia de cor do --borda de cada tema, so a dose sobe:
     azul-sinal a 0,58 sobre o marinho compoe #355C99 = 3,07:1. */
  --traco-passo:             rgba(91, 156, 255, 0.58);
  /* Filete de 2px que abre cada percepcao (.percepcao, secao Essencia). E
     TRACO GRAFICO, nao texto: o minimo e 3,0:1 (WCAG 1.4.11), nao 4,5:1.
     🔴 O PLANO MANDAVA --ambar PURO NOS DOIS TEMAS, afirmando 4,0:1 sobre o
     branco-quente. MEDIDO: 2,03:1 - e o par "ambar sobre branco-quente (2,03)"
     ja esta em pares.PROIBIDO do brand-tokens.json, com o spec dizendo na
     secao 4 que "ambar nunca e texto sobre fundo claro". No tema claro o
     filete sairia invisivel. Mesma saida do --borda-contrast e do
     --traco-passo: token proprio por tema, nenhuma cor nova no projeto.
     Sobre o marinho: ambar puro, 9,54:1 - e o mesmo filete da assinatura de
     e-mail aprovada em 17/09, entao a familia visual se mantem.
     Sobre o branco-quente: ambar-escuro, 4,80:1 (pares.sempre_pode).
     Por que NAO reusar --accent-text, que hoje carrega esses mesmos 2 valores:
     ele e token de TEXTO e entra na matriz FAMILIAS do g1_contraste.py com
     minimo de 4,5:1. Traco grafico vive fora dessa matriz (como --traco-azul e
     --traco-passo) e tem outro minimo; amarrar os dois faria um ajuste de
     legibilidade de texto mexer num filete em silencio, e o contrario. */
  --traco-ambar:             var(--ambar);                     /* 9,54:1 sobre o marinho */
  /* 0,20 e nao 0,12. O cartao branco sobre o creme da 1,06:1 de superficie:
     quem desenha o cartao e a linha, nao o fundo. Escurecer o fundo nao e
     alternativa - passando de ~#F5EFE0 o numero 01/02/03 (ambar-escuro) cai
     abaixo de 4,5:1, medido.
     ATENCAO: isto QUEBRA o espelho com --borda (tema claro), que segue em
     0,12. E de proposito: sobre o creme a linha precisa ser mais forte do que
     sobre o marinho, e --borda no claro tambem veste header, toggle e
     botao-linha, que nao tem esse problema. Cartao sobre creme no tema CLARO
     (se um dia existir) vai precisar da mesma dose. */
  --borda-contrast:          rgba(1, 4, 13, 0.20);
  --glow-azul:               0 0 60px rgba(0, 18, 238, 0.45);
  --glow-ambar:              0 0 24px rgba(245, 158, 11, 0.30);
  --sombra-card:             0 4px 24px rgba(1, 4, 13, 0.55);
  /* Cor do anel principal do foco: ambar no escuro (9,54:1 contra o marinho,
     pares.sempre_pode), azul-eletrico no claro (ver bloco claro). */
  --foco-cor:                var(--ambar);
  /* Anel escuro (marinho) por tras do outline ambar do foco (base.css).
     Sobre o marinho ele quase some (decorativo); e o que sobra visivel sobre
     o branco-quente, onde o ambar sozinho reprova (2,03:1, brand-tokens.json
     pares.proibido) - o anel escuro e que garante o contorno perceptivel. */
  --foco-halo:               rgba(1, 4, 13, 0.35);
  /* Nucleo do grafismo derivado do hero (arcos + nucleo). Segue logo.regra_nucleo
     do brand-tokens.json: "Fundo escuro -> nucleo #FDF8EC. Fundo claro -> nucleo
     #01040D." Mesmo sendo grafismo DERIVADO e nao a marca, o nucleo obedece a
     regra da marca - e o que o manual manda e o que evita a pagina ensinar o
     errado. Valor identico ao --branco-quente, token proprio so para declarar a
     intencao no lugar onde cor mora.
     ATENCAO: nunca apontar para --azul aqui, seria "nucleo na mesma cor da
     contraforma" (logo.usos_incorretos). */
  --nucleo:                  var(--branco-quente);
  /* Brilho azul dos arcos do hero. E `filter`, nao `box-shadow`, entao nao da
     para reusar --glow-azul (sintaxe incompativel). Mesmo matiz do --azul
     (#0012EE), alfa 0,55 no escuro - o valor que o plano pediu. */
  /* Traco dos arcos do hero. NAO e --azul: azul-eletrico sobre o marinho da
     2,27:1 (medido em gates/lib_wcag; o manual lista "marinho sobre azul
     eletrico (2,27:1)" em logo.usos_incorretos) e a linha simplesmente nao
     aparece - so sobra a mancha do glow. O proprio brand-tokens.json diz por
     que o azul-sinal existe: "nenhum azul puro e legivel sobre o marinho"
     (7,46:1). O brilho azul-eletrico continua, mas no --glow-arco. */
  --arco-traco:              var(--traco-azul);
  --glow-arco:               drop-shadow(0 0 22px rgba(0, 18, 238, 0.55));
  /* Halo radial atras dos arcos. Sem cor literal: derivado de --azul por
     color-mix no sections.css; aqui mora so a intensidade por tema. */
  /* Cor-fonte do halo do hero. No escuro o azul-eletrico sobre o marinho
     compoe #01095A, HSL(235, 99%, 18%) - azul profundo e limpo. */
  --halo-arco-cor:           var(--azul);
  --halo-arco-forca:         34%;

  /* ---- HALO DO CTA FINAL ------------------------------------------------
     Mancha radial atras do bloco de CTA. Mesma mecanica do halo do hero: sem
     cor literal aqui, `color-mix` no sections.css deriva a cor, e a
     intensidade por tema mora no `-forca`.

     🔴 O PLANO MANDAVA `rgba(0,18,238,.22)` CHAPADO NOS DOIS TEMAS - duas
     coisas erradas de uma vez: cor literal fora deste arquivo, e a mesma dose
     sobre as duas superficies.
     MEDIDO no pico do gradiente (composicao alfa sobre a superficie base),
     texto por texto do CTA:
       escuro (azul-eletrico 22% sobre o marinho -> #01073e)
         --text-on-base    17,99:1   --text-muted-on-base 8,61:1
         --accent-text     8,88:1                                  todos passam
       claro  (azul-eletrico 22% sobre o branco-quente -> #c5c5ec)
         --text-on-base    12,27:1
         --text-muted-on-base 4,34:1  REPROVA (minimo 4,5)
         --accent-text     3,05:1     REPROVA FEIO (o .rotulo "Proximo passo")
     Ou seja: no tema claro o halo do plano quebra AA em dois dos tres textos.

     Por que a forca no claro e 0% e nao "um pouco menos":
     o gargalo e o `.rotulo`, que usa --accent-text = ambar-escuro e mede
     4,80:1 sobre o branco-quente puro - sobra 0,30 de folga para o sistema
     inteiro. Qualquer tinta atras dele come essa folga. Varri a forca de 4% a
     24%, com azul-eletrico e com azul-sinal (o mesmo troco de cor que o
     --halo-arco-cor ja faz no claro):
         azul-sinal  4% -> 4,64   6% -> 4,54   8% -> 4,49 REPROVA
         azul-eletr. 4% -> 4,45 REPROVA ja no primeiro degrau
     O teto util fica em ~6%, com 0,04 de margem, e nesse nivel a composicao
     e #f3f2ed contra #FDF8EC: nao e brilho azul, e o creme perdendo calor no
     meio - le como defeito de impressao, nao como halo. Trocar 0,04 de
     margem AA por uma mancha e mau negocio, ainda mais porque NENHUM PORTAO
     ve este numero (ver o aviso abaixo).
     Entao: no escuro o halo existe e e o do plano; no claro a superficie fica
     limpa. Mesmo tipo de decisao ja tomada neste arquivo para --glow-azul
     (0,45 -> 0,20) e --glow-arco (0,55 -> 0,22), so que aqui a atenuacao
     honesta chega a zero.

     ⚠️ PONTO CEGO DECLARADO: este token NAO e visto por portao nenhum.
     O G1 mede token contra token e nao sabe que existe um gradiente; o G6 le
     o fundo REAL subindo pela arvore do DOM, e o halo mora num
     ::before - pseudo-elemento nao e ancestral de ninguem, entao o G6 mede o
     texto contra --surface-base limpo e da verde. O mesmo vale para o halo do
     hero (--halo-arco-*), que passa por acidente porque nao ha texto em cima
     dele. Quem mexer nesta forca refaz a conta na mao. */
  --halo-cta-cor:            var(--azul);
  --halo-cta-forca:          22%;
}

/* ---------- TEMA ESCURO, EXPLICITO ----------
   Redundante de proposito com o :root de cima: cobre o caso do toggle voltar
   do claro escrevendo data-theme="dark" na mao (o atributo tem de valer, nao
   so a ausencia dele). Mesmos valores, nao inventar variacao aqui. */
:root[data-theme="dark"] {
  --surface-base:            var(--marinho);
  --surface-contrast:        var(--branco-quente);
  --surface-card:            #0a0f26;
  /* ---- CARTAO e traco azul, por superficie -------------------------------
     Regra do arquivo, ja valida para --borda/--borda-contrast e para os
     textos: todo token ajustado por superficie ganha um par "-contrast", e o
     par carrega o VALOR DO OUTRO TEMA - porque dentro de .contraste a
     superficie e, literalmente, a superficie do outro tema. Aqui a regra
     fecha para o cartao. Nenhuma cor nova entra no projeto: os quatro sao
     copia do par equivalente do tema oposto.
     --traco-azul e o azul que funciona como TRACO FINO sobre a superficie
     corrente. Sobre o marinho tem de ser o azul-sinal (7,46:1): o
     azul-eletrico ali da 2,27:1 (pares.proibido) e a linha nao aparece.
     Sobre o branco-quente vale o azul-eletrico (8,54:1). */
  --traco-azul:              var(--azul-sinal);                 /* base = marinho */
  --traco-azul-contrast:     var(--azul);                       /* faixa contraste = branco quente */
  --surface-card-contrast:   #FFFFFF;                           /* = --surface-card do tema claro */
  --sombra-card-contrast:    0 4px 24px rgba(1, 4, 13, 0.10);   /* = --sombra-card do tema claro */
  --glow-azul-contrast:      0 0 60px rgba(0, 18, 238, 0.20);   /* = --glow-azul do tema claro */

  --text-on-base:            var(--branco-quente);
  --text-muted-on-base:      var(--cinza-nevoa);
  --accent-text:             var(--ambar);
  --link:                    var(--azul-sinal);

  --text-on-contrast:        var(--marinho);
  --text-muted-on-contrast:  var(--cinza-aco);
  --accent-on-contrast:      var(--ambar-escuro);

  --borda:                   rgba(91, 156, 255, 0.18);

  /* Contorno de CONTROLE (.toggle e .botao-linha). Token proprio porque esses
     dois sao os unicos usos de --borda em que a linha IDENTIFICA o componente:
     o .botao-linha nao tem preenchimento, entao sem a borda ele e texto solto,
     nao botao. Cai na WCAG 1.4.11, minimo 3,0:1 - e --borda mede 1,25:1 no
     escuro e 1,30:1 no claro, medido em 18/09/2026 pela verificacao V3 do G1.
     --borda segue decorativa (divisoria do topo, contorno do card) e esta
     declarada como isenta na lista do portao, com justificativa.
     Mesmo precedente de --borda-contrast, --traco-passo e --traco-ambar. */
  --traco-controle:          rgba(91, 156, 255, 0.62);   /* 3,37:1 sobre o marinho */
  /* Anel da bolinha da trilha (.passo-num). Token PROPRIO porque --borda serve
     header, toggle e botao-linha, e a dose que a bolinha precisa derrubaria o
     desenho deles. Mesmo precedente do --borda-contrast da Task 5.
     MEDIDO: com --borda o anel dava 1,25:1 no escuro e 1,30:1 no claro - os
     DOIS invisiveis como objeto grafico (o minimo e 3,0:1, WCAG 1.4.11); quem
     segurava a bolinha era o numero ambar dentro dela, nao o anel.
     Mesma familia de cor do --borda de cada tema, so a dose sobe:
     azul-sinal a 0,58 sobre o marinho compoe #355C99 = 3,07:1. */
  --traco-passo:             rgba(91, 156, 255, 0.58);
  /* Filete de 2px que abre cada percepcao (.percepcao, secao Essencia). E
     TRACO GRAFICO, nao texto: o minimo e 3,0:1 (WCAG 1.4.11), nao 4,5:1.
     🔴 O PLANO MANDAVA --ambar PURO NOS DOIS TEMAS, afirmando 4,0:1 sobre o
     branco-quente. MEDIDO: 2,03:1 - e o par "ambar sobre branco-quente (2,03)"
     ja esta em pares.PROIBIDO do brand-tokens.json, com o spec dizendo na
     secao 4 que "ambar nunca e texto sobre fundo claro". No tema claro o
     filete sairia invisivel. Mesma saida do --borda-contrast e do
     --traco-passo: token proprio por tema, nenhuma cor nova no projeto.
     Sobre o marinho: ambar puro, 9,54:1 - e o mesmo filete da assinatura de
     e-mail aprovada em 17/09, entao a familia visual se mantem.
     Sobre o branco-quente: ambar-escuro, 4,80:1 (pares.sempre_pode).
     Por que NAO reusar --accent-text, que hoje carrega esses mesmos 2 valores:
     ele e token de TEXTO e entra na matriz FAMILIAS do g1_contraste.py com
     minimo de 4,5:1. Traco grafico vive fora dessa matriz (como --traco-azul e
     --traco-passo) e tem outro minimo; amarrar os dois faria um ajuste de
     legibilidade de texto mexer num filete em silencio, e o contrario. */
  --traco-ambar:             var(--ambar);                     /* 9,54:1 sobre o marinho */
  /* 0,20 e nao 0,12. O cartao branco sobre o creme da 1,06:1 de superficie:
     quem desenha o cartao e a linha, nao o fundo. Escurecer o fundo nao e
     alternativa - passando de ~#F5EFE0 o numero 01/02/03 (ambar-escuro) cai
     abaixo de 4,5:1, medido.
     ATENCAO: isto QUEBRA o espelho com --borda (tema claro), que segue em
     0,12. E de proposito: sobre o creme a linha precisa ser mais forte do que
     sobre o marinho, e --borda no claro tambem veste header, toggle e
     botao-linha, que nao tem esse problema. Cartao sobre creme no tema CLARO
     (se um dia existir) vai precisar da mesma dose. */
  --borda-contrast:          rgba(1, 4, 13, 0.20);
  --glow-azul:               0 0 60px rgba(0, 18, 238, 0.45);
  --glow-ambar:              0 0 24px rgba(245, 158, 11, 0.30);
  --sombra-card:             0 4px 24px rgba(1, 4, 13, 0.55);
  --foco-cor:                var(--ambar);
  --foco-halo:               rgba(1, 4, 13, 0.35);
  /* Nucleo do grafismo derivado do hero (arcos + nucleo). Segue logo.regra_nucleo
     do brand-tokens.json: "Fundo escuro -> nucleo #FDF8EC. Fundo claro -> nucleo
     #01040D." Mesmo sendo grafismo DERIVADO e nao a marca, o nucleo obedece a
     regra da marca - e o que o manual manda e o que evita a pagina ensinar o
     errado. Valor identico ao --branco-quente, token proprio so para declarar a
     intencao no lugar onde cor mora.
     ATENCAO: nunca apontar para --azul aqui, seria "nucleo na mesma cor da
     contraforma" (logo.usos_incorretos). */
  --nucleo:                  var(--branco-quente);
  /* Brilho azul dos arcos do hero. E `filter`, nao `box-shadow`, entao nao da
     para reusar --glow-azul (sintaxe incompativel). Mesmo matiz do --azul
     (#0012EE), alfa 0,55 no escuro - o valor que o plano pediu. */
  /* Traco dos arcos do hero. NAO e --azul: azul-eletrico sobre o marinho da
     2,27:1 (medido em gates/lib_wcag; o manual lista "marinho sobre azul
     eletrico (2,27:1)" em logo.usos_incorretos) e a linha simplesmente nao
     aparece - so sobra a mancha do glow. O proprio brand-tokens.json diz por
     que o azul-sinal existe: "nenhum azul puro e legivel sobre o marinho"
     (7,46:1). O brilho azul-eletrico continua, mas no --glow-arco. */
  --arco-traco:              var(--traco-azul);
  --glow-arco:               drop-shadow(0 0 22px rgba(0, 18, 238, 0.55));
  /* Halo radial atras dos arcos. Sem cor literal: derivado de --azul por
     color-mix no sections.css; aqui mora so a intensidade por tema. */
  /* Cor-fonte do halo do hero. No escuro o azul-eletrico sobre o marinho
     compoe #01095A, HSL(235, 99%, 18%) - azul profundo e limpo. */
  --halo-arco-cor:           var(--azul);
  --halo-arco-forca:         34%;

  /* ---- HALO DO CTA FINAL ------------------------------------------------
     Mancha radial atras do bloco de CTA. Mesma mecanica do halo do hero: sem
     cor literal aqui, `color-mix` no sections.css deriva a cor, e a
     intensidade por tema mora no `-forca`.

     🔴 O PLANO MANDAVA `rgba(0,18,238,.22)` CHAPADO NOS DOIS TEMAS - duas
     coisas erradas de uma vez: cor literal fora deste arquivo, e a mesma dose
     sobre as duas superficies.
     MEDIDO no pico do gradiente (composicao alfa sobre a superficie base),
     texto por texto do CTA:
       escuro (azul-eletrico 22% sobre o marinho -> #01073e)
         --text-on-base    17,99:1   --text-muted-on-base 8,61:1
         --accent-text     8,88:1                                  todos passam
       claro  (azul-eletrico 22% sobre o branco-quente -> #c5c5ec)
         --text-on-base    12,27:1
         --text-muted-on-base 4,34:1  REPROVA (minimo 4,5)
         --accent-text     3,05:1     REPROVA FEIO (o .rotulo "Proximo passo")
     Ou seja: no tema claro o halo do plano quebra AA em dois dos tres textos.

     Por que a forca no claro e 0% e nao "um pouco menos":
     o gargalo e o `.rotulo`, que usa --accent-text = ambar-escuro e mede
     4,80:1 sobre o branco-quente puro - sobra 0,30 de folga para o sistema
     inteiro. Qualquer tinta atras dele come essa folga. Varri a forca de 4% a
     24%, com azul-eletrico e com azul-sinal (o mesmo troco de cor que o
     --halo-arco-cor ja faz no claro):
         azul-sinal  4% -> 4,64   6% -> 4,54   8% -> 4,49 REPROVA
         azul-eletr. 4% -> 4,45 REPROVA ja no primeiro degrau
     O teto util fica em ~6%, com 0,04 de margem, e nesse nivel a composicao
     e #f3f2ed contra #FDF8EC: nao e brilho azul, e o creme perdendo calor no
     meio - le como defeito de impressao, nao como halo. Trocar 0,04 de
     margem AA por uma mancha e mau negocio, ainda mais porque NENHUM PORTAO
     ve este numero (ver o aviso abaixo).
     Entao: no escuro o halo existe e e o do plano; no claro a superficie fica
     limpa. Mesmo tipo de decisao ja tomada neste arquivo para --glow-azul
     (0,45 -> 0,20) e --glow-arco (0,55 -> 0,22), so que aqui a atenuacao
     honesta chega a zero.

     ⚠️ PONTO CEGO DECLARADO: este token NAO e visto por portao nenhum.
     O G1 mede token contra token e nao sabe que existe um gradiente; o G6 le
     o fundo REAL subindo pela arvore do DOM, e o halo mora num
     ::before - pseudo-elemento nao e ancestral de ninguem, entao o G6 mede o
     texto contra --surface-base limpo e da verde. O mesmo vale para o halo do
     hero (--halo-arco-*), que passa por acidente porque nao ha texto em cima
     dele. Quem mexer nesta forca refaz a conta na mao. */
  --halo-cta-cor:            var(--azul);
  --halo-cta-forca:          22%;
}

/* ---------- TEMA CLARO ---------- */
:root[data-theme="light"] {
  --surface-base:            var(--branco-quente);
  --surface-contrast:        var(--marinho);
  --surface-card:            #FFFFFF;
  /* ---- CARTAO e traco azul, por superficie -------------------------------
     Regra do arquivo, ja valida para --borda/--borda-contrast e para os
     textos: todo token ajustado por superficie ganha um par "-contrast", e o
     par carrega o VALOR DO OUTRO TEMA - porque dentro de .contraste a
     superficie e, literalmente, a superficie do outro tema. Aqui a regra
     fecha para o cartao. Nenhuma cor nova entra no projeto: os quatro sao
     copia do par equivalente do tema oposto.
     --traco-azul e o azul que funciona como TRACO FINO sobre a superficie
     corrente. Sobre o marinho tem de ser o azul-sinal (7,46:1): o
     azul-eletrico ali da 2,27:1 (pares.proibido) e a linha nao aparece.
     Sobre o branco-quente vale o azul-eletrico (8,54:1). */
  --traco-azul:              var(--azul);                       /* base = branco quente */
  --traco-azul-contrast:     var(--azul-sinal);                 /* faixa contraste = marinho */
  --surface-card-contrast:   #0a0f26;                           /* = --surface-card do tema escuro */
  --sombra-card-contrast:    0 4px 24px rgba(1, 4, 13, 0.55);   /* = --sombra-card do tema escuro */
  --glow-azul-contrast:      0 0 60px rgba(0, 18, 238, 0.45);   /* = --glow-azul do tema escuro */

  --text-on-base:            var(--marinho);
  --text-muted-on-base:      var(--cinza-aco);
  --accent-text:             var(--ambar-escuro);
  --link:                    var(--azul);            /* 8,54:1 */

  --text-on-contrast:        var(--branco-quente);
  --text-muted-on-contrast:  var(--cinza-nevoa);
  --accent-on-contrast:      var(--ambar);

  --borda:                   rgba(1, 4, 13, 0.12);

  /* Contorno de CONTROLE (.toggle e .botao-linha). Token proprio porque esses
     dois sao os unicos usos de --borda em que a linha IDENTIFICA o componente:
     o .botao-linha nao tem preenchimento, entao sem a borda ele e texto solto,
     nao botao. Cai na WCAG 1.4.11, minimo 3,0:1 - e --borda mede 1,25:1 no
     escuro e 1,30:1 no claro, medido em 18/09/2026 pela verificacao V3 do G1.
     --borda segue decorativa (divisoria do topo, contorno do card) e esta
     declarada como isenta na lista do portao, com justificativa.
     Mesmo precedente de --borda-contrast, --traco-passo e --traco-ambar. */
  --traco-controle:          rgba(1, 4, 13, 0.50);       /* 3,83:1 sobre o branco quente */
  /* Ver --traco-passo no bloco escuro. Aqui: marinho a 0,44 sobre o
     branco-quente compoe #8E8D8A = 3,13:1 (era 1,30:1 com --borda). */
  --traco-passo:             rgba(1, 4, 13, 0.44);
  /* Ver --traco-ambar no bloco escuro: ambar puro aqui e 2,03:1 (proibido). */
  --traco-ambar:             var(--ambar-escuro);              /* 4,80:1 sobre o branco-quente */
  --borda-contrast:          rgba(91, 156, 255, 0.18);
  --glow-azul:               0 0 60px rgba(0, 18, 238, 0.20);
  --glow-ambar:              0 0 24px rgba(154, 98, 7, 0.20);
  --sombra-card:             0 4px 24px rgba(1, 4, 13, 0.10);
  /* Ambar sobre o branco-quente reprova (2,03:1, pares.proibido) - o anel
     principal do foco vira azul-eletrico aqui, 8,54:1 (pares.sempre_pode). */
  --foco-cor:                var(--azul);
  /* Halo mais opaco que no escuro: reforco de verdade, nao decoracao - o anel
     principal (--foco-cor) ja passa por si so, o halo so ajuda a destacar. */
  --foco-halo:               rgba(1, 4, 13, 0.55);
  /* Fundo claro -> nucleo marinho (logo.regra_nucleo). */
  --nucleo:                  var(--marinho);
  /* Mesmo matiz do --azul, alfa atenuado seguindo a precedencia ja adotada
     neste arquivo para o tema claro (--glow-azul cai de 0,45 para 0,20): sobre
     o branco-quente o brilho a 0,55 vira mancha, nao brilho. */
  /* Sobre o branco-quente o azul-eletrico da 8,54:1 e a linha fica nitida:
     aqui o traco pode ser a cor de marca de verdade. */
  --arco-traco:              var(--traco-azul);
  --glow-arco:               drop-shadow(0 0 16px rgba(0, 18, 238, 0.22));
  /* NAO e --azul aqui. Medido: --azul a 14% sobre o branco-quente compoe
     #DAD8EC = HSL(245, 35%, 89%), violeta dessaturado - foi exatamente a
     "mancha cinza-lilas" do 1o render, e subir a forca so piora (34% da
     #A7AAED, HSL 238). A causa e o azul puro ter R=0 e G=18: misturado com o
     creme ele derruba os tres canais quase igual e sobra cinza com viés roxo.
     O --azul-sinal (#5B9CFF) a 40% compoe #BCD3F4 = HSL(215, 71%, 85%):
     azul-celeste limpo, 30 graus de matiz mais azul e o dobro de saturacao. */
  --halo-arco-cor:           var(--azul-sinal);
  --halo-arco-forca:         40%;

  /* Ver o bloco --halo-cta-* no tema escuro: a conta inteira esta la.
     Resumo: ambar-escuro sobre o branco-quente tem 0,30 de folga (4,80:1) e
     qualquer tinta atras do .rotulo derruba isso abaixo de 4,5. A forca que
     ainda passaria (~6%) nao produz halo, produz creme sujo. Aqui a
     superficie fica limpa. A cor segue declarada, e azul-sinal e nao
     azul-eletrico pelo mesmo motivo do --halo-arco-cor (azul puro a baixa
     opacidade sobre o creme vira cinza-lilas), para o dia em que alguem
     quiser reabrir a decisao ja saber por onde comecar. */
  --halo-cta-cor:            var(--azul-sinal);
  --halo-cta-forca:          0%;
}