/* =============================================================================
DESTINYTALE UI KIT v2 — TOKENS ui/mocks/_kit/tokens.css
Direção: "ouro sobre veludo negro" (ver ui/mocks/DIRECAO-V2.md). Site: destinytale.com.br
Alvo: RmlUi 6.1. Tudo aqui é RCSS válido, EXCETO o que está marcado [PORTE].
---------------------------------------------------------------------------
REGRAS DE PORTE (mock HTML -> RCSS). Mecânicas, sem decisão de design:
[P1] px do mock -> dp com o MESMO número (hairline de 1px pode ficar px).
[P2] background-image: linear-gradient/radial-gradient -> decorator: linear-gradient/radial-gradient (mesmos args).
background-image: url(x.png) [no-repeat] -> decorator: image(x.png contain|fill).
background-image: url(x.png) repeat -> decorator: image(x.png repeat).
[P3] Tween: ease-out -> cubic-out | ease-in-out -> sine-in-out | ease-in -> cubic-in | linear -> linear-in-out.
Nome de @keyframes é SEMPRE minúsculo.
[P4] Borda = border-width + border-color (border-style vem de mock-only.css, NÃO portado).
[P5] text-shadow -> font-effect: shadow(dx dy cor) | glow(raio cor). Nunca mover a cor pro texto.
[P6] Caixa alta escrita LITERAL no HTML (text-transform do RmlUi é ASCII-only).
[P7] Nada de var(), calc(), grid, ::before/::after, inset, box-shadow, filter, rgba() fracionário,
cores nomeadas, itálico. Cor = #RRGGBB ou #RRGGBBAA.
[P8] div já é display:block abaixo (no RmlUi div nasce inline).
[P9] Barra dirigida por dado = transform: scaleX() com transform-origin 0; o C++ interpola.
[P10] Animação em classe de ESTADO (.fx-xxx / .is-xxx), nunca na regra base.
[P11] ORNAMENTO EM PNG (novo na v2):
border-image: url(ornaments/x.png) T R B L fill / Tpx Rpx Bpx Lpx -> decorator: ninepatch(x-outer, x-inner)
com @spritesheet declarando x-outer = imagem inteira e x-inner = retângulo interno (imagem menos as fatias).
3 fatias horizontais (botão/aba, fatia vertical 0) -> decorator: tiled-horizontal(x-l, x-c, x-r).
Elemento .dt-corner / .dt-sigil / gema = ![]()
ou decorator: image(). Os PNGs vivem em _kit/ornaments/
e vão para Data\ui\ornaments\ no cliente. Tamanhos nominais no CSS (72, 36, 40 de borda...) = dp.
[P12] Hover que TROCA PNG (botão, aba, checkbox): mesma regra :hover com outro decorator. Sem transição de imagem.
---------------------------------------------------------------------------
PALETA FECHADA (v2 tem 1 tom por função — ver CRITICA-V1 §2.7)
Chão (veludo)
bg.void #070504 fundo absoluto / véu
bg.win #171110 -> #0d0908 -> #0a0705 gradiente da janela (topo levemente mais quente)
bg.panel #0f0b09 painel interno (rebaixo)
bg.raise #1a1411 superfície que sobe (linha hover, aba ativa)
bg.ink #080503 campo de input / trilho
Linha
line.0 #2a2119 divisória fraca
line.1 #3d3024 borda de campo
line.gold #8a6532 borda ouro apagada
line.goldhi #d4a24f80 borda ouro acesa (hover)
Ouro (metal)
gold #d4a24f ação, seleção, ícone ativo
gold.hi #f0cf85 luz do metal / hover
gold.deep #8a6532 sombra do metal
gold.glow #d4a24f66 halo (P5 glow)
Texto (creme)
ink #f3e9d8 principal
ink.hi #fbf3e4 título
ink.2 #b5a78f secundário
ink.3 #7d7261 terciário / rótulo apagado
ink.dis #514738 desabilitado
ink.onGold #2a201c texto sobre a chapa de ouro (medido no botão do site)
Estado (UM tom cada)
positive #58c46a valor que dá / sucesso / online (o verde #0af34b do site fica só para "LÍDER/PONTOS" do ranking: .c-value)
danger #d94a3d perigo / falta / erro
info #5aa0d6 informação / moeda "Minutos"
arcane #a878e0 evento ao vivo / boss
warning = gold (aviso é ouro, não amarelo)
Pódio
rank.1 #f0cf85 (ouro) rank.2 #d7dce3 (prata) rank.3 #e2a878 (bronze) — medalhas em ornaments/medal_N.png
Raridade (texto / moldura em ornaments/slot_.png / halo)
comum #cfc6b8 uncommon #5fbd6a rare #4b8fe0 epic #a86be0 legendary #f0932f mythic #ffd75a perfect #ff80ff
---------------------------------------------------------------------------
TIPOGRAFIA
display Spectral 700 40px ls 2 título de janela (t-h1) — 36 em janela <= 480 de largura
hero Spectral 700 32px ls 1 valor-herói (chance, timer, saldo, nível)
h2 Spectral 700 22px ls 1 título de área
section Spectral 700 13px ls 4 rótulo de seção (caixa alta literal)
eyebrow Spectral 600 13px ls 5 sobre-título em ouro
body Barlow 400/500 16px corpo
small Barlow 400 14px secundário
caption Barlow 600 13px ls 2 legenda/caixa alta
button Spectral 700 16px ls 2 (sm 14 ls 1 · lg 18 ls 3)
MÍNIMO: corpo/valor >= 14dp; rótulo/caixa alta/badge >= 13dp.
ESCALA (dp-ratio): dpRatio = max(H/1080, min(0.87, H/760)). Em 720p: 16dp = 13,9px; 13dp = 11,3px.
ESPAÇO grid 8: 4 8 12 16 24 32 40 janela: padding lateral 32, cabeçalho 96 (com sigilo), rodapé 72
RAIO 0 (o site é reto). O botão do site tem canto 4 e a aba canto 0 -- vem do PNG, não do CSS.
TEMPO rápido .12s | normal .18s | entrada .26s | pulso 1.6s | brilho 2.4s | varredura 2.8s
============================================================================= */
/* [P8] no RmlUi div nasce inline. */
div, p, section, header, footer, ul, li { display: block; }
* { box-sizing: border-box; }
p { margin: 0; }
img { display: inline-block; }
/* ---------------------------------------------------------------------------
FAMÍLIAS — trocar a fonte = trocar SÓ estas três linhas.
--------------------------------------------------------------------------- */
body, .ff-body { font-family: Barlow; }
.ff-title { font-family: Spectral; }
.ff-icon { font-family: "Font Awesome 6 Free"; font-weight: 900; }
body { font-size: 16px; font-weight: 400; color: #f3e9d8; line-height: 1.35; }
/* ---------------------------------------------------------------------------
TIPOGRAFIA
--------------------------------------------------------------------------- */
.t-eyebrow { font-family: Spectral; font-size: 13px; font-weight: 600; letter-spacing: 5px; color: #d4a24f; }
.t-h1 { font-family: Spectral; font-size: 40px; font-weight: 700; letter-spacing: 2px; color: #fbf3e4; line-height: 1.05; text-shadow: 0px 2px 0px #000000, 0px 0px 22px #d4a24f66; }
.t-h1-sm { font-size: 32px; }
.t-hero { font-family: Spectral; font-size: 32px; font-weight: 700; letter-spacing: 1px; color: #fbf3e4; line-height: 1; text-shadow: 0px 1px 0px #000000; }
.t-h2 { font-family: Spectral; font-size: 22px; font-weight: 700; letter-spacing: 1px; color: #fbf3e4; line-height: 1.15; }
.t-section { font-family: Spectral; font-size: 13px; font-weight: 700; letter-spacing: 4px; color: #d4a24f; }
.t-body { font-size: 16px; color: #f3e9d8; }
.t-small { font-size: 14px; color: #b5a78f; }
.t-caption { font-size: 13px; font-weight: 600; letter-spacing: 2px; color: #b5a78f; }
.t-num { font-weight: 600; }
.t-gold-num { font-family: Spectral; font-weight: 700; color: #f0cf85; }
/* cores de texto */
.c-ink { color: #f3e9d8; }
.c-ink2 { color: #b5a78f; }
.c-ink3 { color: #7d7261; }
.c-dis { color: #514738; }
.c-gold { color: #d4a24f; }
.c-goldl { color: #f0cf85; }
.c-value { color: #0af34b; }
.c-ok { color: #58c46a; }
.c-bad { color: #d94a3d; }
.c-warn { color: #d4a24f; }
.c-info { color: #5aa0d6; }
.c-arcane{ color: #a878e0; }
/* pódio */
.rank-1 { color: #f0cf85; }
.rank-2 { color: #d7dce3; }
.rank-3 { color: #e2a878; }
/* raridade — texto */
.rar-common { color: #cfc6b8; }
.rar-uncommon { color: #5fbd6a; }
.rar-rare { color: #4b8fe0; }
.rar-epic { color: #a86be0; }
.rar-legendary { color: #f0932f; }
.rar-mythic { color: #ffd75a; }
.rar-perfect { color: #ff80ff; }
/* ---------------------------------------------------------------------------
KEYFRAMES COMPARTILHADOS (minúsculos — armadilha do RmlUi)
--------------------------------------------------------------------------- */
@keyframes dtfadein { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes dtwindowin { 0% { opacity: 0; transform: translateY(14px) scale(0.985); } 100% { opacity: 1; transform: translateY(0px) scale(1); } }
@keyframes dtmodalin { 0% { opacity: 0; transform: scale(0.94); } 100% { opacity: 1; transform: scale(1); } }
@keyframes dtpulse { 0% { opacity: 0.35; } 50% { opacity: 1; } 100% { opacity: 0.35; } }
@keyframes dtglow { 0% { opacity: 0.45; } 50% { opacity: 1; } 100% { opacity: 0.45; } }
@keyframes dtspin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes dtsweep { 0% { transform: translateX(-120px); } 100% { transform: translateX(520px); } }
@keyframes dtping { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(2.6); opacity: 0; } }
@keyframes dtdrain { 0% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes dturgent { 0% { color: #d94a3d; } 50% { color: #ffb0a6; } 100% { color: #d94a3d; } }
@keyframes dtshimmer { 0% { transform: translateX(-60px); } 100% { transform: translateX(260px); } }
@keyframes dtrise { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: translateY(0px); } }