/* Paleta e tokens de tema — compartilhados por todos os HTMLs do projeto
   (app principal, arquivos de área, Classes, Nós e Amarras, Portal).
   Só existe aqui: mudar cor de tema é mudar um lugar só, não um por arquivo.

   TEMA "DESENHO" (2026-08-17): tirado da apresentação "Como ser um Instrutor
   de Sucesso" do usuário — céu azul vivo, morros verdes em camadas, amarelo de
   lenço, laranja, roxo e o vermelho do triângulo. Site claro e didático, pra
   adolescente ler no celular de dia.

   Duas famílias de token, de propósito:
   - --dsn-*  são as cores CHEIAS do desenho (céu, morro, lenço). Vão nas
     ilustrações e nos fundos de cartão. Não passam por contraste de texto.
   - as outras são a interface, e essas sim respeitam contraste.

   Tema único: o escuro foi removido a pedido do usuário.

   Os nomes ANTIGOS (--dourado, --papel, --tinta…) viraram apelidos que apontam
   pros novos — o comum.css inteiro já os referencia em centenas de lugares,
   então mantê-los evita uma troca em massa arriscada. */

@font-face{
  font-family:'Nunito';
  font-style:normal;
  font-weight:400 900;
  font-display:swap;
  src:url('assets/fontes/nunito.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'InterVar';
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url('assets/fontes/inter.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ------------------------------------------------- tema CLARO (o padrão) */
:root{
  /* --- cores cheias do desenho --- */
  --dsn-ceu:#12B5EC;
  --dsn-ceu-fundo:#EAF7FD;
  --dsn-lima:#A8C63F;
  --dsn-morro:#7FA835;
  --dsn-morro-esc:#5F8A2C;
  --dsn-amarelo:#FFD100;
  --dsn-laranja:#F5A04B;
  --dsn-roxo:#A4689F;
  --dsn-vermelho:#E8332A;
  --dsn-pele:#F7C9A4;

  /* --- interface: vermelho e amarelo do triângulo --- */
  --marca:#C22B21;          /* vermelho do emblema, fundo o bastante pra ler */
  --marca-viva:#E8332A;
  --marca-fundo:#FCEAE8;
  --brasa:#8A6100;          /* âmbar escuro: é o amarelo em versão legível */
  --brasa-viva:#FFD100;     /* o amarelo cheio, só em preenchimento */
  --sobre-brasa:#3A2A00;

  --fundo:#F4FBFE;
  --sup:#FFFFFF;
  --sup2:#E8F4FA;
  --linha:#D3E6F0;
  --texto:#14252E;
  --texto2:#3B5563;
  /* era #5E7A88 (contraste ~4,1:1 sobre branco, abaixo do mínimo de 4,5:1 pra
     texto normal — medido nas idades/contadores das classes). Escurecido
     mantendo o mesmo tom azul-acinzentado; ~6,6:1 sobre branco. */
  --suave:#46606E;
  --suave2:#90A8B4;

  --ok:#4C8A1E;
  --alerta:#C4331F;
  --roxo:#7E4A7A;
  --roxo-esc:#F3E9F2;
  --tecido:#4C8A1E;
  --tecido-borda:#376513;

  --brilho1:rgba(232,51,42,.07);
  --brilho2:rgba(255,209,0,.12);
  --realce:rgba(194,43,33,.06);
  --sombra:rgba(20,37,46,.14);

  --mcard-borda:#D9C4D7;
  --mcard-texto:#3A2038;
  --mcard-suave:#7E4A7A;
  --mcard-corpo:#4B3549;
  --chip:rgba(194,43,33,.08);
  --chip-borda:rgba(194,43,33,.22);
  --chip-texto:#8E1F17;
  --painel-bg:rgba(255,255,255,.95);
  --item-hover:rgba(232,51,42,.09);
  --anel-comprei:rgba(255,209,0,.75);
  --anel-quero:rgba(164,104,159,.75);

  /* --- apelidos usados pelo comum.css --- */
  --dourado:var(--marca);
  --dourado-esc:#8E1F17;
  --ouro-claro:#8E1F17;
  --sobre-ouro:#FFFFFF;
  --titulo-alto:#8E1F17;
  --papel:var(--sup);
  --papel-linha:var(--linha);
  --tinta:var(--texto);
  --tinta-fraca:var(--suave);
  --campo-bg:#FFFDF8;
  --nota-bg:#FFF6DC;

  /* cores temáticas das 6 classes regulares (Manual Administrativo, 4.1) */
  --cor-azul:#2C6B95; --cor-vermelho:#C0342A; --cor-verde:#4C8A1E;
  --cor-cinza:#5B6366; --cor-roxocl:#7E4A7A; --cor-amarelo:#9A7204;

  --display:"Nunito","Segoe UI Variable Display","Segoe UI",system-ui,sans-serif;
  --corpo:"InterVar","Segoe UI Variable Text","Segoe UI",system-ui,sans-serif;
  --ui:"InterVar","Segoe UI Variable Text","Segoe UI",system-ui,sans-serif;
  --mono:"Cascadia Mono",Consolas,"SF Mono",ui-monospace,monospace;

  --g:clamp(14px,2.2vw,26px);
  --raio-sm:10px;
  --raio:16px;
  --raio-lg:24px;
  --raio-pill:999px;
  --sombra-1:0 1px 3px rgba(20,37,46,.07);
  --sombra-2:0 10px 28px rgba(20,37,46,.13);
  --toque:44px;
}