/* ========================================================================= i3Track — camada única de design tokens ========================================================================= POR QUE ESTE ARQUIVO EXISTE O sistema tinha 66 variáveis CSS já criadas, mas ao lado delas 788 ocorrências de cor literal (285 cores distintas), 24 tamanhos de fonte diferentes em 265 pontos e três famílias tipográficas se alternando sem regra. O resultado é o que se vê na tela: cada página parece ter sido feita num dia diferente. Este arquivo é a fonte única desses valores. Nada abaixo dele deve trazer cor, fonte, raio, sombra ou espaçamento escrito à mão. POR QUE ELE É ADITIVO (e não substitui o que existe) Os nomes aqui usam o prefixo `--i3t-` e NÃO sobrescrevem nenhuma das 66 variáveis antigas. Isso é de propósito: subir este arquivo não muda um pixel da tela. Os componentes migram para cá um lote por vez, e cada lote pode ser conferido isoladamente. Trocar os dois de uma vez seria apostar que 285 substituições estão todas certas — e descobrir o contrário em produção. As variáveis antigas ficam vivas durante a migração e saem no fim. COMO O TEMA FUNCIONA Mesma convenção do `i3track-brand.css`: `:root[data-theme="dark"]` e `:root[data-theme="light"]`. Os valores escuros também ficam no `:root` puro, para que a página tenha aparência correta no instante entre o HTML carregar e o script carimbar o atributo — sem isso há um pisca claro no tema escuro. Este arquivo precisa vir ANTES do `i3track-brand.css` no index.html. ========================================================================= */ /* ------------------------------------------------------------------------- 1. O QUE NÃO MUDA COM O TEMA ------------------------------------------------------------------------- */ :root { /* --- Tipografia ------------------------------------------------------- Duas fontes, com papel definido — hoje elas se alternam sem regra. Bricolage Grotesque é a fonte da marca (carregada por @font-face no i3track-brand.css, arquivo em /assets/fonts/). Fica SÓ no display e no h1: é uma grotesca de titulação, e em corpo de texto ela cansa. Inter é a fonte de leitura — é a que o index.html carrega do Google Fonts. A monoespaçada não é decorativa: IMEI, placa, ICCID e ID são cadeias que o operador compara caractere a caractere, e em fonte proporcional o 0/O e o 1/l/I se confundem. */ --i3t-font-display: 'Bricolage Grotesque', 'Inter', ui-sans-serif, system-ui, sans-serif; --i3t-font-body: 'Inter', ui-sans-serif, system-ui, 'Segoe UI', Helvetica, Arial, sans-serif; --i3t-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; /* Escala de 7 degraus, no lugar dos 24 tamanhos de hoje. Saem daqui: 9, 9.5, 10.5, 11.5, 12.5, 13.5, 14.5, 17, 19, 23, 26, 27px. Meio pixel de diferença não é hierarquia — é ruído. */ --i3t-text-display: 2rem; /* 32px — número herói, título de tela cheia */ --i3t-text-h1: 1.5rem; /* 24px — título da página */ --i3t-text-h2: 1.25rem; /* 20px — seção */ --i3t-text-h3: 1rem; /* 16px — subseção, título de card */ --i3t-text-body: 0.875rem; /* 14px — corpo, célula de tabela */ --i3t-text-label: 0.75rem; /* 12px — label de campo, eyebrow */ --i3t-text-caption: 0.6875rem; /* 11px — legenda, nota de rodapé */ --i3t-weight-regular: 400; --i3t-weight-medium: 500; --i3t-weight-semibold: 600; --i3t-weight-bold: 700; /* Altura de linha por papel: título junto, texto respirando. */ --i3t-leading-tight: 1.2; /* display, h1, h2 */ --i3t-leading-snug: 1.4; /* h3, label */ --i3t-leading-normal: 1.55; /* corpo */ /* O eyebrow (a palavra pequena acima do título) precisa de entreletra: em caixa alta e 12px, sem isso as letras se colam. */ --i3t-tracking-eyebrow: 0.08em; /* --- Espaçamento ------------------------------------------------------ Escala fixa. Todo espaço da interface sai de um destes sete valores. */ --i3t-space-1: 0.25rem; /* 4px */ --i3t-space-2: 0.5rem; /* 8px */ --i3t-space-3: 0.75rem; /* 12px */ --i3t-space-4: 1rem; /* 16px */ --i3t-space-5: 1.5rem; /* 24px */ --i3t-space-6: 2rem; /* 32px */ --i3t-space-7: 3rem; /* 48px */ /* --- Raio de borda ---------------------------------------------------- Três níveis, e cada um tem um dono: sm campo, badge, botão pequeno md card, botão, dropdown lg modal, painel lateral, card-herói */ --i3t-radius-sm: 6px; --i3t-radius-md: 10px; --i3t-radius-lg: 16px; --i3t-radius-pill: 999px; /* --- Altura dos controles -------------------------------------------- A topbar tem hoje três controles (busca, plataforma, cliente) com três alturas diferentes. Um valor só resolve. */ --i3t-control-height: 36px; --i3t-control-height-sm: 28px; --i3t-control-height-lg: 44px; /* --- Espessura do acento do KPI card ---------------------------------- */ --i3t-kpi-accent-width: 4px; --i3t-transition-fast: 120ms ease; --i3t-transition-base: 200ms ease; } /* ------------------------------------------------------------------------- 2. TEMA ESCURO — também no :root puro, para não piscar antes do script ------------------------------------------------------------------------- */ :root, :root[data-theme="dark"] { color-scheme: dark; /* --- Superfícies ------------------------------------------------------ Carvão neutro, não preto absoluto — os valores vêm do que já está no ar. */ --i3t-surface: #191919; /* fundo da página */ --i3t-surface-raised: #242424; /* card, dropdown, o que flutua */ --i3t-surface-sunken: #1C1C1C; /* campo, área rebaixada dentro do card */ --i3t-surface-overlay: #1F1F1F; /* modal, painel lateral */ --i3t-border: #353535; --i3t-border-strong: #4A4A4A; /* --- Texto ------------------------------------------------------------ Três níveis. `muted` é o piso: abaixo disso não passa em AA. */ --i3t-text-primary: #F7F7F7; --i3t-text-secondary: #C4C4C4; --i3t-text-muted: #A1A1A1; --i3t-text-inverse: #191919; /* texto SOBRE o azul da marca */ /* --- Marca ------------------------------------------------------------ No escuro o azul clareia: #0052E6 sobre carvão não atinge 3:1. */ --i3t-brand: #66A3FF; --i3t-brand-hover: #8FBCFF; --i3t-brand-active: #4C8DFF; --i3t-brand-soft: rgba(102, 163, 255, .16); --i3t-brand-border: rgba(102, 163, 255, .42); --i3t-on-brand: #0B1A33; /* texto em cima do botão primário */ /* --- Estados ---------------------------------------------------------- Nunca invertem de matiz entre os temas: verde é sempre sucesso, vermelho é sempre perigo. O que muda é só a luminosidade, para o fundo. */ --i3t-success: #22C55E; --i3t-success-soft: rgba(34, 197, 94, .16); --i3t-warning: #F59E0B; --i3t-warning-soft: rgba(245, 158, 11, .16); --i3t-danger: #EF4444; --i3t-danger-soft: rgba(239, 68, 68, .16); --i3t-info: #66A3FF; --i3t-info-soft: rgba(102, 163, 255, .16); --i3t-focus-ring: rgba(102, 163, 255, .55); /* --- Elevação --------------------------------------------------------- No escuro a sombra quase não aparece; quem separa os planos é a borda. Por isso as sombras aqui são mais fechadas que as do tema claro. */ --i3t-elevation-1: 0 1px 2px rgba(0, 0, 0, .40); --i3t-elevation-2: 0 4px 12px rgba(0, 0, 0, .48); --i3t-elevation-3: 0 12px 32px rgba(0, 0, 0, .56); /* --- Acento dos KPI cards -------------------------------------------- Ordem FIXA: o 3º card de qualquer tela é sempre aqua. Assim um filtro que muda a quantidade de cards não repinta os que sobraram. A ordem não é estética, é o resultado do validador de daltonismo. As duas primeiras tentativas reprovaram: azul↔violeta ficam idênticos na protanopia (ΔE 1,2) e magenta↔aqua na deuteranopia (ΔE 3,8). Nesta ordem nenhum par vizinho fica abaixo do piso. Não reordenar sem rodar o validador de novo. */ --i3t-kpi-1: #4C8DFF; /* azul da marca */ --i3t-kpi-2: #D95926; /* laranja */ --i3t-kpi-3: #199E70; /* aqua */ --i3t-kpi-4: #C98500; /* amarelo */ --i3t-kpi-5: #D55181; /* magenta */ --i3t-kpi-6: #008300; /* verde */ --i3t-kpi-7: #9085E9; /* violeta */ --i3t-kpi-8: #E66767; /* vermelho */ } /* ------------------------------------------------------------------------- 3. TEMA CLARO ------------------------------------------------------------------------- */ :root[data-theme="light"] { color-scheme: light; --i3t-surface: #F7F7F7; --i3t-surface-raised: #FFFFFF; --i3t-surface-sunken: #EFEFEF; --i3t-surface-overlay: #FFFFFF; --i3t-border: #E4E4E4; --i3t-border-strong: #C9C9C9; --i3t-text-primary: #242424; --i3t-text-secondary: #545454; /* #6B6B6B dá 5.33:1 sobre o card branco e 4.97:1 sobre o fundo da página — passa em AA para texto normal nos dois. Não clarear mais: 4.5:1 é o piso e não há folga sobrando. */ --i3t-text-muted: #6B6B6B; --i3t-text-inverse: #FFFFFF; --i3t-brand: #0052E6; --i3t-brand-hover: #0047C7; --i3t-brand-active: #003A99; --i3t-brand-soft: rgba(0, 82, 230, .10); --i3t-brand-border: rgba(0, 82, 230, .28); --i3t-on-brand: #FFFFFF; /* Mesmos matizes do escuro, escurecidos para o fundo claro. */ --i3t-success: #16A34A; --i3t-success-soft: rgba(22, 163, 74, .12); --i3t-warning: #D97706; --i3t-warning-soft: rgba(217, 119, 6, .12); --i3t-danger: #DC2626; --i3t-danger-soft: rgba(220, 38, 38, .12); --i3t-info: #0052E6; --i3t-info-soft: rgba(0, 82, 230, .10); --i3t-focus-ring: rgba(0, 82, 230, .45); /* No claro a sombra é o que separa os planos — pode ser mais aberta. */ --i3t-elevation-1: 0 1px 2px rgba(16, 24, 40, .06); --i3t-elevation-2: 0 4px 12px rgba(16, 24, 40, .10); --i3t-elevation-3: 0 12px 32px rgba(16, 24, 40, .14); /* Mesmos oito matizes do escuro, nos passos do tema claro. Validado como conjunto — ver a nota no bloco do tema escuro. */ --i3t-kpi-1: #0052E6; --i3t-kpi-2: #EB6834; --i3t-kpi-3: #1BAF7A; --i3t-kpi-4: #EDA100; --i3t-kpi-5: #E87BA4; --i3t-kpi-6: #008300; --i3t-kpi-7: #4A3AA7; --i3t-kpi-8: #E34948; } /* ------------------------------------------------------------------------- 4. FOCO VISÍVEL ------------------------------------------------------------------------- Fica aqui, e não na migração de componentes, porque é acessibilidade: quem navega por teclado precisa disso valendo nos dois temas desde já. O anel é desenhado por fora (`outline-offset`) para não ser recortado por `overflow: hidden` do card que envolve o controle. */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--i3t-focus-ring); outline-offset: 2px; border-radius: var(--i3t-radius-sm); } /* ------------------------------------------------------------------------- 5. IDENTIFICADOR TÉCNICO ------------------------------------------------------------------------- IMEI, placa, ICCID, ID. Basta marcar o elemento com `data-i3t="id"`. `font-variant-numeric: tabular-nums` alinha os dígitos em coluna quando eles aparecem empilhados numa tabela. */ [data-i3t="id"] { font-family: var(--i3t-font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0; }