/* Spyrit AI — brand tokens & logo motion
v1 · rota 10a. Importe uma vez, no topo da folha de estilos do ERP. */
:root {
/* superfícies */
--spyrit-ink: #0E0E1B;
--spyrit-paper: #F4F2EE;
--spyrit-slate: #8F8FA8;
/* arcos — fundo escuro */
--spyrit-indigo: #6455F0;
--spyrit-amber: #F5A623;
/* arcos — fundo claro */
--spyrit-indigo-ink: #4A3BD8;
--spyrit-amber-ink: #E08C0A;
/* texto sobre fundo claro (AA em corpo) */
--spyrit-indigo-text: #4A3BD8;
--spyrit-amber-text: #96590A;
/* texto sobre fundo escuro */
--spyrit-indigo-onink: #7C6CFF;
/* tipografia */
--spyrit-font-display: 'Archivo', system-ui, sans-serif;
--spyrit-font-body: 'IBM Plex Sans', system-ui, sans-serif;
--spyrit-font-mono: 'IBM Plex Mono', ui-monospace, monospace;
/* geometria da marca (fração do diâmetro D) */
--spyrit-ring-stroke: 0.0909; /* D / 11 */
--spyrit-spark-size: 0.34;
--spyrit-spark-stroke: 0.08;
--spyrit-spark-angle: 38deg;
--spyrit-gap-angle: 14deg;
}
/* ---- corpo e interface ------------------------------------------------
Camada opt-in: adicione data-spyrit-typography no (ou no ) para
ligar. Fica fora do caminho até você decidir — nenhuma regra global escapa
daqui. */
[data-spyrit-typography] body,
body[data-spyrit-typography] {
font-family: var(--spyrit-font-body);
font-size: 15px;
line-height: 1.6;
text-wrap: pretty;
}
/* Títulos e rótulos de seção */
[data-spyrit-typography] h1,
[data-spyrit-typography] h2,
[data-spyrit-typography] h3 {
font-family: var(--spyrit-font-display);
font-weight: 600;
letter-spacing: -0.015em;
line-height: 1.1;
}
/* Densidade de ERP: tabelas e formulários pedem 13,5/1,5, não 15/1,6 */
[data-spyrit-typography] table,
[data-spyrit-typography] input,
[data-spyrit-typography] select,
[data-spyrit-typography] textarea,
[data-spyrit-typography] button {
font-family: inherit;
font-size: 13.5px;
line-height: 1.5;
}
/* ---- números ----------------------------------------------------------
IBM Plex Sans tem algarismos tabulares: ligue-os em TODA coluna de valor,
saldo, quantidade e data. Sem isso os dígitos têm larguras diferentes e a
coluna deixa de alinhar na vertical — o erro de leitura que um ERP não pode
ter. Aplique no | / | numérico e nos inputs de valor. */
.spyrit-num,
[data-spyrit-num] {
font-variant-numeric: tabular-nums;
font-feature-settings: 'tnum' 1;
text-align: right;
font-variant-ligatures: none;
}
/* Grade densa de números (extrato, conciliação, log): mono é mais legível
que sans tabular quando a coluna passa de ~8 dígitos. */
.spyrit-num--mono {
font-family: var(--spyrit-font-mono);
font-variant-numeric: tabular-nums;
font-size: 12.5px;
text-align: right;
}
/* ---- movimento -------------------------------------------------------- */
/* Dois estados, nunca simultâneos:
thinking → a chispa respira
working → o invólucro gira */
@keyframes spyrit-breathe {
0%, 100% { transform: rotate(var(--spyrit-spark-angle)) scale(1); }
50% { transform: rotate(var(--spyrit-spark-angle)) scale(1.12); }
}
@keyframes spyrit-orbit {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes spyrit-deliver {
0% { transform: rotate(var(--spyrit-spark-angle)) scale(1); }
40% { transform: rotate(var(--spyrit-spark-angle)) scale(1.3); }
100% { transform: rotate(var(--spyrit-spark-angle)) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
[data-spyrit-state] * { animation: none !important; }
}
|