/* ============================================================ nyck — tokens de design ESTE ARQUIVO É A FONTE DE VERDADE DOS VALORES. docs/design/tokens.css só aponta para cá; docs/design/DESIGN-SYSTEM.md explica por que cada valor é esse. Nenhum valor vive nos dois lugares: src/tokens.generated.ts é gerado daqui pelo build e conferido por teste. Contraste de cada par: medido por WCAG 2.1, tabela no DESIGN-SYSTEM.md e verificada em src/design-system-doc.test.ts. Uso: 1. importe este arquivo uma vez, na raiz da aplicação (@passaporte/design-tokens → nyckTokensCssPath()); 2. em componente, consuma SOMENTE os tokens semânticos (--nyck-text-*, --nyck-bg-*, --nyck-border-*, --nyck-state-*); 3. nunca escreva hex literal em componente. Se falta valor, falta token: adicione aqui primeiro. A superfície é decisão de MARCA, não preferência do usuário — por isso é atributo, não prefers-color-scheme: escura, padrão papel ============================================================ */ :root { /* ---------- primitivos: cor ---------- */ --nyck-ciano-400: #19d3c5; /* marca + verificado, sobre escuro */ --nyck-ciano-700: #0b6b64; /* marca + verificado, sobre papel */ --nyck-tinta-900: #0b1113; /* fundo jogador */ --nyck-tinta-800: #121b1e; /* superfície elevada no escuro */ --nyck-tinta-700: #1f2e32; /* borda decorativa no escuro */ --nyck-papel-50: #f4f6f5; /* fundo operador */ --nyck-papel-0: #ffffff; /* superfície elevada no claro */ --nyck-papel-200: #d6dedc; /* borda decorativa no claro */ --nyck-ambar-400: #e9a23b; /* pendente, sobre escuro */ --nyck-ambar-700: #7a4f0c; /* pendente, sobre papel */ --nyck-coral-400: #ff6b5a; /* revogar/autoexcluir, sobre escuro */ --nyck-coral-700: #a8332a; /* revogar/autoexcluir, sobre papel */ /* PROIBIDO: laranja em qualquer tom. Ver docs/design/MARCA.md */ /* ---------- primitivos: tipografia ---------- */ /* Geist e Geist Mono são a escolha. A licença para empacotar e servir do nosso domínio ainda não foi resolvida — até lá, a pilha cai no sistema. Não troque a família por conta própria. */ --nyck-font-sans: "Geist", "Inter var", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --nyck-font-mono: "Geist Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; --nyck-size-display: 2.5rem; /* 40px */ --nyck-size-titulo-1: 1.75rem; /* 28px */ --nyck-size-titulo-2: 1.375rem; /* 22px */ --nyck-size-titulo-3: 1.125rem; /* 18px */ --nyck-size-corpo: 1.0625rem; /* 17px — superfície do jogador */ --nyck-size-apoio: 0.8125rem; /* 13px */ --nyck-size-etiqueta: 0.6875rem; /* 11px — só etiqueta, só no operador */ /* piso absoluto de texto: 12px. Nada menor, em nenhuma tela. */ --nyck-lh-titulo: 1.15; --nyck-lh-corpo: 1.6; --nyck-ls-titulo: -0.022em; --nyck-ls-etiqueta: 0.12em; /* ---------- primitivos: espaço, raio, movimento ---------- */ --nyck-esp-1: 4px; --nyck-esp-2: 8px; --nyck-esp-3: 12px; --nyck-esp-4: 16px; --nyck-esp-5: 20px; --nyck-esp-6: 24px; --nyck-esp-8: 32px; --nyck-esp-10: 40px; --nyck-esp-14: 56px; --nyck-esp-20: 80px; --nyck-raio-sm: 6px; --nyck-raio-md: 10px; --nyck-raio-full: 999px; --nyck-dur-rapida: 120ms; --nyck-dur-media: 220ms; --nyck-curva: cubic-bezier(0.2, 0.7, 0.3, 1); --nyck-alvo-toque: 44px; /* mínimo, em qualquer elemento clicável */ --nyck-largura-texto: 65ch; /* A última quebra do DESIGN-SYSTEM.md (360 · 768 · 1024 · 1280) é o máximo de CONTEÚDO, não da janela: passando disso, a página deixa de crescer e ganha margem. O valor já estava decidido lá em prosa; aqui ele vira token para que nenhuma tela precise digitar 1280 à mão. */ --nyck-largura-conteudo: 1280px; --nyck-z-base: 0; --nyck-z-suspenso: 10; --nyck-z-modal: 100; --nyck-z-toast: 200; } /* ============================================================ SUPERFÍCIE DO JOGADOR (escura) — padrão Vale para login, cadastro, consentimento, hub e app. ============================================================ */ :root, [data-nyck-surface="jogador"] { --nyck-bg-base: var(--nyck-tinta-900); --nyck-bg-elevado: var(--nyck-tinta-800); /* elevação no escuro é COR, não sombra */ --nyck-bg-fundo: #070d0f; /* campo, poço */ --nyck-text-primary: #e7efed; /* 16,28:1 */ --nyck-text-secondary: #a2b4b7; /* 8,83:1 */ --nyck-text-muted: #6f8286; /* 4,72:1 */ --nyck-text-on-brand: #04211f; /* sobre ciano-400: 8,99:1 */ --nyck-brand: var(--nyck-ciano-400); /* 10,12:1 */ --nyck-state-verificado: var(--nyck-ciano-400); --nyck-state-pendente: var(--nyck-ambar-400); /* 8,78:1 */ --nyck-state-revogado: var(--nyck-coral-400); /* 6,80:1 */ /* Erro é o mesmo coral de revogar — a paleta não ganha cor nova. O token existe separado porque o significado é outro: "não deu certo, tente assim" não é "você revogou". Ver DESIGN-SYSTEM.md. */ --nyck-state-erro: var(--nyck-coral-400); /* 6,80:1 */ --nyck-border-subtle: var(--nyck-tinta-700); /* decorativa */ --nyck-border-interactive: #667578; /* 3,97:1 — mínimo de controle */ --nyck-focus-ring: var(--nyck-ciano-400); --nyck-sombra: none; /* sombra é invisível sobre #0B1113 */ --nyck-size-corpo-atual: var(--nyck-size-corpo); /* 17px */ } /* ============================================================ SUPERFÍCIE DO OPERADOR (papel) Site institucional, documentação, portal, proposta, auditoria. ============================================================ */ [data-nyck-surface="operador"] { --nyck-bg-base: var(--nyck-papel-50); --nyck-bg-elevado: var(--nyck-papel-0); --nyck-bg-fundo: #e8eceb; --nyck-text-primary: #0b1113; /* 17,53:1 */ --nyck-text-secondary: #44555a; /* 7,18:1 */ --nyck-text-muted: #616f73; /* 4,80:1 — NÃO use #73868A, dá 3,51:1 */ --nyck-text-on-brand: var(--nyck-papel-0); --nyck-brand: var(--nyck-ciano-700); /* 5,86:1 — ciano-400 aqui dá 1,73:1 */ --nyck-state-verificado: var(--nyck-ciano-700); --nyck-state-pendente: var(--nyck-ambar-700); /* 6,56:1 */ --nyck-state-revogado: var(--nyck-coral-700); /* 6,10:1 */ --nyck-state-erro: var(--nyck-coral-700); /* 6,10:1 — ver a nota na superfície do jogador */ --nyck-border-subtle: var(--nyck-papel-200); --nyck-border-interactive: #768382; /* 3,62:1 */ --nyck-focus-ring: var(--nyck-ciano-700); --nyck-sombra: 0 1px 2px rgb(11 17 19 / 4%), 0 10px 30px -18px rgb(11 17 19 / 22%); --nyck-size-corpo-atual: 0.9375rem; /* 15px */ } /* ============================================================ Base mínima. Não é framework de componentes — é o piso comum para que nenhuma tela nasça sem fundo, foco ou número tabular. ============================================================ */ body { margin: 0; background: var(--nyck-bg-base); color: var(--nyck-text-primary); font-family: var(--nyck-font-sans); font-size: var(--nyck-size-corpo-atual); line-height: var(--nyck-lh-corpo); -webkit-font-smoothing: antialiased; } :where(:focus-visible) { outline: 2px solid var(--nyck-focus-ring); outline-offset: 2px; } /* Valor, limite, data, CPF e contagem: dígito não dança. */ :where(.nyck-num, [data-nyck-num]) { font-variant-numeric: tabular-nums; font-family: var(--nyck-font-mono); } /* Alvo de toque mínimo em qualquer coisa clicável. */ :where(button, a, [role="button"], input[type="submit"]) { min-height: var(--nyck-alvo-toque); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }