/* Tokens de design (specs/04-identidade-visual.md, seções 6 e 7). */
@font-face {
  font-family: 'Nunito';
  src: url('../assets/fonts/nunito-latin.woff2') format('woff2');
  font-weight: 200 1000;
  font-display: swap;
}
@font-face {
  font-family: 'Pixelify Sans';
  src: url('../assets/fonts/pixelify-sans-latin-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Pixelify Sans';
  src: url('../assets/fonts/pixelify-sans-latin-700.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Fredoka';
  src: url('../assets/fonts/fredoka-latin.woff2') format('woff2');
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  src: url('../assets/fonts/atkinson-hyperlegible-next-latin.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --papel: #F6F3EC;
  --papel-2: #ECE6DA;
  --linha: #D6CEBF;
  --tinta-suave: #5E5A68;
  --tinta: #2A2733;
  --branco: #FFFFFF;
  --ceu: #74C6F2;
  --mar: #2F8FD5;
  --folha: #6DBE4B;
  --folha-escura: #2F7D3A;
  --polvim: #FF7A63;
  --sol: #FFD23F;
  --sol-escuro: #E89B1C;
  --teal: #2EC4B6;
  --teal-escuro: #138A80;

  --bg: var(--papel);
  --surface: var(--branco);
  --text: var(--tinta);
  --text-muted: var(--tinta-suave);
  --border: var(--linha);
  --target: var(--sol);        /* exclusivo da dica/alvo */
  --action: var(--teal-escuro);
  --correct: var(--folha);
  --retry: #E4572E;            /* só o piscar da tecla errada */

  --font: 'Atkinson Hyperlegible Next', system-ui, sans-serif;   /* textos e letras-alvo */
  --font-pixel: 'Pixelify Sans', 'Nunito', system-ui, sans-serif;  /* legendas da história (estilo jogo) */
  --font-ui: 'Nunito', 'Atkinson Hyperlegible Next', system-ui, sans-serif;  /* títulos e botões */
  --lilas: #A38EFF;
  --lilas-escuro: #6550D6;
  --polvim-escuro: #D9483F;
  --shadow: 0 2px 0 rgba(42, 39, 51, 0.06), 0 8px 24px rgba(42, 39, 51, 0.08);
  --ring: 0 0 0 4px var(--papel), 0 0 0 8px var(--teal);
  --radius: 12px;
}