/* Tema do portal: o único lugar com cores, fontes, raios, espaçamentos e sombras.
   Para a identidade visual nova, troque este arquivo e os logos em logos/.
   portal.css e componentes.css só usam var(--…); o teste "cores só no tema" confere isso. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* Rampa neutra 100 (mais escuro) -> 900 (mais claro). */
  --neutro-100: #0c0f1e;
  --neutro-200: #1f2233;
  --neutro-300: #383c4d;
  --neutro-400: #50556a;
  --neutro-500: #666b80;
  --neutro-600: #9a9eb2;
  --neutro-700: #c6c9d8;
  --neutro-800: #e2e5ee;
  --neutro-900: #f6f7fb;

  --bg: #eef0f4;
  --surface: #fafbfd;
  --ink: var(--neutro-100);
  --muted: var(--neutro-400);
  --muted-2: var(--neutro-500);
  --line: var(--neutro-800);
  --line-soft: #eef1f6;
  --line-strong: var(--neutro-700);
  --placeholder: var(--neutro-500);

  --sobre-escuro: #ffffff;
  --texto-sobre-escuro: #dfe6ec;
  --texto-sobre-escuro-2: #c3ccd4;
  --borda-sobre-escuro: #7b8792;
  --destaque-sobre-escuro: #7bd0be;
  --fundo-imagem: #e8edf1;
  --fundo-slide: #0d1115;
  --tom-escudo: #92501a;

  /* Véus translúcidos residuais (fundos claros sobre imagem/capa escura). --veu-03/12/90 não têm uso
     hoje (nenhum var(--veu-03|12|90) em portal.css/componentes.css): reservados para o tema escuro /
     escala completa, não removidos. */
  --veu-03: rgba(255, 255, 255, 0.03);
  --veu-06: rgba(255, 255, 255, 0.06);
  --veu-12: rgba(255, 255, 255, 0.12);
  --veu-60: rgba(255, 255, 255, 0.6);
  --veu-90: rgba(255, 255, 255, 0.9);

  /* Destaque do portal (azul do logo grupovibe): links, botões, estado ativo.
     Nunca é cor de empresa — ver as chaves de marca abaixo. -200/-400/-500 não têm uso hoje: reservados
     para o tema escuro / escala completa, não removidos. */
  --acento: #2323d8;
  --acento-100: #0e0e52;
  --acento-200: #15158a;
  --acento-300: #1d1dc4;
  --acento-400: #3a3ae6;
  --acento-500: #5151ee;
  --acento-600: #8989f5;
  --acento-700: #b7b7fa;
  --acento-800: #dcdcfd;
  --acento-900: #ececfe;

  /* Cores por empresa: chaves de conteudo/_config/marcas.yml.
     -forte: texto sobre fundo claro (--bg/--surface), >= 4,5:1 e dentro do gamut sRGB
     (as duas coisas conferidas em tema.test.ts — ver src/app/cor.ts).
     -neon: sobre a capa escura (tom vivo, decorativo — não é texto corrido, sem teste). */
  --vibe: oklch(0.526 0.095 180);
  --vibe-claro: oklch(0.795 0.129 180);
  --vibe-forte: oklch(0.5 0.085 180);
  --vibe-neon: oklch(0.8 0.1 180);

  --dnx: #a85b00;
  --dnx-claro: #f0a64b;
  --dnx-forte: oklch(0.54 0.12 59);
  --dnx-neon: oklch(0.84 0.12 62);

  --master: #00afef;
  /* -claro sem uso hoje (nenhum var(--master-claro); --vibe-claro/--dnx-claro têm uso, esta não):
     reservado para o tema escuro / escala completa, não removido. */
  --master-claro: oklch(0.73 0.139 233.8);
  --master-forte: oklch(0.5 0.095 234);
  --master-neon: oklch(0.8 0.1 234);

  --grupo: oklch(0.4 0.012 260);
  /* -claro sem uso hoje (mesmo caso de --master-claro acima): reservado para o tema escuro / escala
     completa, não removido. */
  --grupo-claro: oklch(0.74 0.012 260);
  --grupo-forte: oklch(0.53 0.01 260);
  --grupo-neon: oklch(0.82 0.02 260);

  /* Avatares redondos (iniciais) por pessoa (tela 5): 8 tons fixos, oklch(.87 .07 <hue>) — mesma
     fórmula do tema claro do protótipo (README, "Avatares"), com hues espalhados e escolhidos por
     caberem no gamut sRGB (src/app/avatar.ts:classeDoAvatar escolhe o índice por um hash do e-mail).
     Contraste com --ink conferido em PARES_DE_CONTRASTE (tema.test.ts): razão >= 12:1 nos 8, bem
     acima do mínimo de 4,5:1, porque L=.87 é bem claro. Nunca cor crua no markup — só a classe
     avatar-cor-N (componentes.css). */
  --avatar-1: oklch(0.87 0.07 0);
  --avatar-2: oklch(0.87 0.07 45);
  --avatar-3: oklch(0.87 0.07 90);
  --avatar-4: oklch(0.87 0.07 135);
  --avatar-5: oklch(0.87 0.07 180);
  --avatar-6: oklch(0.87 0.07 210);
  --avatar-7: oklch(0.87 0.07 240);
  --avatar-8: oklch(0.87 0.07 300);

  /* --accent é a cor da empresa da página (hoje aponta para --vibe); cada rota troca
     por --dnx/--master/--grupo conforme a empresa do conteúdo. Não confundir com --acento. */
  --accent: var(--vibe);
  --accent-soft: #e6f2ef;
  /* --accent-forte (tarefa 8, verificação): mesma cor de --accent, mas sempre a variante -forte
     (>= 4,5:1 sobre --bg/--surface). --accent sozinho não serve para texto corrido: em --dnx a razão
     fica em 4,42 e em --master (ciano #00AFEF) cai para 2,2 — abaixo do mínimo. Toda regra que pinta
     TEXTO com a cor da empresa (não borda/fundo, onde --accent continua certo) usa --accent-forte. */
  --accent-forte: var(--vibe-forte);

  /* Estados: sucesso, alerta (refazer) e atenção. -forte é o texto, >= 4,5:1 e dentro do gamut sRGB. */
  --ok: oklch(0.6 0.13 160);
  --ok-forte: oklch(0.5 0.105 160);
  --alerta: oklch(0.6 0.17 35);
  --alerta-forte: oklch(0.55 0.14 35);
  /* --atencao (sem -forte) ainda não pinta nada (nenhum componente usa o estado "atenção" hoje, só
     sucesso/alerta): reservado para o tema escuro / escala completa, não removido. --atencao-forte já
     é conferida em PARES_DE_CONTRASTE (abaixo), por isso continua nesta lista mesmo sem uso em CSS. */
  --atencao: oklch(0.6 0.14 75);
  --atencao-forte: oklch(0.52 0.105 75);
  /* Tinta clara de sucesso/alerta (tela 3, quiz): alternativa certa/errada, caixa da explicação e
     resposta errada no resultado. Texto em cima: --ink, --neutro-200 ou o -forte (tema.test.ts). */
  --ok-fundo: oklch(0.955 0.03 160);
  --alerta-fundo: oklch(0.96 0.018 35);

  /* Cores das personas dos playbooks atuais: personaColors do portal.js.
     -forte (tarefa 8, 2ª rodada): mesmo padrão das cores de empresa — .persona-role pinta TEXTO com
     ela, e --persona-1/--persona-3 (texto normal, <18px) ficavam abaixo de 4,5:1 sobre --bg (4,48 e
     4,42). --persona-3 é o mesmo tom de --dnx (#a85b00), então reaproveita --dnx-forte em vez de
     inventar um segundo "-forte" pra cor idêntica. --persona-2/--persona-4 já passavam (5,17 e 4,86
     sobre --bg) e mantêm o próprio tom. */
  --persona-1: #0e7c69;
  --persona-1-forte: #0d705f;
  --persona-2: #1c5fcc;
  --persona-2-forte: var(--persona-2);
  --persona-3: #a85b00;
  --persona-3-forte: var(--dnx-forte);
  --persona-4: #5c6a78;
  --persona-4-forte: var(--persona-4);

  --restrito-interno: #b42318;
  --restrito-avaliador: #9a6700;
  --restrito-avaliador-fundo: #fff8e5;

  --content: 1280px;
  /* Margem lateral do container: 32px no desktop, 16px no celular (redefinido em
     portal.css, @media (max-width: 760px)). */
  --margem-conteudo: 32px;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  /* Escala de tipos. */
  --fs-etiqueta: 0.75rem; /* 12px */
  --fs-meta: 0.8125rem; /* 13px */
  --fs-corpo: 0.9375rem; /* 15px */
  --fs-corpo-lg: 1rem; /* 16px */
  --fs-h3: 1.125rem; /* 18px */
  --fs-h2: 1.375rem; /* 22px */
  --fs-h2-lg: 1.75rem; /* 28px */
  --fs-h1: 2.125rem; /* 34px */
  --fs-h1-hero: 2.75rem; /* 44px, hero do pacote */

  /* Raios. */
  --raio-1: 4px;
  --raio-2: 8px;
  --raio-3: 14px;
  --raio-pilula: 999px;

  /* Espaçamentos. */
  --esp-1: 4px;
  --esp-2: 8px;
  --esp-3: 12px;
  --esp-4: 16px;
  --esp-5: 20px;
  --esp-6: 24px;
  --esp-7: 28px;
  --esp-8: 32px;
  --esp-9: 40px;

  /* Sombras. */
  --sombra-1: 0 0 0 1px #e0e3ec;
  --sombra-2: 0 0 0 1px #d2d6e2, 0 8px 24px rgba(16, 20, 60, 0.07);
  --sombra-3: 0 0 0 1px #c3c7d6, 0 18px 44px rgba(16, 20, 60, 0.12);

  color-scheme: light;
}