/* ============================================================
tokens.css — Central de Serviços (Botafogo)
Fonte única de verdade para cor, tipografia, espaço, raio e
sombra. components.css e as telas reais só devem consumir os
tokens SEMÂNTICOS (--bg, --texto, --acento, --estado-*...),
nunca a cor crua (--neutro-500, --dourado-400...). Trocar de
tema é trocar o valor aqui, não reescrever componente.
Este arquivo só declara custom properties. Não define nenhum
seletor de elemento (nem `body`, nem `*`) — isso mantém
tokens.css seguro para conviver com estilo.css nas telas antigas
até a migração (ver docs/design_notes.md).
A fonte (Archivo/Public Sans) é carregada por no de
cada página, não por @import aqui. @import em CSS é sequencial —
o navegador só descobre a fonte depois de baixar e parsear este
arquivo inteiro, adiando o texto. deixa o navegador buscar
a folha de estilo da fonte em paralelo com as outras.
============================================================ */
:root {
/* ---- Cor de marca (manual). Uso interno — componente nunca
referencia --marca-* direto, só via token semântico abaixo. ---- */
--marca-preto: #000000;
--marca-branco: #ffffff;
--marca-dourado: #dbb45a;
--marca-dourado-claro: #fac969;
--marca-cinza: #a7a8a9;
/* ---- Escala neutra derivada de preto/branco ----
Leve undertone quente (casa com o dourado). Nunca #000/#fff
puro em texto de corpo — ver CLAUDE.md §11. */
--neutro-0: #ffffff;
--neutro-50: #f5f5f4;
--neutro-100: #eae9e7;
--neutro-200: #d8d6d3;
--neutro-300: #bcb9b5;
--neutro-400: var(--marca-cinza);
--neutro-500: #8a8988;
--neutro-600: #6b6a68;
--neutro-700: #4e4d4b;
--neutro-800: #343331;
--neutro-900: #211f1e;
--neutro-950: #141312;
--neutro-1000: #0b0a09;
/* ---- Dourado — acento, uso moderado. Nunca fundo de área. ---- */
--dourado-400: var(--marca-dourado-claro);
--dourado-500: var(--marca-dourado);
--dourado-600: #b8933f;
--dourado-700: #8f7230;
/* ---- Matizes de apoio (semântica de sistema, não da marca).
300 = mais clara (texto sobre fundo escuro), 600 = mais
escura (texto sobre fundo claro). Usadas por badge/alerta. ---- */
--azul-300: #8fb0de;
--azul-400: #6f8dbb;
--azul-500: #4c6fa5;
--azul-600: #3b5d8f;
--ciano-300: #7fc9c9;
--ciano-400: #59a6a6;
--ciano-500: #3d8b8b;
--ciano-600: #2e6e6e;
--roxo-300: #a99bde;
--roxo-400: #8a7bc0;
--roxo-500: #6b5ca5;
--roxo-600: #55478c;
--laranja-300: #e8ae74;
--laranja-400: #dd9a54;
--laranja-500: #c97a2e;
--laranja-600: #a5601e;
--verde-300: #8ed1aa;
--verde-400: #4fa374;
--verde-500: #2f6b4a;
--verde-600: #1f5138;
--vermelho-300: #e8938a;
--vermelho-400: #d34a3f;
--vermelho-500: #b3261e;
--vermelho-600: #8c1d17;
/* ---- Tipografia ---- */
--fonte-titulo: 'Archivo', sans-serif;
--fonte-corpo: 'Public Sans', sans-serif;
--peso-regular: 400;
--peso-medio: 500;
--peso-semi: 600;
--peso-negrito: 700;
--peso-preto: 800;
--texto-xs: 0.75rem;
--texto-sm: 0.8125rem;
--texto-base: 0.9375rem;
--texto-md: 1rem;
--texto-lg: 1.125rem;
--texto-xl: 1.375rem;
--texto-2xl: 1.75rem;
--texto-3xl: 2.25rem;
--texto-display: 3rem;
--linha-apertada: 1.15;
--linha-compacta: 1.35;
--linha-normal: 1.55;
/* ---- Espaço (base 4px) ---- */
--espaco-1: 0.25rem;
--espaco-2: 0.5rem;
--espaco-3: 0.75rem;
--espaco-4: 1rem;
--espaco-5: 1.25rem;
--espaco-6: 1.5rem;
--espaco-8: 2rem;
--espaco-10: 2.5rem;
--espaco-12: 3rem;
--espaco-16: 4rem;
/* ---- Raio ---- */
--raio-sm: 4px;
--raio-md: 8px;
--raio-lg: 12px;
--raio-total: 999px;
/* ---- Transição ---- */
--transicao-rapida: 120ms ease;
--transicao-base: 200ms ease;
--transicao-lenta: 320ms ease;
/* =====================================================
Tema claro (padrão, aplicado em :root sem atributo)
===================================================== */
--bg: var(--neutro-50);
--superficie: var(--neutro-0);
--superficie-alt: var(--neutro-100);
--texto: var(--neutro-1000);
--texto-fraco: var(--neutro-600);
--borda: var(--neutro-200);
--borda-forte: var(--neutro-300);
--acento: var(--dourado-500);
--acento-hover: var(--dourado-600);
--acento-texto: var(--neutro-1000);
--perigo: var(--vermelho-500);
--perigo-texto: var(--neutro-0);
--sucesso: var(--verde-500);
--sucesso-texto: var(--neutro-0);
--anel-foco: var(--dourado-500);
--sombra-sm: 0 1px 2px rgba(11, 10, 9, 0.06);
--sombra-md: 0 4px 12px rgba(11, 10, 9, 0.08);
--sombra-lg: 0 12px 32px rgba(11, 10, 9, 0.12);
/* Badge de estado do ticket (§7). Chave = valor literal do enum
ticket_estado — components.css lê via data-estado="..." */
--estado-novo: var(--azul-600);
--estado-triado: var(--ciano-600);
--estado-atribuido: var(--roxo-600);
--estado-em-atendimento: var(--dourado-700);
--estado-aguardando: var(--laranja-600);
--estado-resolvido: var(--verde-500);
--estado-fechado: var(--neutro-700);
--estado-cancelado: var(--vermelho-600);
/* Badge de prioridade (§9) */
--prioridade-p1: var(--vermelho-600);
--prioridade-p2: var(--laranja-600);
--prioridade-p3: var(--azul-600);
--prioridade-p4: var(--neutro-700);
/* Nav lateral: escura mesmo no tema claro — ver design_notes.md */
--nav-bg: var(--neutro-1000);
--nav-borda: var(--neutro-900);
--nav-texto: var(--neutro-100);
--nav-texto-fraco: var(--neutro-400);
--nav-item-hover: var(--neutro-900);
--nav-item-ativo-bg: var(--neutro-900);
--nav-item-ativo-texto: var(--dourado-400);
}
/* =====================================================
Tema escuro — identidade natural da marca (preto/dourado)
===================================================== */
[data-theme='dark'] {
--bg: var(--neutro-1000);
--superficie: var(--neutro-950);
--superficie-alt: var(--neutro-900);
--texto: var(--neutro-50);
--texto-fraco: var(--neutro-400);
--borda: var(--neutro-800);
--borda-forte: var(--neutro-700);
--acento: var(--dourado-400);
--acento-hover: var(--dourado-500);
--acento-texto: var(--neutro-1000);
--perigo: var(--vermelho-400);
--perigo-texto: var(--neutro-1000);
--sucesso: var(--verde-400);
--sucesso-texto: var(--neutro-1000);
--anel-foco: var(--dourado-400);
--sombra-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
--sombra-md: 0 4px 16px rgba(0, 0, 0, 0.5);
--sombra-lg: 0 16px 40px rgba(0, 0, 0, 0.6);
--estado-novo: var(--azul-300);
--estado-triado: var(--ciano-300);
--estado-atribuido: var(--roxo-300);
--estado-em-atendimento: var(--dourado-400);
--estado-aguardando: var(--laranja-300);
--estado-resolvido: var(--verde-300);
--estado-fechado: var(--neutro-300);
--estado-cancelado: var(--vermelho-300);
--prioridade-p1: var(--vermelho-300);
--prioridade-p2: var(--laranja-300);
--prioridade-p3: var(--azul-300);
--prioridade-p4: var(--neutro-300);
/* No escuro a página já é quase-preta — o nav ganha um tom
ligeiramente mais claro que o fundo para não se fundir nele. */
--nav-bg: var(--neutro-900);
--nav-borda: var(--neutro-800);
--nav-texto: var(--neutro-100);
--nav-texto-fraco: var(--neutro-400);
--nav-item-hover: var(--neutro-800);
--nav-item-ativo-bg: var(--neutro-800);
--nav-item-ativo-texto: var(--dourado-400);
}
@media (prefers-reduced-motion: reduce) {
:root {
--transicao-rapida: 0ms;
--transicao-base: 0ms;
--transicao-lenta: 0ms;
}
}