/* ==========================================================================
css/tokens.css: cópia de brand/tokens.css com ajustes do Prompt 2.
Diferenças em relação ao kit (procure [AJUSTE PROMPT 2]):
1. --fonte ganhou "Inter Fallback" (métrica calculada, evita salto de layout).
2. .kv-orb refeito com gradientes ajustados ao KV, escala por contêiner e
versão clara própria (página 3), no lugar de opacity .55.
3. --accent-fill: o botão primário usa o Verde Núcleo nos dois temas. No kit,
o tema claro punha texto preto sobre verde-escuro (3,1:1, reprova AA).
4. --line-input: borda de campo com contraste de 3:1 contra a superfície.
5. Movimento reduzido zera as durações pelos tokens, sem criar transições.
6. [AJUSTE PROMPT 9] --d-destaque e --d-brilho, para o destaque de 400 ms e o skeleton.
10. [AJUSTE PROMPT 17] Verde Núcleo #00ff75 por decisão do cliente; degraus recalculados na mesma proporção.
9. [AJUSTE PROMPT 17] alerta e atenção do tema claro escurecidos para 4,5:1 em todas as superfícies.
8. [AJUSTE PROMPT 14] --ease-mola-leve para a entrada de folha e paleta.
7. [AJUSTE PORTÃO 2] --surface-ativa e --sombra-ativa: opção escolhida no segmentado
com contraste visível nos dois temas.
Todo o resto é idêntico ao kit.
========================================================================== */
/* ==========================================================================
Núcleo: tokens de marca para a Calculadora de Métricas
Fonte: KV "O Nucleo V2" (PDF). Valores marcados [KV] vêm do documento.
Valores marcados [DERIVADO] foram calculados a partir do KV e precisam de
confirmação do designer. Valores marcados [FUNCIONAL] não existem no KV e
servem só para estados de interface (alerta, atenção).
Troque um valor aqui e ele muda em toda a ferramenta.
========================================================================== */
:root {
/* ---- Paleta oficial [KV] ---- */
--nucleo-verde: #00ff75; /* [AJUSTE PROMPT 17] decisão do cliente: #00ff75 (o preenchimento vetorial do KV) */
--nucleo-verde-escuro: #006d34;
--nucleo-preto: #070707;
--nucleo-cinza: #e2e2e2;
--nucleo-branco: #ffffff;
/* ---- Degraus da paleta [DERIVADO] ---- */
--nucleo-verde-1: #00e86a;
--nucleo-verde-2: #00ce5e;
--nucleo-verde-3: #00b252;
--nucleo-preto-1: #0d0d0d;
--nucleo-preto-2: #131313;
--nucleo-preto-3: #191919;
--nucleo-cinza-1: #c6c8c7;
--nucleo-cinza-2: #abadac;
--nucleo-cinza-3: #8e9391;
--nucleo-branco-1: #f5f5f5;
--nucleo-branco-2: #ececec;
/* ---- Estados de interface [FUNCIONAL], fora do KV ---- */
--alerta-sobre-escuro: #ff6b5e;
--alerta-sobre-claro: #b8261a; /* [AJUSTE PROMPT 17] era #d92d20: 4,4:1 sobre as superfícies claras */
--atencao-sobre-escuro: #ffb224;
--atencao-sobre-claro: #8a5100; /* [AJUSTE PROMPT 17] era #9a5b00: 4,4:1 no selo Indicio */
/* ---- Tipografia ----
O KV usa Neue Haas Grotesk Display (licença comercial). Enquanto não
houver licença web, a ferramenta usa Inter self-hosted. Para trocar,
adicione o @font-face da Neue Haas e coloque o nome na frente da lista. */
/* [AJUSTE PROMPT 2] "Inter Fallback" adicionada */
--fonte: "Neue Haas Grotesk Display", "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont,
"Segoe UI", system-ui, sans-serif;
--peso-titulo: 700;
--peso-texto: 400;
--peso-leve: 300;
--tracking-titulo: -0.03em;
--tracking-texto: -0.011em;
/* Escala tipográfica (px). Inputs sempre >= 16px para o iOS não dar zoom. */
--t-caption: 0.75rem; /* 12 */
--t-footnote: 0.8125rem;/* 13 */
--t-callout: 0.9375rem; /* 15 */
--t-body: 1rem; /* 16 */
--t-subhead: 1.1875rem; /* 19 */
--t-title3: 1.375rem; /* 22 */
--t-title2: 1.75rem; /* 28 */
--t-title1: 2.125rem; /* 34 */
--t-display: clamp(2.75rem, 7vw, 4.5rem);
--t-hero-number: clamp(3rem, 11vw, 5.5rem);
/* ---- Espaço (base 4) ---- */
--s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px;
--s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px;
--gutter: 16px;
--medida-leitura: 62ch;
/* ---- Raios ---- */
--r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-2xl: 28px; --r-pill: 999px;
/* ---- Movimento ---- */
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--ease-mola-leve: cubic-bezier(0.2, 1.12, 0.36, 1); /* [AJUSTE PROMPT 14] entrada de folha e paleta */
--d-instant: 80ms; --d-fast: 160ms; --d-base: 240ms; --d-slow: 380ms; --d-count: 700ms;
/* [AJUSTE PROMPT 9] destaque de valor alterado e brilho do skeleton */
--d-destaque: 400ms; --d-brilho: 1400ms;
/* ---- Camadas ---- */
--z-bar: 20; --z-sheet: 40; --z-toast: 60; --z-palette: 80;
}
/* ===== Tema escuro (padrão da marca e da página de vendas) ===== */
:root,
:root[data-theme="dark"] {
color-scheme: dark;
--bg: var(--nucleo-preto);
--surface-1: var(--nucleo-preto-1);
--surface-2: var(--nucleo-preto-2);
--surface-3: var(--nucleo-preto-3);
--text: var(--nucleo-branco);
--text-2: #a0a0a0; /* 7.7:1 sobre o fundo */
--line: rgba(255, 255, 255, 0.08);
--line-strong: rgba(255, 255, 255, 0.16);
--accent: var(--nucleo-verde); /* 15:1 sobre o fundo */
--on-accent: var(--nucleo-preto); /* 15:1 sobre o verde */
/* [AJUSTE PROMPT 2] preenchimento do botão primário separado do acento de texto */
--accent-fill: var(--nucleo-verde);
/* [AJUSTE PROMPT 2] borda de campo com 3:1 contra a superfície (WCAG 1.4.11) */
--line-input: rgba(255, 255, 255, 0.40);
--positive: var(--nucleo-verde);
--negative: var(--alerta-sobre-escuro);
--warn: var(--atencao-sobre-escuro);
--glass: rgba(13, 13, 13, 0.72);
--focus: var(--nucleo-verde);
--logo: var(--nucleo-verde); /* logo verde sobre preto [KV] */
--surface-ativa: rgba(255, 255, 255, 0.14); /* [AJUSTE PORTÃO 2] */
--sombra-ativa: none;
}
/* Sistema claro, a menos que o usuário tenha escolhido tema manualmente */
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]) {
color-scheme: light;
--bg: var(--nucleo-branco);
--surface-1: var(--nucleo-branco-1);
--surface-2: var(--nucleo-branco-2);
--surface-3: var(--nucleo-cinza);
--text: var(--nucleo-preto);
--text-2: #6b6b6b; /* 5.3:1 sobre o branco */
--line: rgba(7, 7, 7, 0.10);
--line-strong: rgba(7, 7, 7, 0.20);
--accent: var(--nucleo-verde-escuro); /* 6.5:1 sobre o branco */
--on-accent: var(--nucleo-preto);
/* [AJUSTE PROMPT 2] preto sobre verde-escuro dava 3,1:1 no botão. Preenchimento
passa a ser o Verde Núcleo (preto sobre verde, 15:1, versão do KV). */
--accent-fill: var(--nucleo-verde);
--line-input: rgba(7, 7, 7, 0.46);
--positive: var(--nucleo-verde-escuro);
--negative: var(--alerta-sobre-claro);
--warn: var(--atencao-sobre-claro);
--glass: rgba(255, 255, 255, 0.72);
--focus: var(--nucleo-verde-escuro);
--logo: var(--nucleo-preto); /* logo preta sobre branco [KV] */
--surface-ativa: var(--nucleo-branco);
--sombra-ativa: 0 1px 3px rgba(7, 7, 7, 0.14), 0 0 0 1px rgba(7, 7, 7, 0.06);
}
}
:root[data-theme="light"] {
color-scheme: light;
--bg: var(--nucleo-branco);
--surface-1: var(--nucleo-branco-1);
--surface-2: var(--nucleo-branco-2);
--surface-3: var(--nucleo-cinza);
--text: var(--nucleo-preto);
--text-2: #6b6b6b;
--line: rgba(7, 7, 7, 0.10);
--line-strong: rgba(7, 7, 7, 0.20);
--accent: var(--nucleo-verde-escuro);
--on-accent: var(--nucleo-preto);
--accent-fill: var(--nucleo-verde); /* [AJUSTE PROMPT 2] */
--line-input: rgba(7, 7, 7, 0.46); /* [AJUSTE PROMPT 2] */
--positive: var(--nucleo-verde-escuro);
--negative: var(--alerta-sobre-claro);
--warn: var(--atencao-sobre-claro);
--glass: rgba(255, 255, 255, 0.72);
--focus: var(--nucleo-verde-escuro);
--logo: var(--nucleo-preto);
--surface-ativa: var(--nucleo-branco);
--sombra-ativa: 0 1px 3px rgba(7, 7, 7, 0.14), 0 0 0 1px rgba(7, 7, 7, 0.06);
}
/* [AJUSTE PROMPT 17] Mais contraste quando o sistema pede (prefers-contrast: more) */
@media (prefers-contrast: more) {
:root { --line: rgba(255, 255, 255, 0.24); --line-strong: rgba(255, 255, 255, 0.5); --text-2: #c8c8c8; --line-input: rgba(255, 255, 255, 0.7); }
:root[data-theme="light"] { --line: rgba(7, 7, 7, 0.28); --line-strong: rgba(7, 7, 7, 0.55); --text-2: #3f3f3f; --line-input: rgba(7, 7, 7, 0.75); }
}
@media (prefers-contrast: more) and (prefers-color-scheme: light) {
:root:not([data-theme="dark"]) { --line: rgba(7, 7, 7, 0.28); --line-strong: rgba(7, 7, 7, 0.55); --text-2: #3f3f3f; --line-input: rgba(7, 7, 7, 0.75); }
}
/* ===== Base ===== */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
margin: 0;
background: var(--bg);
color: var(--text);
font-family: var(--fonte);
font-weight: var(--peso-texto);
font-size: var(--t-body);
line-height: 1.5;
letter-spacing: var(--tracking-texto);
-webkit-font-smoothing: antialiased;
font-feature-settings: "ss01", "cv11";
}
h1, h2, h3 { font-weight: var(--peso-titulo); letter-spacing: var(--tracking-titulo); line-height: 1.08; }
/* Todo número da ferramenta usa algarismos tabulares, para as colunas alinharem */
.num, [data-num], output, input[inputmode="decimal"], td.num {
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum", "case";
}
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: var(--r-sm); }
/* ===== Assinatura visual do KV: o orbe verde com grão =====
[AJUSTE PROMPT 2] Gradientes ajustados numericamente contra o KV: página 1
(orbe sobre preto) e página 3 espelhada (orbe sobre branco). Erro médio do
ajuste no escuro: 2,5 níveis de cor. Só gradientes, nenhum filter: blur.
A escala vem do contêiner (.kv-ambiente, container-type: size):
--orb-u vale um centésimo da altura do contêiner; --orb-x e --orb-y são o
centro do orbe. Sem contêiner, a unidade cqh passa a valer a altura da tela.
O contêiner precisa de altura definida (height, block-size ou aspect-ratio).
Forçar uma versão: .kv-orb--escuro ou .kv-orb--claro. */
.kv-ambiente {
position: relative;
overflow: hidden;
isolation: isolate;
container-type: size;
}
.kv-orb {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
--orb-u: 1cqh;
--orb-x: 24%;
--orb-y: 52%;
--orb-escuro:
radial-gradient(calc(18.99 * var(--orb-u)) calc(36.91 * var(--orb-u)) at var(--orb-x) var(--orb-y),
rgb(0 169 117 / 0.911) 0%, rgb(0 169 117 / 0.869) 12%, rgb(0 169 117 / 0.751) 25%, rgb(0 169 117 / 0.588) 38%, rgb(0 169 117 / 0.413) 50%, rgb(0 169 117 / 0.257) 62%, rgb(0 169 117 / 0.135) 75%, rgb(0 169 117 / 0.051) 88%, rgb(0 169 117 / 0.000) 100%),
radial-gradient(calc(32.68 * var(--orb-u)) calc(68.69 * var(--orb-u)) at calc(var(--orb-x) + 10.28 * var(--orb-u)) var(--orb-y),
rgb(2 147 69 / 1.000) 0%, rgb(2 147 69 / 0.931) 12%, rgb(2 147 69 / 0.751) 25%, rgb(2 147 69 / 0.524) 38%, rgb(2 147 69 / 0.315) 50%, rgb(2 147 69 / 0.161) 62%, rgb(2 147 69 / 0.068) 75%, rgb(2 147 69 / 0.021) 88%, rgb(2 147 69 / 0.000) 100%),
radial-gradient(calc(21.91 * var(--orb-u)) calc(31.03 * var(--orb-u)) at calc(var(--orb-x) - 7.59 * var(--orb-u)) var(--orb-y),
rgb(80 113 123 / 0.807) 0%, rgb(80 113 123 / 0.769) 12%, rgb(80 113 123 / 0.665) 25%, rgb(80 113 123 / 0.519) 38%, rgb(80 113 123 / 0.364) 50%, rgb(80 113 123 / 0.226) 62%, rgb(80 113 123 / 0.118) 75%, rgb(80 113 123 / 0.045) 88%, rgb(80 113 123 / 0.000) 100%);
--orb-claro:
radial-gradient(calc(31.87 * var(--orb-u)) calc(87.80 * var(--orb-u)) at calc(var(--orb-x) - 5.38 * var(--orb-u)) var(--orb-y),
rgb(14 229 109 / 0.570) 0%, rgb(14 229 109 / 0.521) 12%, rgb(14 229 109 / 0.399) 25%, rgb(14 229 109 / 0.255) 38%, rgb(14 229 109 / 0.136) 50%, rgb(14 229 109 / 0.060) 62%, rgb(14 229 109 / 0.021) 75%, rgb(14 229 109 / 0.005) 88%, rgb(14 229 109 / 0.000) 100%),
radial-gradient(calc(24.79 * var(--orb-u)) calc(40.32 * var(--orb-u)) at calc(var(--orb-x) + 6.12 * var(--orb-u)) calc(var(--orb-y) + 0.32 * var(--orb-u)),
rgb(72 216 190 / 0.981) 0%, rgb(72 216 190 / 0.935) 12%, rgb(72 216 190 / 0.809) 25%, rgb(72 216 190 / 0.633) 38%, rgb(72 216 190 / 0.446) 50%, rgb(72 216 190 / 0.277) 62%, rgb(72 216 190 / 0.146) 75%, rgb(72 216 190 / 0.056) 88%, rgb(72 216 190 / 0.000) 100%),
radial-gradient(calc(29.52 * var(--orb-u)) calc(35.35 * var(--orb-u)) at calc(var(--orb-x) - 13.18 * var(--orb-u)) var(--orb-y),
rgb(74 74 74 / 0.963) 0%, rgb(74 74 74 / 0.931) 12%, rgb(74 74 74 / 0.842) 25%, rgb(74 74 74 / 0.709) 38%, rgb(74 74 74 / 0.551) 50%, rgb(74 74 74 / 0.387) 62%, rgb(74 74 74 / 0.234) 75%, rgb(74 74 74 / 0.103) 88%, rgb(74 74 74 / 0.000) 100%);
background: var(--orb-escuro);
}
/* Contêiner em pé (celular): orbe menor, no alto à esquerda, atrás do conteúdo */
@container (orientation: portrait) {
.kv-orb { --orb-u: 0.62cqh; --orb-x: 34%; --orb-y: 36%; }
}
:where(:root[data-theme="light"]) .kv-orb { background: var(--orb-claro); }
@media (prefers-color-scheme: light) {
:where(:root:not([data-theme="dark"])) .kv-orb { background: var(--orb-claro); }
}
.kv-orb--escuro { background: var(--orb-escuro); }
.kv-orb--claro { background: var(--orb-claro); }
.kv-grain {
position: absolute; inset: 0; pointer-events: none; z-index: 1;
opacity: 0.22; mix-blend-mode: overlay;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: no-preference) {
.kv-orb { animation: kv-respira 14s var(--ease-in-out) infinite alternate; }
}
@keyframes kv-respira { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(2%, -1.5%, 0) scale(1.05); } }
/* ===== Movimento reduzido: sem animação decorativa =====
[AJUSTE PROMPT 2] O kit aplicava transition-duration a todo elemento. Como a
propriedade padrão de transição é "all", isso CRIAVA uma transição em toda
mudança de estilo para quem pede movimento reduzido, e getComputedStyle
passava a ler o valor antigo. Agora as durações saem dos tokens (que zeram
aqui) e só as animações de keyframes são cortadas no universal. */
@media (prefers-reduced-motion: reduce) {
:root { --d-instant: 0.01ms; --d-fast: 0.01ms; --d-base: 0.01ms; --d-slow: 0.01ms; --d-count: 0.01ms; --d-destaque: 0.01ms; --d-brilho: 0.01ms; }
*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}
/* ===== Lockup do produto: "Calculadora Nucleo" =====
Horizontal (cabeçalho): símbolo + nome em texto, Light + Bold, o par tipográfico do KV.
Calculadora Nucleo
Vertical (tela vazia, onboarding, Sobre): eyebrow + logo completa.
Calculadora
O nome vem de src/config/producto.js. Nunca trocar a ordem nem o acento. */
.lockup {
display: inline-flex; align-items: center; gap: 10px;
color: var(--text); text-decoration: none;
font-size: var(--t-callout); line-height: 1; letter-spacing: var(--tracking-texto);
}
.lockup svg { height: 22px; width: auto; flex: none; color: var(--logo); display: block; }
.lockup__nome { font-weight: var(--peso-leve); white-space: nowrap; }
.lockup__nome strong { font-weight: var(--peso-titulo); letter-spacing: var(--tracking-titulo); }
.lockup--vertical { flex-direction: column; gap: var(--s-3); text-align: center; }
.lockup--vertical svg { height: 44px; }
.lockup__eyebrow {
font-size: var(--t-footnote); font-weight: var(--peso-leve);
letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-2);
padding-left: 0.24em; /* compensa o espaçamento final e centraliza de verdade */
}