/* ==========================================================================
DS v3 — Tokens de Tipografia v3
Issue: #219 · Parent: #191 (FASE-3)
==========================================================================
Três famílias tipográficas formam o vocabulário visual do Aether v3:
┌─────────────────────────────────────────────────────────────────────┐
│ DISPLAY Bricolage Grotesque opsz 12–96 · wght 200–800 │
│ Títulos, headings, números grandes, KPIs │
│ Eixos variáveis: expressão geométrica com personalidade │
│ │
│ BODY DM Sans opsz 9–40 · wght 100–1000 │
│ Corpo de texto, labels, formulários, tabelas │
│ Eixos variáveis: neutralidade legível em qualquer escala │
│ │
│ MONO JetBrains Mono wght 100–800 │
│ Código, CLIs, valores técnicos, timestamps │
└─────────────────────────────────────────────────────────────────────┘
CARREGAMENTO GOOGLE FONTS (display=swap — não-bloqueante):
Adicionar no do layout principal ANTES de qualquer CSS:
Notas de carregamento:
- display=swap: texto visível com fallback durante carregamento (FOUT, não FOIT)
- URL única: 3 famílias em um request = menor overhead de conexão
- preconnect: DNS + TLS antecipados — elimina ~150–400ms de latência no first load
- opsz: Google Fonts carrega APENAS os eixos solicitados — menor tamanho de arquivo
- wght range amplo (100..1000, 200..800): uma fonte cobre todos os pesos sem arquivos extras
FONT OPTICAL SIZING:
Bricolage Grotesque e DM Sans suportam font-optical-sizing: auto (CSS padrão).
Quando ativo, o browser usa o eixo `opsz` da fonte para ajustar contraste de traço,
espaçamento e proporções conforme o tamanho computado — zero JavaScript.
Sempre declarar `font-optical-sizing: auto` em elementos que usam essas fontes.
DEPENDÊNCIAS:
Nenhuma dependência CSS — tokens de fundação pura.
Consumido por: fluid-type.css (#220), todos os componentes com texto.
PRÓXIMA ISSUE:
#220 — Fluid Type Scale com clamp() — define --ds-text-* usando estes tokens.
========================================================================== */
@layer ds-tokens {
:root {
/* ─────────────────────────────────────────────────────────────────────
FAMÍLIAS TIPOGRÁFICAS
Fallbacks em ordem: fonte do sistema mais próxima → genérica.
Segoe UI (Windows) e system-ui (macOS/iOS) garantem FOUT aceitável.
───────────────────────────────────────────────────────────────────── */
/*
Display — Bricolage Grotesque Variable
Eixos: opsz (12–96) + wght (200–800)
Personalidade: geométrica com irregularidade orgânica, moderna e memorável.
Uso:
–
, hero numbers, KPIs, títulos de seção, badges prominentes.
font-optical-sizing: auto → usa opsz automaticamente por font-size.
*/
--ds-font-display:
'Bricolage Grotesque', 'Bricolage Grotesque Variable',
'Segoe UI', system-ui, sans-serif;
/*
Body — DM Sans Variable
Eixos: opsz (9–40) + wght (100–1000) + itálico
Personalidade: neutra, limpa, funcional. Excelente legibilidade em
tamanhos pequenos (9px+) com opsz ajustando contraste de traço.
Uso: corpo de texto, labels, formulários, tabelas, descrições, botões.
*/
--ds-font-body:
'DM Sans', 'DM Sans Variable',
'Segoe UI', system-ui, sans-serif;
/*
Mono — JetBrains Mono
Eixos: wght (100–800) + itálico
Personalidade: técnica e legível. Ligaduras de código opcionais (liga 0 off).
Uso: código-fonte, snippets, valores técnicos (IDs, timestamps, hashes),
terminais, campos de entrada com formato fixo.
*/
--ds-font-mono:
'JetBrains Mono',
'Cascadia Code', 'Fira Code', 'Consolas', monospace;
/* ─────────────────────────────────────────────────────────────────────
PESOS TIPOGRÁFICOS
Valores numéricos — compatíveis com variable fonts (interpolação contínua).
NÃO usar keywords (bold, light) — sem granularidade em variable fonts.
Regra: wght fora dos eixos suportados → browser clamp ao limite mais próximo.
Bricolage Grotesque: 200–800 (light/thin clampados em 200)
DM Sans: 100–1000 (todos os pesos cobertos)
───────────────────────────────────────────────────────────────────── */
--ds-font-weight-thin: 100; /* DM Sans only — corpo muito fino */
--ds-font-weight-light: 300; /* parágrafos longos, subtítulos discretos */
--ds-font-weight-regular: 400; /* corpo de texto padrão */
--ds-font-weight-medium: 500; /* labels, navegação, botões secundários */
--ds-font-weight-semibold: 600; /* botões primários, valores de destaque */
--ds-font-weight-bold: 700; /* headings H4–H6, títulos de card */
--ds-font-weight-extrabold: 800; /* H1–H3 com Bricolage (limite do eixo) */
/* ─────────────────────────────────────────────────────────────────────
LINE HEIGHTS
Sem unidade — multiplicador relativo ao font-size do elemento.
Regra: títulos precisam de menos espaço (lidos em bloco),
corpo precisa de mais (lido em fluxo contínuo).
───────────────────────────────────────────────────────────────────── */
--ds-leading-none: 1; /* títulos display muito grandes — zero line gap */
--ds-leading-tight: 1.15; /* headings H1–H2 */
--ds-leading-snug: 1.3; /* headings H3–H4, labels grandes */
--ds-leading-normal: 1.5; /* corpo de texto — padrão de legibilidade */
--ds-leading-relaxed: 1.625; /* corpo longo, artigos, help text */
--ds-leading-loose: 2; /* espaçamento máximo — listas, configurações */
/* ─────────────────────────────────────────────────────────────────────
LETTER SPACING
Em `em` — proporcional ao font-size. Evita recalcular para cada tamanho.
Headings grandes: tracking negativo (mais coeso).
Micro labels e CAPS: tracking positivo (mais arejado).
───────────────────────────────────────────────────────────────────── */
--ds-tracking-tighter: -0.04em; /* display grande (≥ 2rem) — NUNCA usar < 1.5rem:
em tamanhos pequenos sobre glass blurry, caracteres
como fi/rn/cl podem coalescer visualmente */
--ds-tracking-tight: -0.02em; /* headings H1–H3 */
--ds-tracking-normal: 0em; /* corpo de texto */
--ds-tracking-wide: 0.03em; /* labels, nav items */
--ds-tracking-wider: 0.06em; /* ALL CAPS labels, badges */
--ds-tracking-widest: 0.12em; /* section dividers em caps */
/* ─────────────────────────────────────────────────────────────────────
FEATURE SETTINGS — OpenType
Controle granular de features tipográficas específicas.
Usar font-feature-settings com moderação — cada feature é um override do padrão.
───────────────────────────────────────────────────────────────────── */
/* Numerais com linha de base alinhada — para tabelas, KPIs, dashboards */
--ds-font-features-tabular: 'tnum' 1;
/* Numerais com ascendentes/descendentes — para texto corrido */
--ds-font-features-oldstyle: 'onum' 1;
/* Liga desativada para mono — JetBrains Mono tem ligaduras opcionais de código.
Em inputs/campos de dados, desativar ligaduras evita ambiguidade visual. */
--ds-font-features-mono-nliga: 'liga' 0, 'calt' 0;
/* Liga ativa para mono em blocos de código lidos (não editados) */
--ds-font-features-mono-liga: 'liga' 1, 'calt' 1;
}
/* ─────────────────────────────────────────────────────────────────────
DEFAULTS GLOBAIS
Aplicados em :root para herança automática por todos os elementos.
Valores concretos (não tokens) apenas para defaults seguros.
───────────────────────────────────────────────────────────────────── */
:root {
font-family: var(--ds-font-body);
font-weight: var(--ds-font-weight-regular);
line-height: var(--ds-leading-normal);
font-optical-sizing: auto; /* ativa eixo opsz para DM Sans automaticamente */
-webkit-font-smoothing: antialiased; /* macOS: subpixel → grayscale AA */
-moz-osx-font-smoothing: grayscale; /* Firefox macOS */
text-rendering: optimizeLegibility; /* kerning + ligaduras no body */
}
/* Headings: Bricolage Grotesque com opsz automático e tracking negativo */
h1, h2, h3, h4, h5, h6 {
font-family: var(--ds-font-display);
font-optical-sizing: auto;
letter-spacing: var(--ds-tracking-tight);
line-height: var(--ds-leading-tight);
text-wrap: balance; /* distribui palavras uniformemente (Chrome 114+) */
}
h1 {
font-weight: var(--ds-font-weight-extrabold);
letter-spacing: var(--ds-tracking-tighter);
line-height: var(--ds-leading-none);
}
h2 { font-weight: var(--ds-font-weight-bold); }
h3 { font-weight: var(--ds-font-weight-bold); }
h4 { font-weight: var(--ds-font-weight-semibold); }
h5 { font-weight: var(--ds-font-weight-semibold); }
h6 { font-weight: var(--ds-font-weight-medium); }
/* Código: JetBrains Mono sem ligaduras por padrão (contexto de edição) */
code, kbd, samp, pre {
font-family: var(--ds-font-mono);
font-feature-settings: var(--ds-font-features-mono-nliga);
font-size: 0.875em; /* 87.5% do parent — mono parece maior que sans-serif no mesmo px */
}
/* Blocos de código lido (não editado): liga ativa */
pre code {
font-feature-settings: var(--ds-font-features-mono-liga);
}
/* Numerais em tabelas: tabular nums para alinhamento de colunas */
table {
font-feature-settings: var(--ds-font-features-tabular);
}
/*
font-feature-settings NÃO é aditivo — cada declaração substitui a anterior.
code/kbd dentro de table herdariam 'tnum' da table, mas o bloco code/kbd acima
declara 'liga' 0, 'calt' 0, que SUBSTITUI 'tnum' — alinhamento tabular perdido.
Este override restaura 'tnum' para elementos mono dentro de tabelas.
*/
table code, table kbd, table samp {
font-feature-settings: var(--ds-font-features-mono-nliga), 'tnum' 1;
}
/* Texto longo: body weight + leading relaxed */
p {
text-wrap: pretty; /* evita widow/orphan (Chrome 117+) */
}
}