/* ==========================================================================
Velocity — colors_and_type.css
Fundações reutilizáveis de cor e tipografia.
Todos os valores hex são MEDIDOS por amostragem de pixel nas pranchas
originais (assets/source-boards/). Ver context/provenance.md para as
coordenadas exatas de cada amostra.
Uso:
As URLs de fonte abaixo são relativas a ESTE arquivo, então funcionam
igual a partir de preview/ e de ui_kits/app/.
========================================================================== */
/* --------------------------------------------------------------------------
1. Faces tipográficas (arquivos locais em fonts/ — pacote autossuficiente)
-------------------------------------------------------------------------- */
@font-face {
font-family: "Poppins";
font-style: normal;
font-weight: 300;
font-display: swap;
src: url("fonts/poppins-300.woff2") format("woff2");
}
@font-face {
font-family: "Poppins";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("fonts/poppins-400.woff2") format("woff2");
}
@font-face {
font-family: "Poppins";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("fonts/poppins-500.woff2") format("woff2");
}
@font-face {
font-family: "Poppins";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("fonts/poppins-600.woff2") format("woff2");
}
@font-face {
font-family: "Poppins";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("fonts/poppins-700.woff2") format("woff2");
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url("fonts/inter-variable.woff2") format("woff2");
}
/* --------------------------------------------------------------------------
2. Cor
-------------------------------------------------------------------------- */
:root {
/* --- Neutros — carregam 85–92% dos pixels de qualquer tela ------------- */
--bg: #F9F9F9; /* oklch(0.978 0 0) canvas — cinza-claro neutro */
--surface: #FFFFFF; /* oklch(1 0 0) card elevado */
--surface-2: #F4F4F4; /* oklch(0.961 0 0) card recuado / tab inativa */
--fg: #000000; /* oklch(0 0 0) títulos, números, botão sólido*/
--muted: #9A9A9A; /* MEDIDO. 2.6:1 — decorativo apenas, NUNCA texto */
--muted-ink: #6F6F6F; /* texto secundário acessível: 4.6:1 no pior fundo */
--border: #E8E8E8; /* oklch(0.929 0 0) hairline 1px */
/* --- Acento — 5–8% dos pixels, no máximo 2 usos visíveis por tela ------ */
--accent: #DEFD2D; /* oklch(0.945 0.235 119) lima/chartreuse */
--accent-ink: #1A1F02; /* texto sobre o lima */
--accent-soft: color-mix(in oklch, var(--accent) 18%, transparent);
/* --- Secundária — só painel-herói e imagery, nunca acento pontual ------ */
--hero: #81ADD5; /* MEDIDO. O azul da marca — intocado. */
--hero-ink: #FFFFFF; /* MEDIDO. A tinta do painel é BRANCA — ver nota. */
--hero-dim: color-mix(in oklch, var(--hero-ink) 78%, transparent);
--hero-ink-aa: #000000; /* opt-in: tinta 8.87:1 quando AA é obrigatório */
--hero-white:#FFFFFF; /* alias histórico do logo sobre superfície escura */
--hero-soft: color-mix(in oklch, var(--hero) 16%, transparent);
/* NOTA DE CONTRASTE — branco sobre #81ADD5 dá 2.37:1 e não passa em AA.
É o tratamento observado nas pranchas (_08: 17.934 px claros contra 16
escuros sobre o painel) e é o default da marca. A mitigação é de
LAYOUT, não de cor: texto abaixo de 32px vai dentro de um card branco
sobre o painel, nunca solto sobre o azul. Onde AA for obrigatório
(formulário, aviso legal, texto corrido), troque para --hero-ink-aa. */
/* --- Semânticos — derivados em OKLch e verificados a 4.5:1 -------------
Os valores anteriores (L 0.72/0.80/0.62) davam 2.2/1.8/3.8:1 sobre
--bg e reprovavam como texto. Matiz e croma preservados; só a
luminância desceu até passar nos três fundos claros do sistema. */
--success: oklch(0.520 0.15 150); /* #007F35 · 4.88:1 em --bg */
--warn: oklch(0.535 0.14 85); /* #926400 · 4.93:1 em --bg */
--danger: oklch(0.555 0.20 27); /* #CE2A29 · 5.00:1 em --bg */
/* --- Codificação de dados — barras/donuts neutros, 1 destaque lima -----
--data-bar é o valor medido e serve como trilho/fundo. Barra que
carrega informação usa --data-bar-strong: 1.4.11 exige 3:1. */
--data-track: #E8E8E8;
--data-bar: #DDDDDD;
--data-bar-strong: #909090; /* 3.2:1 sobre --surface */
--data-bar-2: #C9C9C9;
--data-peak: var(--accent);
--data-on-hero: color-mix(in oklch, var(--hero-ink) 88%, transparent);
/* --- Sobre o painel-herói --------------------------------------------- */
--on-hero-border: color-mix(in oklch, var(--hero-ink) 34%, transparent);
--on-hero-fill: color-mix(in oklch, var(--hero-ink) 18%, transparent);
}
/* --------------------------------------------------------------------------
2b. Camada de PAPÉIS — intenção de uso, não nome de cor.
Primitivo responde "que cor é". Papel responde "para que serve". Consumir
papéis significa que trocar um primitivo (ou o tema) não exige tocar em
nenhum componente. É esta camada que outro projeto deve aliasar:
:root { --minha-cor-de-texto: var(--role-text); }
Todo papel resolve para um primitivo — nenhum hex novo entra aqui.
-------------------------------------------------------------------------- */
:root {
/* Superfície — do fundo mais recuado ao mais elevado */
--role-canvas: var(--bg);
--role-surface: var(--surface);
--role-surface-sunken:var(--surface-2);
--role-panel: var(--hero); /* painel-herói, superfície inteira */
--role-panel-ink: var(--hero-ink);
--role-panel-ink-aa: var(--hero-ink-aa);
/* Conteúdo */
--role-text: var(--fg);
--role-text-secondary:var(--muted-ink);
--role-text-inverse: var(--surface);
--role-text-decorative: var(--muted); /* NUNCA texto legível */
/* Estrutura */
--role-border: var(--border);
--role-divider: var(--border);
--role-focus: var(--fg);
/* Ação */
--role-action: var(--fg); /* botão primário sólido */
--role-action-ink: var(--surface);
--role-signal: var(--accent); /* destaque — 1 por card/seção */
--role-signal-ink: var(--accent-ink);
/* Feedback */
--role-success: var(--success);
--role-warn: var(--warn);
--role-danger: var(--danger);
/* Dado */
--role-data-track: var(--data-track);
--role-data-fill: var(--data-bar-strong);
--role-data-peak: var(--data-peak);
}
/* --------------------------------------------------------------------------
2c. Tema escuro — opt-in por atributo, nunca por prefers-color-scheme.
ou
O que NÃO muda no escuro: --accent (o lima já é a cor mais clara do
sistema, 17:1 sobre o canvas escuro) e --hero (o periwinkle é marca).
O que muda: os neutros invertem e os semânticos sobem de luminância,
porque os valores claros reprovam sobre fundo escuro.
-------------------------------------------------------------------------- */
[data-theme="dark"] {
--bg: #0B0B0B; /* canvas escuro — branco a 19.7:1 */
--surface: #161616; /* card elevado */
--surface-2: #1F1F1F; /* card recuado / tab inativa */
--fg: #FFFFFF;
--muted: #6B6B6B; /* decorativo apenas — mesma restrição do claro */
--muted-ink: #9A9A9A; /* texto secundário: 5.86:1 no pior fundo */
--border: #2E2E2E;
--accent: #DEFD2D; /* intocado — 17.05:1 sobre --bg */
--accent-ink: #1A1F02;
--accent-soft: color-mix(in oklch, var(--accent) 22%, transparent);
--hero: #81ADD5; /* intocado — o periwinkle é marca */
--hero-ink: #FFFFFF;
--hero-ink-aa: #000000;
--success: #3FD07E; /* 8.27:1 no pior fundo escuro */
--warn: #E0A020; /* 7.24:1 */
--danger: #FF7A75; /* 6.51:1 */
--data-track: #2E2E2E;
--data-bar: #3A3A3A;
--data-bar-strong: #8A8A8A; /* 4.77:1 no pior fundo escuro (SC 1.4.11) */
--data-bar-2: #5A5A5A;
color-scheme: dark;
}
/* --------------------------------------------------------------------------
3. Tipografia
-------------------------------------------------------------------------- */
:root {
/* Display: geométrica de terminais redondos, 'a' de um andar.
É a assinatura da marca — títulos SEMPRE aqui, nunca em Inter/Arial. */
--font-display: "Poppins", "Century Gothic", "Futura", system-ui,
-apple-system, "Segoe UI", sans-serif;
/* Corpo/UI: grotesca neutra. */
--font-body: "Inter", system-ui, -apple-system, "Segoe UI",
"Helvetica Neue", Arial, sans-serif;
/* Números tabulares em tabelas densas. */
--font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
/* Escala — os passos display são leves (300) e negativamente trackeados. */
--text-display-xl: 300 clamp(40px, 6vw, 72px) / 1.0 var(--font-display);
--text-display-lg: 300 clamp(34px, 4.4vw, 56px) / 1.05 var(--font-display);
--text-display-md: 300 clamp(28px, 3.2vw, 40px) / 1.1 var(--font-display);
--text-numeral-xl: 300 clamp(40px, 5.2vw, 72px) / 1.0 var(--font-display);
--text-numeral-lg: 300 clamp(30px, 3.4vw, 44px) / 1.0 var(--font-display);
--text-title: 550 18px / 1.3 var(--font-body);
--text-label: 550 15px / 1.3 var(--font-body);
--text-body: 400 16px / 1.55 var(--font-body);
--text-body-sm: 400 14px / 1.55 var(--font-body);
--text-meta: 450 12.5px / 1.5 var(--font-body);
--text-pill: 550 11.5px / 1 var(--font-body);
--tracking-display: -0.02em;
--tracking-wordmark: -0.01em;
--tracking-pill: 0.02em;
--tracking-meta: 0.01em;
}
/* --- Papéis tipográficos prontos ---------------------------------------- */
.cv-display-xl { font: var(--text-display-xl); letter-spacing: var(--tracking-display); color: var(--fg); }
.cv-display-lg { font: var(--text-display-lg); letter-spacing: var(--tracking-display); color: var(--fg); }
.cv-display-md { font: var(--text-display-md); letter-spacing: var(--tracking-display); color: var(--fg); }
/* Número grande + unidade. A unidade fica em ~40% do número, peso 400. */
.cv-numeral { font: var(--text-numeral-lg); letter-spacing: var(--tracking-display); color: var(--fg); }
.cv-numeral-xl { font: var(--text-numeral-xl); letter-spacing: var(--tracking-display); color: var(--fg); }
.cv-numeral__unit { font-size: 0.4em; font-weight: 400; letter-spacing: 0; }
.cv-title { font: var(--text-title); color: var(--fg); }
.cv-label { font: var(--text-label); color: var(--fg); }
.cv-body { font: var(--text-body); color: var(--fg); }
.cv-body-sm { font: var(--text-body-sm); color: var(--fg); }
.cv-meta { font: var(--text-meta); letter-spacing: var(--tracking-meta); color: var(--muted-ink); }
/* Padrão de citação: cláusula principal em --fg, continuação em --muted,
dentro da MESMA frase. A aspa de abertura é um caractere destacado. */
.cv-quote { font: var(--text-display-md); letter-spacing: var(--tracking-display); color: var(--muted-ink); }
.cv-quote strong,
.cv-quote .cv-quote__lead { font-weight: inherit; color: var(--fg); }
.cv-quote__mark { color: var(--fg); margin-inline-end: 0.12em; }
/* Fallback textual de emergência. O wordmark real é vetor — use sempre
assets/logo/velocity-wordmark.svg. As letras do logo não são Poppins. */
.cv-wordmark {
font-family: var(--font-display);
font-weight: 600;
letter-spacing: var(--tracking-wordmark);
line-height: 1;
color: var(--fg);
}
/* Números sempre com espaço fino como separador de milhar: 10 832, 1 108. */
.cv-tabular { font-variant-numeric: tabular-nums; }