/* ==========================================================
   VARIÁVEIS
   Cores, fontes, tamanhos e espaçamentos do site inteiro.
   Para mudar a identidade visual, edite somente este arquivo.
   Tema: floresta de Arbadacarba com terra marrom, árvores verdes e destaques laranja.
   ========================================================== */

:root {
  /* ---------- Cores base ---------- */
  --color-bg: #3b2416;          /* terra / casca de árvore */
  --color-bg-alt: #2f1c10;      /* chão à sombra (mesma cor do chão do topo) */
  --color-surface: #5a3720;     /* painéis de madeira (cards, caixa de diálogo) */
  --color-surface-2: #704529;   /* madeira mais clara */
  --color-border: #7cb85a;      /* moldura verde-musgo (quebra o excesso de madeira) */

  --color-text: #fff4e6;        /* pergaminho */
  --color-text-muted: #f0d9bf;

  --color-gold: #ff9a3c;        /* laranja de abóbora: logo e botões */
  --color-gold-shadow: #b8561a;
  --color-on-gold: #2a160a;     /* texto sobre botões laranja */

  --color-lilac: #e6d6ff;       /* voz do Narrador (o lilás do robe do Nox) */
  --color-hero: #8fe07a;        /* verde dos Heróis para TEXTO (título do grupo) */
  --color-hero-frame: #1c701c;  /* verde das molduras dos Heróis e do Squad Dev */
  --color-green: #ffd08a;       /* âmbar: títulos pequenos e destaques (nome mantido por compatibilidade) */
  --color-danger: var(--magic);  /* cartazes de "procurado" da Tropa dos Arruaceiros */

  /* ---------- Magia (roxo): tudo o que interage com o usuário ---------- */
  --magic: #5b417a;             /* roxo principal: bordas e selos dos arruaceiros, purpurina, molduras */
  --magic-mid: #6d28d9;         /* roxo médio da purpurina */
  --magic-light: #a78bfa;       /* brilho (claro o bastante para aparecer sobre o marrom) */
  --magic-text: #c29aff;        /* roxo para TEXTO (o escuro não fica legível sobre a madeira) */

  --color-focus: #ffe0a3;       /* contorno de foco do teclado */

  /* Cabeçalho levemente transparente sobre a página */
  --color-header-bg: rgb(59 36 22 / 0.94);

  /* Logo com sombra de placa de madeira */
  --color-logo-shadow: #1e120a;

  /* Borda escura em volta da caixa de diálogo do topo */
  --panel-edge: #1e120a;

  /* Janela de código */
  --color-code-bg: #1e120a;
  --color-code-comment: #c9a88a;
  --color-code-gap: rgb(255 154 60 / 0.18);

  /* ---------- Cenário da floresta (seção do topo) ---------- */
  --sky-top: #6fb3e0;
  --sky-mid: #a9d6ee;
  --sky-horizon: #f6dcc0;       /* névoa quente de fim de tarde */
  --sun: #ffcf6b;
  --sun-core: #fff0c4;
  --cloud: #ffffff;
  --cloud-shade: #f3dccb;

  --hill: #b9c9d6;              /* colinas bem distantes, azuladas */
  --forest-far: #6dbf86;        /* árvores do fundo, mais claras */
  --leaf-light: #6fd25a;        /* lado da copa que pega sol */
  --leaf-shade: #2f8a3e;        /* lado da copa na sombra */
  --trunk: #5a3418;
  --grass: #7ddc5f;             /* linha de grama */
  --forest-near: var(--color-bg-alt);  /* chão: mesma cor da seção seguinte */
  --vine: #3e7d32;              /* caule das vinhas nas bordas das seções */

  --flower-pink: #ff9ad5;
  --flower-yellow: #ffb347;
  --flower-white: #ffffff;

  --mushroom-cap: #e8483f;
  --mushroom-spot: #ffffff;
  --mushroom-stem: #f6e7c8;

  /* ---------- Livro aberto (seção da missão), cores tiradas do sprite do jogo ---------- */
  --book-page: #ffcaa0;         /* página */
  --book-ink: #2d1211;          /* tinta, contornos e arabescos */
  --book-cover: #e1a477;        /* capa clara (borda em volta das páginas) */
  --book-cover-dark: #b46f4a;   /* capa escura (lombada e espessura das folhas) */
  --book-shadow: #4d2925;       /* sombra embaixo e à esquerda */
  --book-gold: #f3cf55;         /* cantoneiras douradas */

  /* ---------- Fontes ---------- */
  /* Macondo é a fonte das falas e do código dentro do jogo (o logo gótico fica só na imagem) */
  --font-pixel: "Macondo", Georgia, serif;   /* títulos, botões, menu e selos */
  --font-story: "Macondo", Georgia, serif;   /* livro da missão */
  --font-body: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-code: ui-monospace, "Cascadia Code", "Consolas", monospace;

  /* ---------- Tamanhos de texto ---------- */
  --text-sm: 0.9375rem;
  --text-base: 1.125rem;
  --text-lg: 1.25rem;

  --pixel-xs: 1rem;
  --pixel-sm: 1.125rem;
  --pixel-md: clamp(1.125rem, 2.6vw, 1.375rem);
  --pixel-lg: clamp(1.875rem, 5vw, 2.5rem);
  --pixel-xl: clamp(3rem, 10vw, 4.5rem);

  /* ---------- Galeria ---------- */
  --shot-frame: var(--color-hero-frame);

  /* ---------- Espaçamentos ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 6rem;

  /* ---------- Estrutura ---------- */
  --container: 70rem;
  --container-narrow: 46rem;
  --gutter: 1rem;               /* margem lateral no celular */
  --header-height: 4rem;

  /* "Pixel" usado nas bordas serrilhadas */
  --px: 4px;

  /* Altura da faixa de árvores no topo */
  --forest-height: 15rem;

  /* ---------- Movimento ---------- */
  --transition: 150ms steps(3);  /* transições em "passos", estilo retrô */
}