/* Tokens do design system "Cravou ESG" (nomes e valores exatos do DS). Prefixo --brand-.
   Tema claro em :root; escuro por data-theme="dark" ou, sem escolha salva, pelo aparelho. */

/* Fontes dentro do projeto (pasta fontes/, subconjunto latino, licença OFL), para abrir offline. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("fontes/inter-500.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("fontes/inter-600.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("fontes/inter-700.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 800; font-display: swap; src: url("fontes/inter-800.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("fontes/open-sans-400.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("fontes/open-sans-600.woff2") format("woff2"); }

:root {
  color-scheme: light;

  /* Marca (iguais nos dois temas) */
  --brand-verde-tech: #00c896;
  --brand-verde-profundo: #1a4d2e;
  --brand-verde-claro: #b8e5d2;

  /* Famílias */
  --brand-font-titulo: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --brand-font-texto: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Espaços */
  --brand-espaco-1: 4px;
  --brand-espaco-2: 8px;
  --brand-espaco-3: 12px;
  --brand-espaco-4: 16px;
  --brand-espaco-5: 20px;
  --brand-espaco-6: 24px;
  --brand-espaco-8: 32px;
  --brand-espaco-12: 48px;

  /* Raios */
  --brand-raio-sm: 8px;
  --brand-raio-md: 14px;
  --brand-raio-lg: 20px;
  --brand-raio-pilula: 999px;

  /* Tamanhos */
  --brand-alvo-toque: 48px;
  --brand-botao-altura: 56px;
  --brand-largura-max: 480px;

  /* Cores fixas (iguais nos dois temas) */
  --brand-acao: #00c896;
  --brand-sobre-acao: #062a1a;
  --brand-acerto: #00c896;
  --brand-sobre-acerto: #062a1a;

  /* Cores do tema claro */
  --brand-fundo: #f4f9f6;
  --brand-superficie: #ffffff;
  --brand-superficie-2: #e8f4ee;
  --brand-linha: #d5e6dd;
  --brand-linha-controle: #728a7e;
  --brand-tinta: #10261a;
  --brand-tinta-suave: #4b6457;
  --brand-destaque: #1a4d2e;
  --brand-acao-hover: #00b086;
  --brand-selecao: #e0f7ee;
  --brand-selecao-borda: #00936e;
  --brand-foco: #1a4d2e;
  --brand-pilar-e: #2e9a48;
  --brand-pilar-e-suave: #e1f3e5;
  --brand-pilar-e-texto: #1c6a30;
  --brand-pilar-s: #e0701b;
  --brand-pilar-s-suave: #fceadb;
  --brand-pilar-s-texto: #9a4706;
  --brand-pilar-g: #3352c4;
  --brand-pilar-g-suave: #e3e8fa;
  --brand-pilar-g-texto: #2a429f;
  --brand-acerto-borda: #0a8460;
  --brand-acerto-suave: #d9f6eb;
  --brand-acerto-texto: #0b5c40;
  --brand-erro: #b02a33;
  --brand-erro-suave: #fbe4e5;
  --brand-erro-texto: #8e1f27;
  --brand-dica: #e8b300;
  --brand-dica-suave: #fff4cc;
  --brand-dica-texto: #6b4e00;
  --brand-sombra-cartao: 0 1px 2px rgba(16,38,26,0.06), 0 6px 20px rgba(16,38,26,0.08);
  --brand-sombra-arraste: 0 10px 28px rgba(16,38,26,0.18);
}

/* Tema escuro escolhido no botão. Manter igual ao bloco do aparelho, logo abaixo. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --brand-fundo: #0c1712;
  --brand-superficie: #15241c;
  --brand-superficie-2: #1d3127;
  --brand-linha: #2a4436;
  --brand-linha-controle: #6a8a79;
  --brand-tinta: #e9f5ee;
  --brand-tinta-suave: #a3bdb0;
  --brand-destaque: #5fe3bc;
  --brand-acao-hover: #2bddae;
  --brand-selecao: #123a2c;
  --brand-selecao-borda: #00c896;
  --brand-foco: #7ff0cc;
  --brand-pilar-e: #5ccb70;
  --brand-pilar-e-suave: #183420;
  --brand-pilar-e-texto: #94e2a2;
  --brand-pilar-s: #ffa24d;
  --brand-pilar-s-suave: #3a2511;
  --brand-pilar-s-texto: #ffc48c;
  --brand-pilar-g: #8ea3f5;
  --brand-pilar-g-suave: #1d2546;
  --brand-pilar-g-texto: #b9c6fa;
  --brand-acerto-borda: #00c896;
  --brand-acerto-suave: #0f3a2b;
  --brand-acerto-texto: #7ff0cc;
  --brand-erro: #ff7a82;
  --brand-erro-suave: #3e1619;
  --brand-erro-texto: #ffb3b8;
  --brand-dica: #ffd24d;
  --brand-dica-suave: #382d08;
  --brand-dica-texto: #ffe08a;
  --brand-sombra-cartao: 0 1px 2px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.35);
  --brand-sombra-arraste: 0 10px 28px rgba(0,0,0,0.55);
}

/* Tema escuro do aparelho, quando o jogador não escolheu o claro. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --brand-fundo: #0c1712;
    --brand-superficie: #15241c;
    --brand-superficie-2: #1d3127;
    --brand-linha: #2a4436;
    --brand-linha-controle: #6a8a79;
    --brand-tinta: #e9f5ee;
    --brand-tinta-suave: #a3bdb0;
    --brand-destaque: #5fe3bc;
    --brand-acao-hover: #2bddae;
    --brand-selecao: #123a2c;
    --brand-selecao-borda: #00c896;
    --brand-foco: #7ff0cc;
    --brand-pilar-e: #5ccb70;
    --brand-pilar-e-suave: #183420;
    --brand-pilar-e-texto: #94e2a2;
    --brand-pilar-s: #ffa24d;
    --brand-pilar-s-suave: #3a2511;
    --brand-pilar-s-texto: #ffc48c;
    --brand-pilar-g: #8ea3f5;
    --brand-pilar-g-suave: #1d2546;
    --brand-pilar-g-texto: #b9c6fa;
    --brand-acerto-borda: #00c896;
    --brand-acerto-suave: #0f3a2b;
    --brand-acerto-texto: #7ff0cc;
    --brand-erro: #ff7a82;
    --brand-erro-suave: #3e1619;
    --brand-erro-texto: #ffb3b8;
    --brand-dica: #ffd24d;
    --brand-dica-suave: #382d08;
    --brand-dica-texto: #ffe08a;
    --brand-sombra-cartao: 0 1px 2px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.35);
    --brand-sombra-arraste: 0 10px 28px rgba(0,0,0,0.55);
  }
}