/* TraderMap — reset e elementos base (Documento 09).
   Depende de tokens.css (carregar antes). Componentes reutilizaveis ficam
   em components.css; chrome de pagina (topbar/nav) em layout.css. */

* {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.5;
}

h1, h2, h3 {
    font-family: var(--font-heading);
    font-weight: 600;
    margin: 0 0 var(--space-1);
    color: var(--color-text);
}

/* Ajuste visual pos-passo-14 (pedido do usuario): titulo de pagina (h1, ver
   .tm-page-header em layout.css) ganha a fonte serifada de destaque da
   identidade da marca — h2/h3 (titulo de secao dentro de um .tm-card)
   continuam em --font-heading (Lora), sao um nivel abaixo de "titulo de
   pagina" e nao devem competir em peso visual. DM Serif Display so' tem
   peso 400 (nao existe 600) — sem font-weight aqui pra nao forcar um
   "faux bold" sintetico pelo navegador. */
h1 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 28px;
}

h2 { font-size: 22px; }
h3 { font-size: 18px; }

p {
    color: var(--color-text);
}

a {
    color: var(--color-accent);
}

/* Centralizacao do icone (Documento 09, secao 7). Bug real corrigido: essa
   regra vivia so em layout.css, que as telas de autenticacao (auth.css) nao
   carregam — sem "display:block" no svg, o navegador reserva o espaco de
   descendente de uma linha de texto embaixo dele (comportamento padrao de
   elemento inline), deslocando o desenho pra cima dentro de qualquer moldura
   circular/quadrada (ex: .tm-stat-card-icon, .tm-auth-benefit-icon). Fica em
   base.css (carregado em toda pagina, autenticada ou nao) para nao repetir
   esse bug em telas futuras que nao usem o shell principal. */
.tm-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tm-icon svg {
    width: 20px;
    height: 20px;
    display: block;
}

/* Bandeira de pais (x-tm-bandeira, SVG proprio — Dashboard, calendario
   economico). Borda sutil + cantos levemente arredondados: sem isso, uma
   bandeira de fundo claro (ex: Japao, branco) quase some contra o fundo
   claro do tema — mesma logica de qualquer chip pequeno sobre superficie
   proxima da mesma cor. */
.tm-bandeira {
    display: inline-block;
    border-radius: 2px;
    border: 1px solid var(--color-border);
}

/* Documento 09, 3.3 — dados numericos (precos, quantidades, resultados)
   sempre com digitos de largura fixa, para colunas alinhadas. Alinhamento a
   direita fica em components.css, escopado a .tm-table (este .tm-num
   tambem e usado fora de tabela, ex: valores de destaque em cards).
   Ajuste visual pos-passo-14 (pedido do usuario): fonte monoespacada
   (JetBrains Mono ja' e' tabular por natureza — font-variant-numeric fica
   so' de garantia, caso o fallback do font-family precise dele).
   ":not(:where(th))" de proposito: .tm-num tambem e' usado em ~22 telas em
   "<th class="tm-num">" so' pra alinhar o rotulo do cabecalho com a coluna
   de numero embaixo (Documento 09) — o texto do cabecalho ("Resultado",
   "Preço") e' rotulo, nao numero, nao deveria virar monoespacado. O
   ":where()" em volta do "th" e' necessario pra especificidade do seletor
   nao subir (:not() normalmente herda a especificidade do argumento) —
   sem isso este seletor passava a ganhar de .tm-stat-value logo abaixo
   (mesma especificidade + depois no arquivo venceria por cascata, mas
   ":not(th)" sozinho tem 1 classe + 1 elemento, mais especifico que as 0
   classes do .tm-stat-value sozinho) — bug real pego nesta sessao: todo
   numero "hero" (Resultado do mes, Saldo total) renderizava em mono em vez
   da fonte serifada esperada. */
.tm-num:not(:where(th)) {
    font-family: var(--font-mono);
}

.tm-num {
    font-variant-numeric: tabular-nums;
}

/* Documento 09, 3.2 — "Dado numerico grande (cards de resumo)": 26px/500.
   Combinar com .tm-num para o tabular-nums (ex: class="tm-num tm-stat-value").
   Ajuste visual pos-passo-14: valor "hero" de card de KPI ganha a fonte
   serifada de destaque (nao a monoespacada de .tm-num) — e' o mesmo
   tratamento de "numero grande" pedido pro resultado do mes/nota
   comportamental, entao .tm-stat-value sobrescreve font-family de volta pra
   --font-display mesmo quando combinada com .tm-num (ordem das classes no
   HTML nao importa: a regra mais especifica pro peso "hero" vem depois no
   arquivo e ganha por especificidade igual + ordem de cascata). */
.tm-stat-value {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 400;
}

/* Documento 09, 3.2 — "Secundario 13px": legendas, rotulos, metadados fora
   de um .tm-page-header (que tem sua propria variante, .tm-page-subtitle,
   em layout.css — a diferenca e so o reset de margem). */
.tm-text-secondary {
    color: var(--color-text-secondary);
    font-size: 13px;
}

/* Pedido do usuario: logo de verdade (docs/imagens modelo/logo-clara.png
   e logo-escura.png, depois substituidas por assets/img/logo-sem-fundo.png)
   no lugar do icone "escudo" generico usado ate aqui como placeholder.
   As duas primeiras eram quadrados OPACOS com fundo solido (creme/navy),
   por isso cada contexto escolhia a variante que contrasta com o proprio
   fundo -- essa escolha se provou errada em alguns lugares e, com
   object-fit:cover, cortava o losango encostado nas bordas da imagem.
   logo-sem-fundo.png resolve os dois problemas: e' um PNG com fundo
   transparente (losango+"T" dourado), entao serve em qualquer fundo claro
   ou escuro sem precisar de variante, e usa object-fit:contain pra nunca
   cortar a arte, so' encolher se o container nao for quadrado. Classe
   compartilhada — cada container continua definindo seu proprio
   tamanho, so' o comportamento da <img> em si e' comum. */
.tm-logo-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}