/* ============================================================
   FORJA LENDÁR[IA] · colors_and_type.css
   "O Códex da Forja" · Cosmologia Visual · Vol. II
   The low-level visual foundation: color + type tokens.
   Atmosphere: sombria, densa, ocultista. Never clean/flat/SaaS.
   ============================================================ */

/* The three sacred voices. Canonical families per the brief:
   Monumental = Archivo Black · Sagrada = Cinzel · Operacional = EB Garamond */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Cinzel:wght@400;500;600;700;800;900&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');

:root {
  /* ---- PALETA FORJADA · 4 cores de assinatura (herdadas) ---- */
  --preto:          #131109; /* Preto Forja · ferro bruto, bigorna */
  --bege:           #E8DCC4; /* Bege Pergaminho · cinzas, sabedoria antiga */
  --amarelo:        #F6C324; /* Amarelo Acid · fogo, faísca, visão */
  --vermelho-sinal: #E63946; /* Vermelho Sinal · alerta, perigo, sombra */

  /* ---- 6 cores de profundidade (apoio) ---- */
  --bronze:         #9A7D56; /* Bronze de Forja · ouro forjado, Lendário · subido de #8B6F47 (~4.0:1) p/ AA 4.9:1 sobre --preto */
  --bronze-claro:   #A88A5C; /* bronze iluminado, line-art */
  --brasa:          #8B0000; /* Vermelho Brasa · fogo interno da Forja */
  --pirita:         #1F3A2E; /* Verde Pirita · falso ouro, charlatão */
  --cinzas:         #4A453E; /* Cinza de Cinzas · têmpera, transição */
  --aco:            #2C3E50; /* Azul de Aço · aço temperado, Arquiteto */

  /* ---- Pretos estratificados (profundidade da Forja) ---- */
  --preto-2:        #1B1810;
  --preto-3:        #221E14;

  /* ---- Gradiente sagrado ---- */
  --ouro-revelado:  linear-gradient(135deg, #8B6F47, #F6C324); /* Lendário integrado */
  --linha-de-fogo:  linear-gradient(180deg, #F6C324, #E63946, #8B0000); /* matriz espelhada */

  /* ---- Foreground / texto (sobre Preto Forja) ---- */
  --fg1: #E8DCC4;                    /* texto pleno · pergaminho */
  --fg2: rgba(232,220,196,0.68);     /* texto secundário · lore, intro */
  --fg3: rgba(232,220,196,0.60);     /* texto terciário · legendas, notas · subido de 0.45 (~3.6:1) p/ AA 5.6:1 */
  --fg-bronze: #9A7D56;              /* metadados, kickers, itálicos · AA sobre --preto */
  --fg-amarelo: #F6C324;             /* ênfase sagrada, labels de seção */

  /* ---- Linhas / bordas ---- */
  --linha-bronze:   rgba(139,111,71,0.40);
  --linha-fraca:    rgba(139,111,71,0.18);

  /* ---- Tints de opacidade · extraídos dos rgba() repetidos no forja.css ---- */
  /* (linha-bronze/linha-fraca acima já cobrem bronze .40/.18) */
  --amarelo-05: rgba(246,195,36,0.05);
  --amarelo-07: rgba(246,195,36,0.07);
  --amarelo-08: rgba(246,195,36,0.08);
  --amarelo-10: rgba(246,195,36,0.10);
  --amarelo-12: rgba(246,195,36,0.12);
  --amarelo-30: rgba(246,195,36,0.30);
  --amarelo-35: rgba(246,195,36,0.35);
  --amarelo-40: rgba(246,195,36,0.40);
  --amarelo-45: rgba(246,195,36,0.45);
  --amarelo-50: rgba(246,195,36,0.50);
  --amarelo-55: rgba(246,195,36,0.55);
  --amarelo-60: rgba(246,195,36,0.60);
  --bronze-42:  rgba(139,111,71,0.42);
  --brasa-08:   rgba(139,0,0,0.08);
  --brasa-14:   rgba(139,0,0,0.14);
  --brasa-16:   rgba(139,0,0,0.16);
  --brasa-40:   rgba(139,0,0,0.40);

  /* ---- Voz tipográfica (famílias) ---- */
  --voz-monumental: 'Archivo Black', 'Arial Black', sans-serif; /* declarar */
  --voz-sagrada:    'Cinzel', 'Trajan Pro', serif;              /* invocar */
  --voz-operacional:'EB Garamond', Georgia, serif;              /* conduzir */

  /* ---- Ritmo de espaçamento (gravidade generosa, UNIFICADO) ---- */
  /* Tokens-mãe: todas as páginas leem destes · nunca hardcode espaçamento de seção. */
  /* Ritmo vertical aplicado via padding-block (lógico) p/ não colidir com o
     padding-inline dos contêineres. Gap entre seções = 2× --sec-pad-y. */
  --sec-pad-y: 94px;         /* padding vertical de seção narrativa (Códex, Componentes, Bestiário) */
  --sec-pad-y-dense: 62px;   /* seções de índice densas (Dicionário) */
  --sec-head-mb: 52px;       /* cabeçalho de seção → conteúdo */
  --divider-my: 0px;         /* divisor flutua no gap das seções (linha centrada) */
  --codex-max: 1160px;       /* largura de leitura */
  --codex-pad: 32px;
  /* aliases legados (mantidos para compat) */
  --espaco-secao: var(--sec-pad-y);
  --espaco-cabeca: var(--sec-head-mb);
}

/* ============================================================
   ESCALA TIPOGRÁFICA SEMÂNTICA
   ============================================================ */

/* Voz Monumental · títulos canônicos, manchetes, declarações */
.t-monumental, .h1 {
  font-family: var(--voz-monumental);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.92;
  color: var(--bege);
}
.h1   { font-size: clamp(44px, 9vw, 116px); }
.h2   { font-size: clamp(32px, 5vw, 60px); line-height: 1; color: var(--bege); }

/* Voz Sagrada · frases-âncora, nomes invocados, definições canônicas */
.t-sagrada, .h3, .h4 {
  font-family: var(--voz-sagrada);
  letter-spacing: 0.04em;
  color: var(--bege);
}
.h3   { font-size: clamp(20px, 2.6vw, 29px); line-height: 1.15; }
.h4   { font-size: 21px; line-height: 1.15; }

/* Voz Operacional · corpo, lore, explicação */
body, .t-operacional, .p {
  font-family: var(--voz-operacional);
  line-height: 1.7;
  color: var(--fg1);
}
.p        { font-size: 19px; color: var(--fg2); }
.p-lore   { font-size: 15px; color: var(--fg2); font-style: italic; }

/* Kicker / label de seção · Cinzel, tracking largo, amarelo */
.kicker {
  font-family: var(--voz-sagrada);
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--amarelo);
}

/* Metadado · Cinzel bronze, tracking largo */
.meta {
  font-family: var(--voz-sagrada);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--bronze);
}