/* =====================================================================
   IAF 360 — tokens visuais (Material Design 3). FONTE UNICA.
   =====================================================================
   Nenhum hex solto em componente. Se um valor nao esta aqui, ele nao
   deveria existir. Tres camadas, na ordem em que o MD3 as define:

     1. REFERENCIA  (`--gv-*`, `--md-ref-*`)  a marca e as paletas tonais
        que saem dela. Ninguem consome direto.
     2. SISTEMA     (`--md-sys-*`)             papel semantico: cor, tipo,
        forma, elevacao, movimento. E o que componente consome.
     3. COMPONENTE  (no proprio componentes.css) so quando um componente
        precisa de um valor que nenhum papel de sistema cobre.

   COMO AS CORES FORAM GERADAS (e como regerar) — DA-26:
   `@material/material-color-utilities` 0.4.0, `DynamicScheme` variante
   TonalSpot, spec 2021, contraste padrao, com CINCO paletas tonais
   construidas a partir da marca (`TonalPalette.fromHueAndChroma`):

     primary          hue  33.1  chroma 57.2   <- terracota #C9583A (semente desde 2026-10-11; antes #E05E3B)
     secondary        hue 239.9  chroma 38.9   <- petroleo-claro #0B6088
     tertiary         hue  93.3  chroma 24     <- primaria + 60 (regra do TonalSpot)
     neutral          hue 238.8  chroma 6      <- petroleo #074866, quase sem croma
     neutral-variant  hue 238.8  chroma 8

   e quatro paletas de ESTADO com o mesmo mapeamento tonal do papel
   `error` (cor T40, on-cor T100, container T90, on-container T30; no
   escuro T80/T20/T30/T90):

     error    hue  25    chroma 84  (a paleta de erro do proprio MD3)
     atencao  hue  75.7  chroma 44  (o ambar #9A6700 que o console ja usava)
     sucesso  hue 149.4  chroma 36  (verde #1A7D36; croma reduzido: em T90
                                     o verde satura antes das outras cores)
     info     hue 265.6  chroma 40  (azul #0969DA)

   O script que gera esta tabela e o que verifica os 152 pares de
   contraste esta descrito na nota [[tokens-md3-da-marca]] do cofre.

   A REGRA QUE EVITA ERRO DE LEITURA continua a mesma:
   cor de marca NAO carrega significado de estado. Erro e vermelho,
   alerta e ambar, sucesso e verde — sempre. Terracota e acao (papel
   `primary`); petroleo e estrutura (papel `secondary` e o tom do neutro).
   Botao destrutivo usa `error`, NUNCA `primary`: a proximidade
   cromatica entre os dois e exatamente o risco num painel que mistura
   acoes e inconsistencias.

   E A REGRA DE PAREAMENTO do MD3 vale em todo componente: `X` so recebe
   texto `on-X`. `primary` com `on-primary`, `secondary-container` com
   `on-secondary-container`, superficie com `on-surface`. Um par fora
   disso e contraste sem garantia — e foi exatamente onde as reprovacoes
   antigas se escondiam (terracota-escuro sobre fundo tingido: 4,22:1).

   Contraste verificado em 2026-09-21 (script na nota do cofre), nos dois
   esquemas, minimo em cada familia de par — e de novo em 2026-09-28,
   depois de escurecer o fundo e a navegacao do claro (mesmos minimos):
     on-surface sobre qualquer superficie ........ 13,28 a 17,13:1
     on-surface-variant sobre qualquer superficie   7,21 a  9,30:1
     primary (texto/link) sobre qualquer superficie 5,02 a  6,47:1
     on-primary sobre primary .....................  6,47:1
     on-X-container sobre X-container .............  7,19 a  7,26:1
     outline (borda de campo) sobre superficie ....  3,47 a  4,48:1 (>= 3:1, WCAG 1.4.11)
     secondary (anel de foco) sobre superficie ....  5,03 a  6,48:1
     inverse-on-surface sobre inverse-surface .....  11,58:1
   ===================================================================== */

:root {
  /* O navegador desenha controle nativo, barra de rolagem e `<select>`
     aberto no esquema em vigor. Sem isto o esquema escuro ganha um
     `<select>` branco no meio de uma tela escura. `light dark` = "aceito
     os dois, decida pela preferencia do sistema"; quando a pessoa
     escolhe, os blocos do fim do arquivo fixam um dos dois. */
  color-scheme: light dark;

  /* ===================================================================
     1. REFERENCIA
     =================================================================== */

  /* --- Marca (Grupo Vilarouca). Sao as SEMENTES das paletas; componente
     nenhum consome estes tres direto. O terracota puro (#C9583A, tom 51,5)
     so aparece na logo: em texto reprova (4,25:1 sobre branco) e o papel
     `primary` do MD3 e o tom 40 da MESMA paleta — a marca continua sendo
     a marca, no tom que passa. */
  --gv-terracota:       #C9583A;
  --gv-petroleo:        #074866;
  --gv-petroleo-claro:  #0B6088;

  /* --- Paletas tonais (md.ref.palette). So os tons que os papeis de
     sistema usam nos dois esquemas. Regerar pelo script, nunca a mao. */
  --md-ref-palette-primary10:  #3C0800;
  --md-ref-palette-primary20:  #611300;
  --md-ref-palette-primary30:  #83260B;
  --md-ref-palette-primary40:  #A33D21;
  /* T49: o tom mais claro da terracota que ainda passa com texto branco
     (4,64:1; o T50 da 4,50 e fica no limite). O `#C9583A` da marca e T51,5 e daria 4,25:1. Item ativo do
     menu no claro (§11.14). */
  --md-ref-palette-primary49:  #C15235;
  --md-ref-palette-primary80:  #FFB4A1;
  --md-ref-palette-primary90:  #FFDBD2;
  --md-ref-palette-primary100: #FFFFFF;

  --md-ref-palette-secondary10:  #001E2E;
  --md-ref-palette-secondary20:  #00344D;
  --md-ref-palette-secondary30:  #004C6D;
  --md-ref-palette-secondary40:  #15648D;
  --md-ref-palette-secondary80:  #8DCEFB;
  --md-ref-palette-secondary90:  #C8E6FF;
  --md-ref-palette-secondary100: #FFFFFF;

  --md-ref-palette-tertiary10:  #231B00;
  --md-ref-palette-tertiary20:  #3B2F05;
  --md-ref-palette-tertiary30:  #534519;
  --md-ref-palette-tertiary40:  #6C5D2E;
  --md-ref-palette-tertiary80:  #D9C58D;
  --md-ref-palette-tertiary90:  #F7E1A6;
  --md-ref-palette-tertiary100: #FFFFFF;

  --md-ref-palette-error10:  #410002;
  --md-ref-palette-error20:  #690005;
  --md-ref-palette-error30:  #93000A;
  --md-ref-palette-error40:  #BA1A1A;
  --md-ref-palette-error80:  #FFB4AB;
  --md-ref-palette-error90:  #FFDAD6;
  --md-ref-palette-error100: #FFFFFF;

  --md-ref-palette-neutral0:   #000000;
  --md-ref-palette-neutral4:   #0A0F12;
  --md-ref-palette-neutral6:   #101417;
  --md-ref-palette-neutral10:  #181C20;
  --md-ref-palette-neutral12:  #1C2024;
  --md-ref-palette-neutral17:  #262A2E;
  --md-ref-palette-neutral20:  #2D3135;
  --md-ref-palette-neutral22:  #313539;
  --md-ref-palette-neutral24:  #353A3D;
  --md-ref-palette-neutral87:  #D7DADF;
  --md-ref-palette-neutral90:  #DFE3E7;
  --md-ref-palette-neutral92:  #E5E8ED;
  --md-ref-palette-neutral94:  #EBEEF3;
  --md-ref-palette-neutral95:  #EEF1F6;
  --md-ref-palette-neutral96:  #F1F4F9;
  --md-ref-palette-neutral98:  #F6FAFE;
  --md-ref-palette-neutral100: #FFFFFF;

  --md-ref-palette-neutral-variant30: #41484D;
  --md-ref-palette-neutral-variant50: #71787E;
  --md-ref-palette-neutral-variant60: #8B9198;
  --md-ref-palette-neutral-variant70: #A5ACB2;

  /* Petroleo com o CROMA DELE (32,5), e nao o 6 do neutro: e a cor da
     casca no claro (§11.14). Gerada pelo mesmo MCU, semente #074866. */
  --md-ref-palette-petroleo20: #00344C;
  --md-ref-palette-petroleo25: #00405C;
  --md-ref-palette-petroleo35: #205776;
  --md-ref-palette-petroleo80: #9ACDF0;
  --md-ref-palette-petroleo90: #C7E7FF;
  --md-ref-palette-neutral-variant80: #C1C7CE;

  /* Paletas de estado que o MD3 nao traz de fabrica (custom colors). */
  --md-ref-palette-atencao20: #442B00;
  --md-ref-palette-atencao30: #624000;
  --md-ref-palette-atencao40: #815600;
  --md-ref-palette-atencao80: #FBBB58;
  --md-ref-palette-atencao90: #FFDDB1;

  --md-ref-palette-sucesso20: #023913;
  --md-ref-palette-sucesso30: #1E5027;
  --md-ref-palette-sucesso40: #37693D;
  --md-ref-palette-sucesso80: #9DD49E;
  --md-ref-palette-sucesso90: #B8F0B8;

  --md-ref-palette-info20: #032E67;
  --md-ref-palette-info30: #24467F;
  --md-ref-palette-info40: #3E5E98;
  --md-ref-palette-info80: #ADC6FF;
  --md-ref-palette-info90: #D8E2FF;

  /* Niveis de classificacao do IAF (PRD-02 §4.3). Uma paleta tonal por
     nivel, com o matiz da cor do BI e croma do MCU (`fromHueAndChroma`):
       abaixo    hue  27,4 chroma 84  (o vermelho #DE0000 do BI)
       bronze    hue  59,5 chroma 48  (#B76500)
       prata     hue 238,8 chroma  6  (o neutro do petroleo: prata e cinza)
       ouro      hue  79,3 chroma 48  (#E5A100)
       diamante  hue 230   chroma 60  (o ciano do BI, #00E5FF, nao passa de
                                       croma 0,09 em tom de grafico; azulado)
     Os tons alternam 45/60 entre faixas vizinhas do velocimetro: a
     diferenca de claridade separa o par vermelho/bronze, que o matiz
     sozinho nao separa para quem nao ve vermelho. */
  --md-ref-palette-nivel-abaixo45:   #CB2B1D;
  --md-ref-palette-nivel-bronze10:   #2E1500;
  --md-ref-palette-nivel-bronze60:   #CF7D2C;
  --md-ref-palette-nivel-prata45:    #676B6F;
  --md-ref-palette-nivel-ouro10:     #281900;
  --md-ref-palette-nivel-ouro60:     #BE8612;
  --md-ref-palette-nivel-diamante45: #007396;

  /* --- Tipografia de referencia (md.ref.typeface). O MD3 separa a
     fonte de EXPRESSAO (display, headline) da de LEITURA (title, body,
     label). A marca tem uma fonte so, e ela e auto-hospedada: ver o
     `@font-face` no fim do arquivo e a §11.4 das convencoes. */
  --md-ref-typeface-brand: "Montserrat", -apple-system, "Segoe UI", Roboto, sans-serif;
  --md-ref-typeface-plain: "Montserrat", -apple-system, "Segoe UI", Roboto, sans-serif;
  --md-ref-typeface-mono:  ui-monospace, "Cascadia Mono", "Consolas", monospace;

  /* ===================================================================
     2. SISTEMA — cor (esquema claro; o escuro esta no fim do arquivo)
     =================================================================== */

  /* Acao. Botao preenchido, link, indicador de aba, progresso. */
  --md-sys-color-primary:              var(--md-ref-palette-primary40);
  --md-sys-color-on-primary:           var(--md-ref-palette-primary100);
  --md-sys-color-primary-container:    var(--md-ref-palette-primary90);
  --md-sys-color-on-primary-container: var(--md-ref-palette-primary30);

  /* Estrutura e SELECAO. Item ativo da navegacao, botao tonal, chip
     marcado, badge de ligacao com fato, anel de foco. */
  --md-sys-color-secondary:              var(--md-ref-palette-secondary40);
  --md-sys-color-on-secondary:           var(--md-ref-palette-secondary100);
  --md-sys-color-secondary-container:    var(--md-ref-palette-secondary90);
  --md-sys-color-on-secondary-container: var(--md-ref-palette-secondary30);

  /* Acento complementar. Definido por completude do esquema; nenhum
     componente do console o consome hoje. */
  --md-sys-color-tertiary:              var(--md-ref-palette-tertiary40);
  --md-sys-color-on-tertiary:           var(--md-ref-palette-tertiary100);
  --md-sys-color-tertiary-container:    var(--md-ref-palette-tertiary90);
  --md-sys-color-on-tertiary-container: var(--md-ref-palette-tertiary30);

  --md-sys-color-error:              var(--md-ref-palette-error40);
  --md-sys-color-on-error:           var(--md-ref-palette-error100);
  --md-sys-color-error-container:    var(--md-ref-palette-error90);
  --md-sys-color-on-error-container: var(--md-ref-palette-error30);

  /* Superficies. Elevacao no MD3 e TOM, nao sombra: quanto mais alto o
     container, mais ele se afasta do fundo. Quem usa o que:
       surface ................. fundo da pagina
       surface-container ....... coluna de navegacao (drawer padrao)
       surface-container-lowest  painel de conteudo, card (branco)
       surface-container-low ... card elevado
       surface-container-high .. dialogo
       surface-container-highest campo de texto preenchido, arvore JSON */
  /* SO NO CLARO, desde 2026-09-28: fundo em N94 (era N98) e
     `surface-container` em N90 (era N94); a navegacao e a barra do topo
     sairam das superficies e usam a casca petroleo (`--casca-*`). No mapa padrao do MD3 o card branco sobre o fundo N98
     dava 1,05:1 — branco sobre quase-branco, "precisa forcar a vista"
     (relato do usuario). Com N94 fica 1,16:1. Sao tons da MESMA paleta
     gerada, nao hex a mao; todo par de texto seguiu >= 5:1 (script em
     [[tokens-md3-da-marca]]). Custo: `primary` sobre o hover da
     navegacao cai a 4,3:1 — la nao ha link nem botao de texto. */
  --md-sys-color-surface:                   var(--md-ref-palette-neutral94);
  --md-sys-color-on-surface:                var(--md-ref-palette-neutral10);
  --md-sys-color-on-surface-variant:        var(--md-ref-palette-neutral-variant30);
  --md-sys-color-surface-dim:               var(--md-ref-palette-neutral87);
  --md-sys-color-surface-bright:            var(--md-ref-palette-neutral98);
  --md-sys-color-surface-container-lowest:  var(--md-ref-palette-neutral100);
  --md-sys-color-surface-container-low:     var(--md-ref-palette-neutral96);
  --md-sys-color-surface-container:         var(--md-ref-palette-neutral90);
  --md-sys-color-surface-container-high:    var(--md-ref-palette-neutral92);
  --md-sys-color-surface-container-highest: var(--md-ref-palette-neutral90);
  --md-sys-color-surface-tint:              var(--md-ref-palette-primary40);

  /* `outline` e limite que INFORMA (borda de campo, >= 3:1);
     `outline-variant` e limite que so DELIMITA (divisor, borda de card).
     Nunca usar `outline` em divisor nem `outline-variant` em campo. */
  --md-sys-color-outline:         var(--md-ref-palette-neutral-variant50);
  /* NV70 no claro (era NV80): borda de card e divisor de 1,7 para 2,3:1
     sobre o branco. Continua so delimitando — borda de campo e `outline`. */
  --md-sys-color-outline-variant: var(--md-ref-palette-neutral-variant70);

  /* Inverso: o snackbar (toast) e o unico que vive aqui. */
  --md-sys-color-inverse-surface:    var(--md-ref-palette-neutral20);
  --md-sys-color-inverse-on-surface: var(--md-ref-palette-neutral95);
  --md-sys-color-inverse-primary:    var(--md-ref-palette-primary80);

  --md-sys-color-scrim:  var(--md-ref-palette-neutral0);
  --md-sys-color-shadow: var(--md-ref-palette-neutral0);
  /* O par de `inverse-surface` para o estado: e o que o icone do snackbar
     consome. Espelha `inverse-primary` — T80 no claro (fundo escuro), T40
     no escuro (fundo claro). Sem ele o icone ficaria num tom fixo da
     paleta de referencia e sumiria num dos dois esquemas (1,32:1). */
  --md-sys-color-inverse-error: var(--md-ref-palette-error80);

  /* --- Estados sem papel nativo no MD3 (custom colors), com os mesmos
     quatro papeis de `error`. Cada um e usado como TEXTO de 12px sobre o
     proprio container (o badge), entao os quatro pares precisam de
     4,5:1 — e tem 7,19 a 7,26:1. */
  --md-extended-color-atencao-color:              var(--md-ref-palette-atencao40);
  --md-extended-color-atencao-on-color:           var(--md-ref-palette-neutral100);
  --md-extended-color-atencao-color-container:    var(--md-ref-palette-atencao90);
  --md-extended-color-atencao-on-color-container: var(--md-ref-palette-atencao30);

  --md-extended-color-sucesso-color:              var(--md-ref-palette-sucesso40);
  --md-extended-color-sucesso-on-color:           var(--md-ref-palette-neutral100);
  --md-extended-color-sucesso-color-container:    var(--md-ref-palette-sucesso90);
  --md-extended-color-sucesso-on-color-container: var(--md-ref-palette-sucesso30);

  --md-extended-color-info-color:              var(--md-ref-palette-info40);
  --md-extended-color-info-on-color:           var(--md-ref-palette-neutral100);
  --md-extended-color-info-color-container:    var(--md-ref-palette-info90);
  --md-extended-color-info-on-color-container: var(--md-ref-palette-info30);

  --md-extended-color-atencao-inverse-color: var(--md-ref-palette-atencao80);
  --md-extended-color-sucesso-inverse-color: var(--md-ref-palette-sucesso80);

  /* --- Camadas de estado (state layers). Hover, foco e pressionado nao
     trocam a cor do componente: pintam `on-X` por cima de `X` com esta
     opacidade. Em CSS: `color-mix(in srgb, var(--on) 8%, var(--fundo))`. */
  --md-sys-state-hover-state-layer-opacity:   8%;
  --md-sys-state-focus-state-layer-opacity:   10%;
  --md-sys-state-pressed-state-layer-opacity: 10%;
  --md-sys-state-dragged-state-layer-opacity: 16%;
  /* Desabilitado: conteudo a 38%, container a 12% de on-surface. */
  --md-sys-state-disabled-content-opacity:   38%;
  --md-sys-state-disabled-container-opacity: 12%;

  /* ===================================================================
     2. SISTEMA — tipografia (md.sys.typescale)
     ===================================================================
     A escala do MD3, em rem (1rem = 16px, `html { font-size: 100% }`),
     com a Montserrat da marca no lugar da Roboto. Cada estilo tem os
     cinco eixos e um atalho para `font:`; o `tracking` vai em
     `letter-spacing` a parte, porque o atalho de `font` nao o carrega.

     Onde cada estilo entra (tabela "Component type usage" do MD3):
       headline-small .. titulo de dialogo
       title-large ..... titulo da pagina (h1) e da barra do topo
       title-medium .... h2, titulo de painel, titulo de card
       title-small ..... h3, rotulo de aba, cabecalho de tabela
       body-large ...... texto digitado num campo
       body-medium ..... texto corrente, celula de tabela, corpo de card
       body-small ...... texto de apoio, legenda, ajuda de campo
       label-large ..... rotulo de botao, chip e item de navegacao
       label-medium .... badge, selo, rotulo de campo, titulo de grupo
       label-small ..... so no titulo de grupo do menu lateral (11px, caixa
                         alta); fora dele o piso continua 12px (DA-22/DA-26).

     `emphasized-*-weight`: os pesos ENFATIZADOS da atualizacao
     Expressive, para estado ativo, titulo e botao principal. A marca
     pede 600 para titulo — e 600 e o que o Expressive da a title/label. */
  --md-sys-typescale-display-large-font: var(--md-ref-typeface-brand);
  --md-sys-typescale-display-large-weight: 400;
  --md-sys-typescale-display-large-size: 3.5625rem;
  --md-sys-typescale-display-large-line-height: 4rem;
  --md-sys-typescale-display-large-tracking: -0.015625rem;
  --md-sys-typescale-display-large: var(--md-sys-typescale-display-large-weight) var(--md-sys-typescale-display-large-size)/var(--md-sys-typescale-display-large-line-height) var(--md-sys-typescale-display-large-font);

  --md-sys-typescale-display-medium-font: var(--md-ref-typeface-brand);
  --md-sys-typescale-display-medium-weight: 400;
  --md-sys-typescale-display-medium-size: 2.8125rem;
  --md-sys-typescale-display-medium-line-height: 3.25rem;
  --md-sys-typescale-display-medium-tracking: 0;
  --md-sys-typescale-display-medium: var(--md-sys-typescale-display-medium-weight) var(--md-sys-typescale-display-medium-size)/var(--md-sys-typescale-display-medium-line-height) var(--md-sys-typescale-display-medium-font);

  --md-sys-typescale-display-small-font: var(--md-ref-typeface-brand);
  --md-sys-typescale-display-small-weight: 400;
  --md-sys-typescale-display-small-size: 2.25rem;
  --md-sys-typescale-display-small-line-height: 2.75rem;
  --md-sys-typescale-display-small-tracking: 0;
  --md-sys-typescale-display-small: var(--md-sys-typescale-display-small-weight) var(--md-sys-typescale-display-small-size)/var(--md-sys-typescale-display-small-line-height) var(--md-sys-typescale-display-small-font);

  --md-sys-typescale-headline-large-font: var(--md-ref-typeface-brand);
  --md-sys-typescale-headline-large-weight: 400;
  --md-sys-typescale-headline-large-size: 2rem;
  --md-sys-typescale-headline-large-line-height: 2.5rem;
  --md-sys-typescale-headline-large-tracking: 0;
  --md-sys-typescale-headline-large: var(--md-sys-typescale-headline-large-weight) var(--md-sys-typescale-headline-large-size)/var(--md-sys-typescale-headline-large-line-height) var(--md-sys-typescale-headline-large-font);

  --md-sys-typescale-headline-medium-font: var(--md-ref-typeface-brand);
  --md-sys-typescale-headline-medium-weight: 400;
  --md-sys-typescale-headline-medium-size: 1.75rem;
  --md-sys-typescale-headline-medium-line-height: 2.25rem;
  --md-sys-typescale-headline-medium-tracking: 0;
  --md-sys-typescale-headline-medium: var(--md-sys-typescale-headline-medium-weight) var(--md-sys-typescale-headline-medium-size)/var(--md-sys-typescale-headline-medium-line-height) var(--md-sys-typescale-headline-medium-font);

  --md-sys-typescale-headline-small-font: var(--md-ref-typeface-brand);
  --md-sys-typescale-headline-small-weight: 400;
  --md-sys-typescale-headline-small-size: 1.5rem;
  --md-sys-typescale-headline-small-line-height: 2rem;
  --md-sys-typescale-headline-small-tracking: 0;
  --md-sys-typescale-headline-small: var(--md-sys-typescale-headline-small-weight) var(--md-sys-typescale-headline-small-size)/var(--md-sys-typescale-headline-small-line-height) var(--md-sys-typescale-headline-small-font);

  --md-sys-typescale-title-large-font: var(--md-ref-typeface-plain);
  --md-sys-typescale-title-large-weight: 400;
  --md-sys-typescale-title-large-size: 1.375rem;
  --md-sys-typescale-title-large-line-height: 1.75rem;
  --md-sys-typescale-title-large-tracking: 0;
  --md-sys-typescale-title-large: var(--md-sys-typescale-title-large-weight) var(--md-sys-typescale-title-large-size)/var(--md-sys-typescale-title-large-line-height) var(--md-sys-typescale-title-large-font);

  --md-sys-typescale-title-medium-font: var(--md-ref-typeface-plain);
  --md-sys-typescale-title-medium-weight: 500;
  --md-sys-typescale-title-medium-size: 1rem;
  --md-sys-typescale-title-medium-line-height: 1.5rem;
  --md-sys-typescale-title-medium-tracking: 0.009375rem;
  --md-sys-typescale-title-medium: var(--md-sys-typescale-title-medium-weight) var(--md-sys-typescale-title-medium-size)/var(--md-sys-typescale-title-medium-line-height) var(--md-sys-typescale-title-medium-font);

  --md-sys-typescale-title-small-font: var(--md-ref-typeface-plain);
  --md-sys-typescale-title-small-weight: 500;
  --md-sys-typescale-title-small-size: 0.875rem;
  --md-sys-typescale-title-small-line-height: 1.25rem;
  --md-sys-typescale-title-small-tracking: 0.00625rem;
  --md-sys-typescale-title-small: var(--md-sys-typescale-title-small-weight) var(--md-sys-typescale-title-small-size)/var(--md-sys-typescale-title-small-line-height) var(--md-sys-typescale-title-small-font);

  --md-sys-typescale-body-large-font: var(--md-ref-typeface-plain);
  --md-sys-typescale-body-large-weight: 400;
  --md-sys-typescale-body-large-size: 1rem;
  --md-sys-typescale-body-large-line-height: 1.5rem;
  --md-sys-typescale-body-large-tracking: 0.03125rem;
  --md-sys-typescale-body-large: var(--md-sys-typescale-body-large-weight) var(--md-sys-typescale-body-large-size)/var(--md-sys-typescale-body-large-line-height) var(--md-sys-typescale-body-large-font);

  --md-sys-typescale-body-medium-font: var(--md-ref-typeface-plain);
  --md-sys-typescale-body-medium-weight: 400;
  --md-sys-typescale-body-medium-size: 0.875rem;
  --md-sys-typescale-body-medium-line-height: 1.25rem;
  --md-sys-typescale-body-medium-tracking: 0.015625rem;
  --md-sys-typescale-body-medium: var(--md-sys-typescale-body-medium-weight) var(--md-sys-typescale-body-medium-size)/var(--md-sys-typescale-body-medium-line-height) var(--md-sys-typescale-body-medium-font);

  --md-sys-typescale-body-small-font: var(--md-ref-typeface-plain);
  --md-sys-typescale-body-small-weight: 400;
  --md-sys-typescale-body-small-size: 0.75rem;
  --md-sys-typescale-body-small-line-height: 1rem;
  --md-sys-typescale-body-small-tracking: 0.025rem;
  --md-sys-typescale-body-small: var(--md-sys-typescale-body-small-weight) var(--md-sys-typescale-body-small-size)/var(--md-sys-typescale-body-small-line-height) var(--md-sys-typescale-body-small-font);

  --md-sys-typescale-label-large-font: var(--md-ref-typeface-plain);
  --md-sys-typescale-label-large-weight: 500;
  --md-sys-typescale-label-large-size: 0.875rem;
  --md-sys-typescale-label-large-line-height: 1.25rem;
  --md-sys-typescale-label-large-tracking: 0.00625rem;
  --md-sys-typescale-label-large: var(--md-sys-typescale-label-large-weight) var(--md-sys-typescale-label-large-size)/var(--md-sys-typescale-label-large-line-height) var(--md-sys-typescale-label-large-font);

  --md-sys-typescale-label-medium-font: var(--md-ref-typeface-plain);
  --md-sys-typescale-label-medium-weight: 500;
  --md-sys-typescale-label-medium-size: 0.75rem;
  --md-sys-typescale-label-medium-line-height: 1rem;
  --md-sys-typescale-label-medium-tracking: 0.03125rem;
  --md-sys-typescale-label-medium: var(--md-sys-typescale-label-medium-weight) var(--md-sys-typescale-label-medium-size)/var(--md-sys-typescale-label-medium-line-height) var(--md-sys-typescale-label-medium-font);

  --md-sys-typescale-label-small-font: var(--md-ref-typeface-plain);
  --md-sys-typescale-label-small-weight: 500;
  --md-sys-typescale-label-small-size: 0.6875rem;
  --md-sys-typescale-label-small-line-height: 1rem;
  --md-sys-typescale-label-small-tracking: 0.03125rem;
  --md-sys-typescale-label-small: var(--md-sys-typescale-label-small-weight) var(--md-sys-typescale-label-small-size)/var(--md-sys-typescale-label-small-line-height) var(--md-sys-typescale-label-small-font);

  /* Codigo e nome tecnico de tabela: a escala do MD3 nao tem estilo
     monoespacado, entao ele e composto UMA vez aqui — familia mono da
     camada de referencia, tamanho e altura de body-small — e consumido
     pelos quatro lugares que mostram nome de tabela ou JSON. */
  --md-sys-typescale-code-font: var(--md-ref-typeface-mono);
  --md-sys-typescale-code-weight: 400;
  --md-sys-typescale-code-size: var(--md-sys-typescale-body-small-size);
  --md-sys-typescale-code-line-height: var(--md-sys-typescale-body-small-line-height);
  --md-sys-typescale-code: var(--md-sys-typescale-code-weight) var(--md-sys-typescale-code-size)/var(--md-sys-typescale-code-line-height) var(--md-sys-typescale-code-font);

  --md-sys-typescale-emphasized-headline-small-weight: 600;
  --md-sys-typescale-emphasized-title-large-weight:    600;
  --md-sys-typescale-emphasized-title-medium-weight:   600;
  --md-sys-typescale-emphasized-title-small-weight:    600;
  --md-sys-typescale-emphasized-body-medium-weight:    500;
  --md-sys-typescale-emphasized-label-large-weight:    600;
  --md-sys-typescale-emphasized-label-medium-weight:   600;
  /* O numero do velocimetro (2026-10-11): display-small enfatizado. O Expressive
     define enfatizado para os 15 papeis; so os usados entram aqui. */
  --md-sys-typescale-emphasized-display-small-weight:  600;

  /* ===================================================================
     2. SISTEMA — forma (md.sys.shape)
     ===================================================================
     Quem usa o que (tabela "Component shape mapping" do MD3):
       full ........ botao, badge, pilula de perfil, indicador de item ativo
       extra-large . dialogo
       medium ...... card, painel, nota
       small ....... campo de texto, chip, menu
       extra-small . snackbar (toast), selo — o selo e caixa, nao pilula,
                     de proposito: ver §11.10 das convencoes. */
  --md-sys-shape-corner-none: 0px;
  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-large-increased: 20px;
  --md-sys-shape-corner-extra-large: 28px;
  --md-sys-shape-corner-extra-large-increased: 32px;
  --md-sys-shape-corner-extra-extra-large: 48px;
  --md-sys-shape-corner-full: 9999px;

  /* ===================================================================
     2. SISTEMA — elevacao (md.sys.elevation)
     ===================================================================
     Elevacao e TOM de superficie primeiro; sombra so onde o MD3 a preve:
       level1  card elevado
       level2  barra do topo depois de rolar, menu
       level3  dialogo
       level4  card elevado em hover */
  --md-sys-elevation-level0: none;
  --md-sys-elevation-level1: 0 1px 2px rgba(0, 0, 0, .3), 0 1px 3px 1px rgba(0, 0, 0, .15);
  --md-sys-elevation-level2: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 6px 2px rgba(0, 0, 0, .15);
  --md-sys-elevation-level3: 0 4px 8px 3px rgba(0, 0, 0, .15), 0 1px 3px rgba(0, 0, 0, .3);
  --md-sys-elevation-level4: 0 6px 10px 4px rgba(0, 0, 0, .15), 0 2px 3px rgba(0, 0, 0, .3);
  --md-sys-elevation-level5: 0 8px 12px 6px rgba(0, 0, 0, .15), 0 4px 4px rgba(0, 0, 0, .3);

  /* ===================================================================
     2. SISTEMA — movimento (md.sys.motion)
     ===================================================================
     O Material Web nao implementa a fisica de mola do Expressive; na web
     vale o sistema de easing + duracao, que o MD3 ainda usa para
     transicao. `standard` + `short2` (100ms) e a troca de cor de hover e
     foco (camada de estado); `standard` + `short4` (200ms) e o que se
     move ou muda de forma (seta que gira, card que sobe);
     `emphasized-decelerate` + `medium2/4` e "entrar na tela" (toast,
     dialogo) e `emphasized-accelerate` + `short4` e "sair".
     `prefers-reduced-motion` zera tudo em base.css. */
  --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
  --md-sys-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
  --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-standard-decelerate: cubic-bezier(0, 0, 0, 1);
  --md-sys-motion-easing-standard-accelerate: cubic-bezier(0.3, 0, 1, 1);
  --md-sys-motion-duration-short1: 50ms;
  --md-sys-motion-duration-short2: 100ms;
  --md-sys-motion-duration-short3: 150ms;
  --md-sys-motion-duration-short4: 200ms;
  --md-sys-motion-duration-medium1: 250ms;
  --md-sys-motion-duration-medium2: 300ms;
  --md-sys-motion-duration-medium3: 350ms;
  --md-sys-motion-duration-medium4: 400ms;
  --md-sys-motion-duration-long1: 450ms;
  --md-sys-motion-duration-long2: 500ms;

  /* ===================================================================
     3. ESCALAS DO CONSOLE (nao sao tokens do MD3; sao decisao daqui)
     =================================================================== */

  /* --- Espacamento: a grade de 4/8dp do MD3. Margem de layout 16
     (compacto) ou 24 (medio+); espaco entre componentes 8/12/16/24;
     entre secoes 24/32/48. Nada fora de multiplo de 4. */
  --e-1: 4px;  --e-2: 8px;  --e-3: 12px; --e-4: 16px;
  --e-5: 24px; --e-6: 32px; --e-7: 48px;

  /* --- Escala de controle (DA-22, revista na DA-26).
     UMA altura para botao, campo, select e sumario de divulgacao. O MD3
     tem cinco tamanhos de botao — 32 (XS), 40 (S), 48 (M), 56, 64 — e o
     console fica no XS: e o unico que cabe numa barra de ferramentas
     densa, e e o que o usuario aprovou em 2026-09-04 ("muito espacado").
     O campo de texto do MD3 nasce com 56px; aqui os espacos de cima e de
     baixo (`--md-outlined-field-top-space` / `-bottom-space`, tokens
     do Material Web) vao a 4px e o container fecha em 32px.
     Em `pointer: coarse` vira `--alvo-min`: o alvo minimo de toque do
     MD3 e 48dp — e o que muda em relacao a DA-22, que usava os 44 do
     Primer. */
  --ctrl-h:   32px;
  --alvo-min: 48px;

  /* --- Pontos de quebra: as classes de janela do MD3.
     Compacto < 600, medio 600-839, expandido 840-1199, grande 1200-1599,
     extra-grande 1600+. Custom property NAO funciona dentro de `@media`,
     entao os valores aparecem literais nas regras — mas so estes:
       600  telefone: margem de 16, dialogo em tela cheia, gutter de 8
            (a grade de cards vira coluna unica por LARGURA MINIMA do
            card, ~544px, nao por este degrau)
       840  a coluna de navegacao aparece (drawer padrao); abaixo, faixa
       1200 gutter da grade de cards passa a 24 */

  /* --- Cromo (DA-23). A barra do topo e a "small top app bar" do MD3,
     64dp. A coluna de navegacao fica em 232px — dentro da faixa da
     "wide navigation rail" do Expressive (220 a 360dp); o drawer padrao
     de 360 comeria 28% de um monitor de 1280 e o teto de leitura do
     conteudo nunca seria alcancado abaixo de 1690px de tela. */
  --largura-nav: 272px;  /* 232 ate 2026-09-28; o icone do item come 32px */
  --altura-topo: 64px;
  /* Teto de largura do conteudo. Sem ele, num monitor de 2560px a mesma
     tela vira seis campos numa linha so e uma tabela de tres colunas
     esticada de ponta a ponta: o olho percorre 2m de tela para ligar o
     rotulo ao valor. Medida de leitura, nao de estetica. O MD3 sugere
     840-1040 em janela grande; 1280 e a proporcao que o usuario reviu e
     manteve (DA-23) e continua sendo o botao para reabrir o assunto. */
  --largura-conteudo: 1280px;
  --largura-form: 920px;

  /* Cor de tras do campo de texto: o rotulo flutuante corta a borda com
     ela (§11.12). Declarada AQUI, e nunca no `.campo` — declaracao no
     proprio elemento vence heranca, e o `.modal` (que redefine) nunca
     chegaria ao rotulo. Quem muda de superficie redefine: `.modal`,
     `.busca-tela`. */
  --campo-fundo: var(--md-sys-color-surface-container-lowest);

  /* TERRACOTA DE PREENCHIMENTO — a terracota oficial do console, a do
     item ativo do menu (pedido do usuario, 2026-09-29; semente #C9583A desde 2026-10-11). No claro e T49:
     branco sobre ela da 4,64:1. Vale so para o que e FUNDO ou grafico
     (botao preenchido, avatar, indicador de aba, caixa marcada, girador,
     borda de foco — grafico precisa de 3:1 e passa com >= 3,7:1). Texto
     terracota continua em `primary` (T40): T49 como texto cairia a
     4,0:1 no fundo da pagina e 3,6:1 no dialogo. No escuro e `primary`. */
  --acao-fundo: var(--md-ref-palette-primary49);

  /* CASCA — barra do topo e navegacao (§11.14). No claro e o petroleo
     da marca, como no sistema irmao de metas; no escuro volta a ser
     superficie. Texto sobre ela: branco 11,1:1; variante (T90) 8,6:1;
     titulo de grupo (T80) 6,5:1; item ativo 7,8:1. O anel de foco
     `secondary` daria 1,7:1 aqui, por isso a casca tem o seu. */
  --casca-fundo:          var(--md-ref-palette-petroleo25);
  /* A logo IAF 360 (fundo branco) no claro; a versao de fundo escuro no escuro.
     O `?v=` muda a cada logo nova: svg fica 7 dias em cache (nginx.conf). */
  --marca-logo: url("../assets/marca/logo-iaf-colorida.svg?v=6");
  --marca-logo-login: url("../assets/marca/logo-iaf-colorida-login.svg?v=1");
  --casca-texto:          var(--md-ref-palette-neutral100);
  --casca-texto-variante: var(--md-ref-palette-petroleo90);
  --casca-titulo:         var(--md-ref-palette-petroleo80);
  --casca-ativo-fundo:    var(--acao-fundo);
  --casca-ativo-texto:    var(--md-ref-palette-neutral100);
  --casca-ativo-sombra:   var(--md-sys-elevation-level2);
  --casca-divisor:        var(--md-ref-palette-petroleo35);
  --casca-foco:           var(--md-ref-palette-petroleo80);

  /* CABECALHO (2026-10-03): a superficie mais clara do esquema — branco no
     claro, quase preto no escuro —, separada do conteudo pela sombra de
     nivel 2. A casca (petroleo) ficou so na barra lateral. */
  --topo-fundo: var(--md-sys-color-surface-container-lowest);

  /* MENU (lista suspensa de todo seletor e do combobox de PDV, painel do
     perfil): branco no claro, onde `surface-container` (N90) se lia como
     cinza "diferente" ao lado do menu nativo; no escuro, `surface-container`
     do MD3 — o branco do escuro (N4) ficaria abaixo do fundo da pagina. */
  --menu-fundo: var(--md-sys-color-surface-container-lowest);

  /* SELOS no claro: o estado bom e o de atencao ganham o container da cor
     inteiro (pedido de 2026-09-28). No escuro continuam caixinha discreta
     com so o icone colorido (§11.10). */
  --selo-ok-fundo:       var(--md-extended-color-sucesso-color-container);
  --selo-ok-texto:       var(--md-extended-color-sucesso-on-color-container);
  --selo-ok-borda:       var(--md-extended-color-sucesso-color);
  --selo-atencao-fundo:  var(--md-extended-color-atencao-color-container);
  --selo-atencao-texto:  var(--md-extended-color-atencao-on-color-container);
  --selo-atencao-borda:  var(--md-extended-color-atencao-color);

  /* Menu recolhido: so a coluna dos icones (§11.14). */
  --largura-nav-recolhida: 80px;

  /* NIVEL DO IAF — fundo (marca de grafico e fundo do selo de nivel) e
     texto sobre ele. OS MESMOS NOS DOIS ESQUEMAS, por medida, e por isso
     nao aparecem nos blocos do escuro (2026-10-01, WCAG 2.x):
       texto sobre fundo .................... 5,37 a 5,41:1 (>= 4,5)
       fundo sobre o painel claro (N100) .... 3,17 a 5,39:1 (>= 3, grafico)
       fundo sobre o painel escuro (N4) ..... 3,57 a 6,08:1 (>= 3, grafico)
     Grafico de nivel mora DENTRO de `.painel`: sobre o fundo da pagina
     do claro (N94) bronze e ouro caem a 2,73:1. Validador da skill
     dataviz: CVD vizinho >= 11,1 (deutan, abaixo x bronze), visao normal
     >= 15,7; so falha o croma da prata, que e cinza de proposito — o nome
     do nivel esta sempre escrito ao lado. Nivel sempre com icone e nome. */
  --iaf-nivel-abaixo-fundo:   var(--md-ref-palette-nivel-abaixo45);
  --iaf-nivel-abaixo-texto:   var(--md-ref-palette-neutral100);
  --iaf-nivel-bronze-fundo:   var(--md-ref-palette-nivel-bronze60);
  --iaf-nivel-bronze-texto:   var(--md-ref-palette-nivel-bronze10);
  --iaf-nivel-prata-fundo:    var(--md-ref-palette-nivel-prata45);
  --iaf-nivel-prata-texto:    var(--md-ref-palette-neutral100);
  --iaf-nivel-ouro-fundo:     var(--md-ref-palette-nivel-ouro60);
  --iaf-nivel-ouro-texto:     var(--md-ref-palette-nivel-ouro10);
  --iaf-nivel-diamante-fundo: var(--md-ref-palette-nivel-diamante45);
  --iaf-nivel-diamante-texto: var(--md-ref-palette-neutral100);

  /* BORDA DE BLOCO DE LEITURA (2026-10-11, decisao B' do usuario): todo
     bloco (`.painel`, `.card`, `.filtros`, `.grupo-pilar`...) e o card
     ELEVADO do MD3 — `surface-container-lowest` + nivel 1, sem borda no
     claro (transparente, para a caixa nao mudar de tamanho). No escuro a
     sombra some sobre N6, e o bloco ganha `outline-variant`: adaptacao
     registrada (DA-26 §4). */
  --bloco-borda: transparent;

  /* SERIES CATEGORICAS (linha do tempo por GVO/GRVO): EXCECAO DECLARADA a
     regra "tokens de cor sao gerados". Sao a paleta de referencia da skill
     dataviz, escolhida e validada (CVD, contraste de grafico) em
     superficies quase iguais as nossas, nao geradas pelo MCU. Oito cores
     em ordem FIXA, presas a entidade. O escuro tem os proprios tons, nas
     duas portas. Mudaram-se de componentes.css em 2026-10-11 (§11.0). */
  --iaf-cat-1: #2a78d6; --iaf-cat-2: #eb6834; --iaf-cat-3: #1baf7a; --iaf-cat-4: #eda100;
  --iaf-cat-5: #e87ba4; --iaf-cat-6: #008300; --iaf-cat-7: #6250d6; --iaf-cat-8: #e34948;
}

/* Ponteiro grosseiro (dedo): o controle de 32px vira 48px, o alvo
   minimo de toque do MD3. Uma linha aqui vale para todo controle que
   consome `--ctrl-h`. No mouse, 32px ja cobre os 24x24 CSS px da WCAG
   2.5.8 e o alvo de 48 continua garantido nos botoes de icone por
   pseudo-elemento (ver `.btn--linha`). */
@media (pointer: coarse) {
  :root { --ctrl-h: var(--alvo-min); }
}

/* =====================================================================
   Esquema ESCURO — e como a pessoa escolhe entre os dois
   =====================================================================
   Mesmas paletas, outros tons (mapa do MD3: acento em T80, on-acento em
   T20, container em T30, superficie em T6 a T22). Verificado com o mesmo
   script; menor par: outline sobre surface-container-highest, 3,89:1.

   O mapa aparece DUAS VEZES, de proposito, porque sao duas portas para
   ele e o CSS nao tem como reaproveitar um bloco de declaracoes:

     1. `@media (prefers-color-scheme: dark)` + `:not([data-tema="claro"])`
        — a preferencia do sistema operacional, que e o padrao e vale sem
        nenhum JavaScript rodar (nao ha piscada de tela clara);
     2. `[data-tema="escuro"]` — a escolha explicita, gravada no navegador
        e aplicada antes da primeira pintura pelo `<script>` do `<head>`.

   As duas listas sao IDENTICAS. Mexer numa sem mexer na outra e o erro
   que este comentario existe para evitar — e o verificador compara as
   duas (ver [[tokens-md3-da-marca]]).
   ===================================================================== */
@media (prefers-color-scheme: dark) {
  /* Sem escolha explicita, ou com a escolha "escuro": segue o sistema.
     Com `data-tema="claro"` a pessoa pediu claro, e o sistema nao manda. */
  :root:not([data-tema="claro"]) {

    --md-sys-color-primary:              var(--md-ref-palette-primary80);
    --md-sys-color-on-primary:           var(--md-ref-palette-primary20);
    --md-sys-color-primary-container:    var(--md-ref-palette-primary30);
    --md-sys-color-on-primary-container: var(--md-ref-palette-primary90);

    --md-sys-color-secondary:              var(--md-ref-palette-secondary80);
    --md-sys-color-on-secondary:           var(--md-ref-palette-secondary20);
    --md-sys-color-secondary-container:    var(--md-ref-palette-secondary30);
    --md-sys-color-on-secondary-container: var(--md-ref-palette-secondary90);

    --md-sys-color-tertiary:              var(--md-ref-palette-tertiary80);
    --md-sys-color-on-tertiary:           var(--md-ref-palette-tertiary20);
    --md-sys-color-tertiary-container:    var(--md-ref-palette-tertiary30);
    --md-sys-color-on-tertiary-container: var(--md-ref-palette-tertiary90);

    --md-sys-color-error:              var(--md-ref-palette-error80);
    --md-sys-color-on-error:           var(--md-ref-palette-error20);
    --md-sys-color-error-container:    var(--md-ref-palette-error30);
    --md-sys-color-on-error-container: var(--md-ref-palette-error90);

    --md-sys-color-surface:                   var(--md-ref-palette-neutral6);
    --md-sys-color-on-surface:                var(--md-ref-palette-neutral90);
    --md-sys-color-on-surface-variant:        var(--md-ref-palette-neutral-variant80);
    --md-sys-color-surface-dim:               var(--md-ref-palette-neutral6);
    --md-sys-color-surface-bright:            var(--md-ref-palette-neutral24);
    --md-sys-color-surface-container-lowest:  var(--md-ref-palette-neutral4);
    --md-sys-color-surface-container-low:     var(--md-ref-palette-neutral10);
    --md-sys-color-surface-container:         var(--md-ref-palette-neutral12);
    --md-sys-color-surface-container-high:    var(--md-ref-palette-neutral17);
    --md-sys-color-surface-container-highest: var(--md-ref-palette-neutral22);
    --md-sys-color-surface-tint:              var(--md-ref-palette-primary80);

    --md-sys-color-outline:         var(--md-ref-palette-neutral-variant60);
    --md-sys-color-outline-variant: var(--md-ref-palette-neutral-variant30);

    --md-sys-color-inverse-surface:    var(--md-ref-palette-neutral90);
    --md-sys-color-inverse-on-surface: var(--md-ref-palette-neutral20);
    --md-sys-color-inverse-primary:    var(--md-ref-palette-primary40);
    --md-sys-color-inverse-error:      var(--md-ref-palette-error40);
    --md-extended-color-atencao-inverse-color: var(--md-ref-palette-atencao40);
    --md-extended-color-sucesso-inverse-color: var(--md-ref-palette-sucesso40);

    --md-extended-color-atencao-color:              var(--md-ref-palette-atencao80);
    --md-extended-color-atencao-on-color:           var(--md-ref-palette-atencao20);
    --md-extended-color-atencao-color-container:    var(--md-ref-palette-atencao30);
    --md-extended-color-atencao-on-color-container: var(--md-ref-palette-atencao90);

    --md-extended-color-sucesso-color:              var(--md-ref-palette-sucesso80);
    --md-extended-color-sucesso-on-color:           var(--md-ref-palette-sucesso20);
    --md-extended-color-sucesso-color-container:    var(--md-ref-palette-sucesso30);
    --md-extended-color-sucesso-on-color-container: var(--md-ref-palette-sucesso90);

    --md-extended-color-info-color:              var(--md-ref-palette-info80);
    --md-extended-color-info-on-color:           var(--md-ref-palette-info20);
    --md-extended-color-info-color-container:    var(--md-ref-palette-info30);
    --md-extended-color-info-on-color-container: var(--md-ref-palette-info90);

    /* Casca no escuro: o tom do drawer (DA-26), um degrau acima do fundo. */
    --casca-fundo:          var(--md-sys-color-surface-container);
    --marca-logo: url("../assets/marca/logo-iaf-preta.svg?v=6");
    --marca-logo-login: url("../assets/marca/logo-iaf-preta-login.svg?v=1");
    --casca-texto:          var(--md-sys-color-on-surface);
    --casca-texto-variante: var(--md-sys-color-on-surface-variant);
    --casca-titulo:         var(--md-sys-color-on-surface-variant);
    --casca-ativo-fundo:    var(--md-sys-color-secondary-container);
    --casca-ativo-texto:    var(--md-sys-color-on-secondary-container);
    --casca-divisor:        var(--md-sys-color-outline-variant);
    --casca-foco:           var(--md-sys-color-secondary);
    --casca-ativo-sombra:   none;
    --acao-fundo:           var(--md-sys-color-primary);
    --selo-ok-fundo:       transparent;
    --selo-ok-texto:       var(--md-sys-color-on-surface-variant);
    --selo-ok-borda:       var(--md-sys-color-outline-variant);
    --selo-atencao-fundo:  transparent;
    --selo-atencao-texto:  var(--md-sys-color-on-surface-variant);
    --selo-atencao-borda:  var(--md-sys-color-outline-variant);
    --menu-fundo:          var(--md-sys-color-surface-container);
    --bloco-borda:         var(--md-sys-color-outline-variant);
    --iaf-cat-1: #3987e5; --iaf-cat-2: #d95926; --iaf-cat-3: #199e70; --iaf-cat-4: #c98500;
    --iaf-cat-5: #d55181; --iaf-cat-6: #008300; --iaf-cat-7: #9085e9; --iaf-cat-8: #e66767;
  }
}

/* A escolha explicita da pessoa. Mesmo mapa, sem media query. */
:root[data-tema="escuro"] {

  --md-sys-color-primary:              var(--md-ref-palette-primary80);
  --md-sys-color-on-primary:           var(--md-ref-palette-primary20);
  --md-sys-color-primary-container:    var(--md-ref-palette-primary30);
  --md-sys-color-on-primary-container: var(--md-ref-palette-primary90);

  --md-sys-color-secondary:              var(--md-ref-palette-secondary80);
  --md-sys-color-on-secondary:           var(--md-ref-palette-secondary20);
  --md-sys-color-secondary-container:    var(--md-ref-palette-secondary30);
  --md-sys-color-on-secondary-container: var(--md-ref-palette-secondary90);

  --md-sys-color-tertiary:              var(--md-ref-palette-tertiary80);
  --md-sys-color-on-tertiary:           var(--md-ref-palette-tertiary20);
  --md-sys-color-tertiary-container:    var(--md-ref-palette-tertiary30);
  --md-sys-color-on-tertiary-container: var(--md-ref-palette-tertiary90);

  --md-sys-color-error:              var(--md-ref-palette-error80);
  --md-sys-color-on-error:           var(--md-ref-palette-error20);
  --md-sys-color-error-container:    var(--md-ref-palette-error30);
  --md-sys-color-on-error-container: var(--md-ref-palette-error90);

  --md-sys-color-surface:                   var(--md-ref-palette-neutral6);
  --md-sys-color-on-surface:                var(--md-ref-palette-neutral90);
  --md-sys-color-on-surface-variant:        var(--md-ref-palette-neutral-variant80);
  --md-sys-color-surface-dim:               var(--md-ref-palette-neutral6);
  --md-sys-color-surface-bright:            var(--md-ref-palette-neutral24);
  --md-sys-color-surface-container-lowest:  var(--md-ref-palette-neutral4);
  --md-sys-color-surface-container-low:     var(--md-ref-palette-neutral10);
  --md-sys-color-surface-container:         var(--md-ref-palette-neutral12);
  --md-sys-color-surface-container-high:    var(--md-ref-palette-neutral17);
  --md-sys-color-surface-container-highest: var(--md-ref-palette-neutral22);
  --md-sys-color-surface-tint:              var(--md-ref-palette-primary80);

  --md-sys-color-outline:         var(--md-ref-palette-neutral-variant60);
  --md-sys-color-outline-variant: var(--md-ref-palette-neutral-variant30);

  --md-sys-color-inverse-surface:    var(--md-ref-palette-neutral90);
  --md-sys-color-inverse-on-surface: var(--md-ref-palette-neutral20);
  --md-sys-color-inverse-primary:    var(--md-ref-palette-primary40);
  --md-sys-color-inverse-error:      var(--md-ref-palette-error40);
  --md-extended-color-atencao-inverse-color: var(--md-ref-palette-atencao40);
  --md-extended-color-sucesso-inverse-color: var(--md-ref-palette-sucesso40);

  --md-extended-color-atencao-color:              var(--md-ref-palette-atencao80);
  --md-extended-color-atencao-on-color:           var(--md-ref-palette-atencao20);
  --md-extended-color-atencao-color-container:    var(--md-ref-palette-atencao30);
  --md-extended-color-atencao-on-color-container: var(--md-ref-palette-atencao90);

  --md-extended-color-sucesso-color:              var(--md-ref-palette-sucesso80);
  --md-extended-color-sucesso-on-color:           var(--md-ref-palette-sucesso20);
  --md-extended-color-sucesso-color-container:    var(--md-ref-palette-sucesso30);
  --md-extended-color-sucesso-on-color-container: var(--md-ref-palette-sucesso90);

  --md-extended-color-info-color:              var(--md-ref-palette-info80);
  --md-extended-color-info-on-color:           var(--md-ref-palette-info20);
  --md-extended-color-info-color-container:    var(--md-ref-palette-info30);
  --md-extended-color-info-on-color-container: var(--md-ref-palette-info90);

  /* Casca no escuro: o tom do drawer (DA-26), um degrau acima do fundo. */
  --casca-fundo:          var(--md-sys-color-surface-container);
  --marca-logo: url("../assets/marca/logo-iaf-preta.svg?v=6");
  --marca-logo-login: url("../assets/marca/logo-iaf-preta-login.svg?v=1");
  --casca-texto:          var(--md-sys-color-on-surface);
  --casca-texto-variante: var(--md-sys-color-on-surface-variant);
  --casca-titulo:         var(--md-sys-color-on-surface-variant);
  --casca-ativo-fundo:    var(--md-sys-color-secondary-container);
  --casca-ativo-texto:    var(--md-sys-color-on-secondary-container);
  --casca-divisor:        var(--md-sys-color-outline-variant);
  --casca-foco:           var(--md-sys-color-secondary);
  --casca-ativo-sombra:   none;
  --acao-fundo:           var(--md-sys-color-primary);
  --selo-ok-fundo:       transparent;
  --selo-ok-texto:       var(--md-sys-color-on-surface-variant);
  --selo-ok-borda:       var(--md-sys-color-outline-variant);
  --selo-atencao-fundo:  transparent;
  --selo-atencao-texto:  var(--md-sys-color-on-surface-variant);
  --selo-atencao-borda:  var(--md-sys-color-outline-variant);
  --menu-fundo:          var(--md-sys-color-surface-container);
  --bloco-borda:         var(--md-sys-color-outline-variant);
  --iaf-cat-1: #3987e5; --iaf-cat-2: #d95926; --iaf-cat-3: #199e70; --iaf-cat-4: #c98500;
  --iaf-cat-5: #d55181; --iaf-cat-6: #008300; --iaf-cat-7: #9085e9; --iaf-cat-8: #e66767;
}

/* Com um dos dois escolhido, o navegador para de decidir sozinho: o
   controle nativo e a barra de rolagem seguem a escolha, nao o SO. */
:root[data-tema="claro"]  { color-scheme: light; }
:root[data-tema="escuro"] { color-scheme: dark; }

/* =====================================================================
   Fonte da marca
   =====================================================================
   Montserrat do Google Fonts, porem AUTO-HOSPEDADA: o arquivo veio do
   `fonts.gstatic.com` e mora em frontend/public/assets/fonts/. O console roda em
   rede corporativa e o nginx serve tudo na mesma origem — depender do
   CDN do Google traria uma terceira origem para bloquear/liberar, uma
   consulta DNS externa no caminho critico de cada carga e uma tela sem
   identidade quando a saida para a internet cai. Pelo mesmo motivo nao
   ha fonte de icones (Material Symbols): os icones sao SVG inline ou
   mascara CSS, em `currentColor`.

   UM arquivo para os quatro pesos: o Google entrega Montserrat como
   FONTE VARIAVEL (tem `fvar`), entao 400, 500, 600 e 700 sao instancias
   do mesmo eixo `wght` — 37KB no total, contra ~100KB de quatro arquivos
   estaticos. Por isso `font-weight` aqui e um INTERVALO, nao um valor;
   escrever `font-weight: 400` faria o navegador sintetizar 500/600/700
   em negrito falso.

   Subset `latin` (U+0000-00FF e pontuacao): cobre o portugues inteiro,
   acentos e cedilha. Glifo fora dele cai no fallback, so aquele glifo.

   `font-display: swap`: o texto aparece na fonte de sistema e troca
   quando a Montserrat chega — texto invisivel por 3s (o `block` padrao)
   e pior do que uma troca de fonte visivel. */
@font-face {
  font-family: "Montserrat";
  src: url("../assets/fonts/montserrat-variable.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}