/* ==========================================================================
   PRIMO — tokens visuais (v7: grafite e ouro + camada editorial)
   Única fonte de verdade do visual. Toda cor, raio, sombra e medida nasce aqui.
   ========================================================================== */

:root {
  color-scheme: light;  /* tema claro é o único tema do produto */

  /* ── superfícies: grafite claro (identidade PRIMO) ─────────────────── */
  --papel: #f6f7f9;
  --papel-fundo: #edeff3;
  --superficie: #ffffff;
  --superficie-alta: #ffffff;
  --superficie-baixa: #eef1f5;

  /* ── ação: ouro PRIMO ──────────────────────────────────────────────── */
  --acao: #ffc800;
  --acao-clara: #ffdd55;
  --acao-degrau: #d9a400;
  --acao-escura: #b78a00;
  --acao-tinta: #1a1200;
  --acao-fundo: #fff6d6;

  /* compatibilidade com telas e scripts antigos */
  --amarelo: #ffc800;
  --amarelo-claro: #ffdd55;
  --amarelo-degrau: #d9a400;
  --amarelo-fundo: #fff6d6;
  --dourado: #ffc800;

  /* ── tinta ─────────────────────────────────────────────────────────── */
  --tinta: #10151b;
  --tinta-corpo: #2b333d;
  --tinta-suave: #6a7684;
  --tinta-fraca: #9aa5b1;
  --tinta-inversa: #ffffff;

  /* ── linhas ────────────────────────────────────────────────────────── */
  --borda: #e1e6ec;
  --borda-forte: #c9d2dc;
  --borda-controle: #9aa5b1;
  --trilho: #e9eef4;

  /* ── estados ───────────────────────────────────────────────────────── */
  --verde: #16c784;
  --verde-degrau: #0e9e68;
  --verde-fundo: #e6faf1;
  --verde-tinta: #0b7d52;
  --vermelho: #ff4d5e;
  --vermelho-degrau: #d93648;
  --vermelho-fundo: #ffe9eb;
  --vermelho-tinta: #c42b3c;
  --laranja: #ff8a00;
  --azul: #3d7bff;
  --azul-degrau: #2a5fd6;
  --roxo: #7c5cff;
  --mint: #16c784;

  /* balão do caminho: sempre grafite com texto branco */
  --balao-fundo: #10151b;
  --balao-tinta: #ffffff;

  /* ── sombras: camada suave + degrau curto (v6) ─────────────────────── */
  --sombra-1: 0 1px 2px rgba(16, 21, 27, 0.06);
  --sombra-2: 0 1px 2px rgba(16, 21, 27, 0.05), 0 12px 30px -18px rgba(16, 21, 27, 0.22);
  --sombra-grande: 0 2px 6px rgba(16, 21, 27, 0.06), 0 28px 60px -28px rgba(16, 21, 27, 0.28);
  --sombra-vidro: var(--sombra-2);
  --brilho-ouro: 0 8px 22px -10px rgba(255, 200, 0, 0.75);
  --sombra-flutua: 0 3px 8px rgba(16, 21, 27, 0.07), 0 34px 60px -34px rgba(16, 21, 27, 0.38);

  /* ── camada editorial (v7) ─────────────────────────────────────────── */
  --holofote: rgba(255, 200, 0, 0.16);

  /* ── raios ─────────────────────────────────────────────────────────── */
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* altura do degrau dos botões e nós (o "3D" do Duolingo) */
  --degrau: 4px;
  --degrau-no: 8px;

  /* ── espaços ───────────────────────────────────────────────────────── */
  --e1: 4px;
  --e2: 8px;
  --e3: 12px;
  --e4: 16px;
  --e5: 20px;
  --e6: 24px;
  --e7: 32px;
  --e8: 40px;
  --e9: 56px;
  --e10: 72px;

  /* ── movimento ─────────────────────────────────────────────────────── */
  --m-toque: 120ms cubic-bezier(0.2, 0.8, 0.3, 1);
  --m-firme: 220ms cubic-bezier(0.2, 0.8, 0.3, 1);
  --m-viva: 380ms cubic-bezier(0.16, 1, 0.3, 1);
  --m-festa: 700ms cubic-bezier(0.16, 1, 0.3, 1);
  --m-entrada: 420ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ── tipografia ────────────────────────────────────────────────────── */
  --fonte: "Nunito", ui-rounded, "Segoe UI", system-ui, -apple-system, sans-serif;
  --fonte-display: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;
  --fonte-serif: var(--fonte-display);

  --t-heroi: 40px;
  --t-titulo: 30px;
  --t-secao: 22px;
  --t-enunciado: 23px;
  --t-opcao: 17px;
  --t-corpo: 16.5px;
  --t-legenda: 14.5px;
  --t-etiqueta: 11.5px;

  --largura: 720px;
  --altura-nav: 72px;
  --altura-topo: 56px;
}

/* Tema escuro: é o das capturas de referência (fundo #131f24, cartão #202f36,
   linha #37464f). Mesmas cores de ação; só as superfícies e a tinta mudam. */
/* Contraste reforçado: linhas mais firmes, texto mais cheio. */
@media (prefers-contrast: more) {
  :root {
    --borda: #d0d0d0;
    --borda-forte: #afafaf;
    --tinta-suave: #4b4b4b;
    --tinta-fraca: #777777;
    --trilho: #d0d0d0;
  }
}

/* Tema dourado (compra na loja): a ação vira ouro puro. */
:root[data-tema="dourado"] {
  --acao: #f5b800;
  --acao-clara: #ffe873;
  --acao-degrau: #c08b00;
  --acao-escura: #96690a;
  --acao-fundo: #fff5cc;
}