/* Base visual das Ferramentas da Justa Pena.
 * Só a marca: tokens, reset e body. Veio do painel do lançamento (kit oficial
 * IEPP 0826) e foi podada de propósito: os componentes de dashboard ficaram
 * lá, porque este app não tem card de métrica nem aba. O que é deste app mora
 * em app.css, e o que é da marca mora aqui.
 */

:root {
  /* Camadas do fundo, da mais funda à mais alta */
  --canvas: #071423;
  --surface: #0E2239;
  --elevated: #132B47;
  --hover: #193653;

  /* Texto em três níveis, como na EA */
  --text-1: #F4F5F7;
  --text-2: #B8C5D5;
  --text-3: #8C9BB8;

  --border: rgba(127, 178, 217, 0.13);
  --border-forte: rgba(127, 178, 217, 0.27);

  /* Marca Justa Pena */
  --navy: #223367;
  --azul: #064F78;
  --azul-claro: #7FB2D9;

  /* Acento aplicado a TEXTO e a traço fino. No escuro é o azul-claro; no claro
   * é o azul cheio, porque o azul-claro sobre branco fica ilegível. */
  --acento: #7FB2D9;
  --linha-grade: rgba(127, 178, 217, 0.055);
  --onda: rgba(127, 178, 217, 0.3);
  --anel-trilho: rgba(127, 178, 217, 0.15);

  /* Semânticas */
  --ok: #52A38E;
  /* Aviso âmbar OPACO. Composto por opacidade ele não sobrevivia: medido,
   * 30% de âmbar sobre o navy do body dava #463D31, croma 9,0 contra 48,4 do
   * âmbar puro, e ΔE de 9,0 contra o cinza de mesma luminância. No claro era
   * pior: croma 3,8 e ΔE 3,8, ou seja, no limiar da percepção. Alerta cor de
   * papelão não lê como alerta. --aviso-traco é a cor cheia, usada no fio
   * lateral e no rótulo. */
  --aviso-fundo: #4A3A1E;
  --aviso-borda: rgba(214, 154, 82, 0.55);
  --aviso-traco: #D69A52;
  --aviso-rotulo: #E0AC6C;
  --erro: #D96E7E;

  --raio: 6px;
  --raio-g: 8px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --fonte-titulo: "Montserrat", system-ui, sans-serif;
  --fonte-corpo: "Nunito Sans", system-ui, sans-serif;
  --fonte-numero: "Montserrat", system-ui, sans-serif;

  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { background: var(--canvas); }

body {
  background: var(--canvas);
  color: var(--text-1);
  font-family: var(--fonte-corpo);
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}

/* Profundidade discreta, dentro da paleta do evento */
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: 360px;
  background: linear-gradient(180deg, rgba(6, 79, 120, 0.2), transparent 100%);
  pointer-events: none;
  z-index: 0;
}

/* ---------- tema claro ---------- */
:root[data-tema="claro"] {
  --canvas: #E9EFF5;
  --surface: #F9FBFD;
  --elevated: #FFFFFF;
  --hover: #DCE7F1;
  --text-1: #142B45;
  --text-2: #4E6075;
  --text-3: #5A6C82;
  --acento: #064F78;
  --linha-grade: rgba(34, 51, 103, 0.06);
  --onda: rgba(6, 79, 120, 0.16);
  --anel-trilho: rgba(34, 51, 103, 0.13);
  --border: rgba(34, 51, 103, 0.13);
  --border-forte: rgba(34, 51, 103, 0.28);
  --ok: #277863;
  --aviso-fundo: #FCEEDA;
  --aviso-borda: rgba(167, 101, 34, 0.5);
  --aviso-traco: #A76522;
  --aviso-rotulo: #8A5116;
  --erro: #B43E50;
  color-scheme: light;
}
:root[data-tema="claro"] body::before {
  background: linear-gradient(180deg, rgba(127, 178, 217, 0.23), transparent 100%);
}
/* profundidade no claro: card branco sobre canvas claro pede uma sombra leve.
 * Só as classes que ESTE app tem; a lista herdada do painel listava .bloco,
 * .ritmo, .insights e .card-camp, que aqui não existem. */
:root[data-tema="claro"] .cartao,
:root[data-tema="claro"] .resultado {
  box-shadow: 0 1px 2px rgba(20, 35, 80, 0.05);
}

/* botão de tema */
.btn-tema { min-width: 62px; padding: 9px 12px; line-height: 1; }
.btn-tema.flutua { position: fixed; top: 18px; right: 18px; z-index: 5; }

.pagina { position: relative; z-index: 1; max-width: 1320px; margin: 0 auto; padding: 0 28px 72px; }


/* ---------- marca ---------- */

/* A tela de login veio do painel e usa estas duas classes. Ficaram aqui, e não
 * em app.css, porque são identidade da marca: o logo oficial e a moldura que
 * centraliza a caixa de acesso. O resto dos componentes do painel foi podado.
 */
.centro { min-height: 100dvh; display: grid; place-items: center; padding: 24px; position: relative; z-index: 1; }

.logo-evento {
  display: block;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left center;
}

.logo-evento.logo-marca { background-image: url(/assets/img/logo.svg?v=1); }
.marca-topo .logo-evento.logo-marca { width: 236px; height: 68px; margin: 0 auto; background-position: center; }
:root[data-tema="claro"] .marca-topo .logo-evento.logo-marca { background-image: url(/assets/img/logo-navy.svg?v=1); }