/* Moboria: tokens. Fonte única de cor, fonte, espaço, tipo, camadas e movimento. Só tema escuro ("quadro de avisos da guilda").
   Nunca use valor cru (#hex, px de espaço) nos CSS das páginas: use estas variáveis. */

/* ---------- Fontes (self-hosted, latin; preload de Fraunces e Atkinson 400 vem do {{head}}) ---------- */
@font-face {
  font-family: "Fraunces";
  src: url("/fonts/fraunces-latin-wght.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("/fonts/atkinson-latin-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("/fonts/atkinson-latin-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Pixelify Sans";
  src: url("/fonts/pixelify-latin-wght.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
  /* só letras: a Pixelify confunde 2/8, 5/S, 7/1 e "!"/"I"; dígitos e pontuação caem na Atkinson (próxima da pilha) */
  unicode-range: U+0041-005A, U+0061-007A;
}
/* Reservas com a métrica ajustada: o texto não pula quando a fonte real chega. */
@font-face {
  font-family: "Fraunces Fallback";
  src: local("Georgia"), local("Times New Roman");
  size-adjust: 115.7%; ascent-override: 84.5%; descent-override: 22%; line-gap-override: 0%;
}
@font-face {
  font-family: "Atkinson Fallback";
  src: local("Arial"), local("Helvetica");
  size-adjust: 99.8%; ascent-override: 95.2%; descent-override: 29.1%; line-gap-override: 0%;
}

:root {
  color-scheme: dark;

  /* ---------- Paleta (decidida no plano do site) ---------- */
  --base: #14110E;        /* fundo da página */
  --panel: #1E1914;       /* painéis, cartões */
  --raised: #2A231B;      /* elevado: chips, cabeçalho de tabela, hover */
  --line: #3D3326;        /* bordas finas (decorativas) */
  --text: #F1E8D6;
  --muted: #B3A68F;       /* texto secundário: 7,7:1 no --base, 6,4:1 no --raised */
  --gold: #FFD37A;        /* SÓ botões, ponto "live", anel de foco e bordas finas */
  --gold-press: #E6B85A;
  --gold-hi: #FFDF9F;     /* hover do botão ouro */
  --gold-deep: #A87F2B;   /* a "borda de baixo" dura do botão ouro */
  --hp: #C2473F;          /* vida baixa (preenchimento; texto vermelho use --hp-ink) */
  --hp-ok: #6DAA5B;       /* vida cheia */
  --live: #5BE37D;        /* ponto "ao vivo" */
  --hp-low: var(--hp);    /* o mesmo vermelho, com outro nome: dentro de .meter o --hp vira a porcentagem */
  --hp-mid: #D0963B;      /* vida entre 25% e 50% (âmbar, entre o verde e o vermelho) */
  --raised-hi: #352C21;   /* hover sobre --raised */

  /* derivadas */
  --on-gold: var(--base);               /* texto sobre ouro: 12:1 */
  --line-strong: #7A6A4F;               /* borda de controle interativo (>= 3:1 no --base) */
  --hp-ink: #E8786F;                    /* texto/ícone em vermelho (>= 4,5:1 no --panel) */
  --scrim: rgb(20 17 14 / .72);         /* --base translúcido, para texto sobre arte */
  --focus: var(--gold);

  /* ---------- Cores de classe (amostradas dos retratos de server/public/img/heroes/<id>.webp) ----------
     --c-<id>: borda/aro do cartão (>= 3:1 no --panel).  --c-<id>-ink: a mesma cor clareada p/ TEXTO (>= 4,5:1 no --panel e no --raised). */
  --c-barbarian: #D1532F;   --c-barbarian-ink: #D76B4C;
  --c-cleric: #DDA23C;      --c-cleric-ink: #DDA23C;
  --c-necromancer: #A9B53C; --c-necromancer-ink: #A9B53C;
  --c-ranger: #4E9A57;      --c-ranger-ink: #509D59;
  --c-druid: #31A8A8;       --c-druid-ink: #31A8A8;
  --c-knight: #5B83D6;      --c-knight-ink: #6389D8;
  --c-rogue: #7A62DA;       --c-rogue-ink: #927FE1;
  --c-sorcerer: #C04BC9;    --c-sorcerer-ink: #C863D0;

  /* ---------- Espaço (4/8/12/16/24/32/48/72) ---------- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 72px;
  --gutter: 16px;                       /* margem lateral; sobe para 32px a partir de 900px (base.css) */
  --container: 1120px;
  --measure: 68ch;                      /* largura de leitura (.prose) */

  /* ---------- Forma ---------- */
  --radius: 2px;
  --border: 2px;                        /* moldura pixel: 2px sólidos + raio de 2px (components.css) */

  /* ---------- Tipo ---------- */
  --font-display: "Fraunces", "Fraunces Fallback", Georgia, "Times New Roman", serif;
  --font-body: "Atkinson Hyperlegible", "Atkinson Fallback", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-px: "Pixelify Sans", var(--font-body);  /* rótulos pixel (só letras; ver @font-face): HP, LV, estágio */
  --font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;  /* comandos e código: legíveis e digitáveis */

  --text-xs: .8125rem;                                          /* 13px */
  --text-sm: .9375rem;                                          /* 15px */
  --text-base: 1.0625rem;                                       /* 17px */
  --text-lg: clamp(1.1875rem, 1.12rem + .35vw, 1.375rem);
  --text-xl: clamp(1.375rem, 1.2rem + .85vw, 1.75rem);
  --text-2xl: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
  --text-3xl: clamp(2.125rem, 1.6rem + 2.4vw, 3.5rem);
  --text-4xl: clamp(2.375rem, 1.7rem + 3.4vw, 4.5rem);          /* título do hero */
  --lh-tight: 1.1;  --lh-snug: 1.25;  --lh-body: 1.6;

  /* ---------- Camadas ---------- */
  --z-base: 0;  --z-raised: 10;  --z-header: 100;  --z-overlay: 200;  --z-skip: 1000;

  /* ---------- Movimento (só CSS; tudo some com prefers-reduced-motion, ver base.css) ---------- */
  --dur-fast: 120ms;  --dur: 200ms;  --dur-slow: 360ms;
  --ease: cubic-bezier(.2, .7, .2, 1);
}