/* ==========================================================================
   JOGADIA · tokens de design (v1.0 · 23/10/2026)
   Modo claro por omissão; modo escuro por prefers-color-scheme OU pela classe
   .escuro no <html>. A classe .claro força o modo claro.
   Fontes (colocar no <head>):
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Lexend:wght@400;600;700&family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
   ========================================================================== */

:root {
  /* ---- Paleta da marca (fixa, igual nos dois modos) ---- */
  --marca-azul: #2A7DE1;  /* Azul JOGADIA. Cor principal da marca e da família Palavras */
  --marca-coral: #EB5A31;  /* Coral. O dado do logótipo e a família Memória */
  --marca-verde: #1E9A4B;  /* Verde fresco. Família Cultura geral */
  --marca-amarelo-sol: #F5B819;  /* Amarelo-sol. Ponto do i, destaques e fundos com texto escuro */
  --marca-dourado: #C08000;  /* Dourado. Família Números e lógica (gráficos sobre creme) */
  --marca-creme: #FBF6EC;  /* Fundo da página (modo claro) */
  --marca-tinta: #1F1C18;  /* Texto e «joga» do logótipo */
  --marca-noite: #15181E;  /* Fundo da página (modo escuro) */
  /* ---- Cores de apoio ---- */
  --apoio-azul-escuro: #1660C2;  /* Azul para texto, ligações e botão primário (claro) */
  --apoio-azul-claro: #5A9BEA;  /* Azul para texto e botão primário (escuro) */
  --apoio-verde-escuro: #13703C;  /* Sucesso (claro) */
  --apoio-verde-claro: #4CC27A;  /* Sucesso (escuro) */
  --apoio-coral-escuro: #B33A16;  /* Erro (claro) */
  --apoio-coral-claro: #FF8A6B;  /* Erro (escuro) */
  --apoio-dourado-escuro: #875A00;  /* Aviso (claro) */
  --apoio-pedra: #5E564B;  /* Texto secundário (claro) */
  --apoio-areia: #C9C0B0;  /* Texto secundário (escuro) */
  --apoio-branco: #FFFFFF;  /* Superfícies/cartões (claro) e texto sobre cor */
  --apoio-carvao: #1E232B;  /* Superfícies/cartões (escuro) */
  --apoio-linha: #E6DED0;  /* Linhas decorativas (claro) */
  --apoio-linha-escura: #2C323C;  /* Linhas decorativas (escuro) */
  --apoio-borda: #857C6D;  /* Contorno de campos e componentes (claro) */
  --apoio-borda-escura: #7D8594;  /* Contorno de campos e componentes (escuro) */
  --apoio-cinza-ausente: #6B6459;  /* Letra ausente na Palavra do Dia */
  --apoio-whatsapp: #0B6B53;  /* Botão Partilhar no WhatsApp */
  --apoio-facebook: #1552A8;  /* Botão Partilhar no Facebook */
  /* ---- Uma cor por jogo (igual nos dois modos: ≥3:1 com creme, com o fundo escuro e com o branco do ícone) ---- */
  --jogo-palavra: #2A7DE1;  /* Palavra do Dia · Palavras */
  --jogo-sopa: #0E86A8;  /* Sopa de Letras · Palavras */
  --jogo-cruzadas: #4C6EF0;  /* Mini Cruzadas · Palavras */
  --jogo-palavras-cruzadas: #6A5AD8;  /* Palavras Cruzadas · Palavras */
  --jogo-letras: #8A4FC8;  /* Letras Trocadas · Palavras */
  --jogo-sudoku: #C08000;  /* Sudoku · Números e lógica */
  --jogo-pares: #EB5A31;  /* Pares do Dia · Memória */
  --jogo-ditado: #D63E5C;  /* Ditado do Dia · Memória */
  --jogo-quiz: #1E9A4B;  /* Quiz do Dia · Cultura geral */
  --jogo-onde-fica: #0F8A6E;  /* Onde Fica? · Cultura geral */
  --jogo-antes-depois: #5B8C1E;  /* Antes ou Depois · Cultura geral */
  --jogo-mais-ou-menos: #2F8A8A;  /* Mais ou Menos · Cultura geral (23/10: ≥3:1 com creme 3,8, branco 4,1, fundo escuro 4,3) */

  /* ---- Tokens semânticos · modo claro ---- */
  --cor-fundo: #FBF6EC;
  --cor-superficie: #FFFFFF;
  --cor-superficie-2: #F3ECDF;
  --cor-linha: #E6DED0;
  --cor-borda: #857C6D;
  --cor-texto: #1F1C18;
  --cor-texto-2: #5E564B;
  --cor-primaria: #1660C2;
  --cor-primaria-hover: #124F9F;
  --cor-sobre-primaria: #FFFFFF;
  --cor-sucesso: #13703C;
  --cor-erro: #B33A16;
  --cor-aviso: #875A00;
  --cor-foco: #1660C2;
  --cor-destaque: #F5B819;
  --cor-logo-joga: #1F1C18;
  --cor-logo-dia: #1660C2;
  --cor-familia-palavras: #1660C2;
  --cor-familia-numeros: #875A00;
  --cor-familia-memoria: #B33A16;
  --cor-familia-cultura: #13703C;
  --estado-certa: #13703C;
  --estado-certa-texto: #FFFFFF;
  --estado-lugar: #F5B819;
  --estado-lugar-riscas: #E3A600;
  --estado-lugar-texto: #1F1C18;
  --estado-ausente: #6B6459;
  --estado-ausente-texto: #FFFFFF;
  --logo-joga: #1F1C18;
  --logo-dia: #1660C2;
  --logo-dado: #EB5A31;
  --logo-ponto-j: #1E9A4B;
  --logo-ponto-i: #F5B819;
  --sombra-1: 0 1px 2px rgb(31 28 24 / 0.08), 0 2px 8px rgb(31 28 24 / 0.06);
  --sombra-2: 0 6px 20px rgb(31 28 24 / 0.12);
  --celula-palavra: #DCEAFB;
  color-scheme: light;

  /* ---- Tipografia ---- */
  --fonte-titulos: "Lexend", "Atkinson Hyperlegible", system-ui, sans-serif;
  --fonte-texto: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-pequeno: 1rem;        /* 16 px · mínimo absoluto (legendas, «Publicidade», rodapé) */
  --fs-corpo: 1.125rem;      /* 18 px · texto corrente */
  --fs-corpo-grande: 1.25rem;/* 20 px · introduções, botões */
  --fs-h4: 1.25rem;          /* 20 px */
  --fs-h3: 1.375rem;         /* 22 px · nome do jogo no cartão */
  --fs-h2: 1.625rem;         /* 26 px */
  --fs-h1: clamp(2rem, 1.6rem + 1.6vw, 2.5rem);      /* 32 → 40 px */
  --fs-destaque: clamp(2.5rem, 2rem + 2vw, 3rem);    /* 40 → 48 px · resultado do jogo */
  --peso-texto: 400;
  --peso-titulo: 600;
  --peso-forte: 700;
  --lh-texto: 1.55;
  --lh-titulo: 1.2;
  --medida: 65ch;            /* comprimento máximo de linha */

  /* ---- Espaçamento (base 4 px) ---- */
  --e-1: 4px;  --e-2: 8px;  --e-3: 12px; --e-4: 16px;
  --e-5: 24px; --e-6: 32px; --e-7: 48px; --e-8: 64px;
  --margem-pagina: 16px;     /* 320–389 px; 20 px a partir de 390 px */
  --largura-max: 1080px;     /* grelha em computador */
  --largura-texto: 680px;    /* colunas de texto e jogos */
  --alvo-min: 48px;          /* altura/largura mínima de qualquer alvo tátil */

  /* ---- Raios ---- */
  --r-pequeno: 8px;  --r-botao: 12px;  --r-cartao: 16px;  --r-grande: 24px;  --r-pilula: 999px;

  /* ---- Movimento ---- */
  --t-rapida: 120ms;  --t-normal: 200ms;  --curva: cubic-bezier(0.2, 0.7, 0.3, 1);

  /* ---- Foco ---- */
  --foco-largura: 3px;  --foco-afastamento: 3px;
}

@media (min-width: 390px) { :root { --margem-pagina: 20px; } }
@media (min-width: 768px) { :root { --margem-pagina: 32px; } }

/* Modo escuro automático (exceto se o utilizador escolheu .claro) */
@media (prefers-color-scheme: dark) {
  :root:not(.claro) {
  --cor-fundo: #15181E;
  --cor-superficie: #1E232B;
  --cor-superficie-2: #262C36;
  --cor-linha: #2C323C;
  --cor-borda: #7D8594;
  --cor-texto: #F5EEDF;
  --cor-texto-2: #C9C0B0;
  --cor-primaria: #5A9BEA;
  --cor-primaria-hover: #7DB1F0;
  --cor-sobre-primaria: #15181E;
  --cor-sucesso: #4CC27A;
  --cor-erro: #FF8A6B;
  --cor-aviso: #F5B819;
  --cor-foco: #F5B819;
  --cor-destaque: #F5B819;
  --cor-logo-joga: #F5EEDF;
  --cor-logo-dia: #5A9BEA;
  --cor-familia-palavras: #5A9BEA;
  --cor-familia-numeros: #F5B819;
  --cor-familia-memoria: #FF8A6B;
  --cor-familia-cultura: #4CC27A;
  --estado-certa: #1E9A4B;
  --estado-certa-texto: #FFFFFF;
  --estado-lugar: #F5B819;
  --estado-lugar-riscas: #E3A600;
  --estado-lugar-texto: #1F1C18;
  --estado-ausente: #6B6459;
  --estado-ausente-texto: #FFFFFF;
  --logo-joga: #F5EEDF;
  --logo-dia: #5A9BEA;
  --logo-dado: #EB5A31;
  --logo-ponto-j: #1E9A4B;
  --logo-ponto-i: #F5B819;
  --sombra-1: 0 1px 2px rgb(0 0 0 / 0.40), 0 2px 8px rgb(0 0 0 / 0.30);
  --sombra-2: 0 6px 20px rgb(0 0 0 / 0.45);
  --celula-palavra: #23395A;
  color-scheme: dark;
  }
}
/* Modo escuro escolhido no comutador (ou numa zona da página com .escuro) */
:root.escuro, .escuro {
  --cor-fundo: #15181E;
  --cor-superficie: #1E232B;
  --cor-superficie-2: #262C36;
  --cor-linha: #2C323C;
  --cor-borda: #7D8594;
  --cor-texto: #F5EEDF;
  --cor-texto-2: #C9C0B0;
  --cor-primaria: #5A9BEA;
  --cor-primaria-hover: #7DB1F0;
  --cor-sobre-primaria: #15181E;
  --cor-sucesso: #4CC27A;
  --cor-erro: #FF8A6B;
  --cor-aviso: #F5B819;
  --cor-foco: #F5B819;
  --cor-destaque: #F5B819;
  --cor-logo-joga: #F5EEDF;
  --cor-logo-dia: #5A9BEA;
  --cor-familia-palavras: #5A9BEA;
  --cor-familia-numeros: #F5B819;
  --cor-familia-memoria: #FF8A6B;
  --cor-familia-cultura: #4CC27A;
  --estado-certa: #1E9A4B;
  --estado-certa-texto: #FFFFFF;
  --estado-lugar: #F5B819;
  --estado-lugar-riscas: #E3A600;
  --estado-lugar-texto: #1F1C18;
  --estado-ausente: #6B6459;
  --estado-ausente-texto: #FFFFFF;
  --logo-joga: #F5EEDF;
  --logo-dia: #5A9BEA;
  --logo-dado: #EB5A31;
  --logo-ponto-j: #1E9A4B;
  --logo-ponto-i: #F5B819;
  --sombra-1: 0 1px 2px rgb(0 0 0 / 0.40), 0 2px 8px rgb(0 0 0 / 0.30);
  --sombra-2: 0 6px 20px rgb(0 0 0 / 0.45);
  --celula-palavra: #23395A;
  color-scheme: dark;
}

/* Movimento reduzido: sem transições nem animações */
@media (prefers-reduced-motion: reduce) {
  :root { --t-rapida: 0ms; --t-normal: 0ms; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}