/* ========================================================================== TodaRota · tokens Fonte única de cor, espaço, raio e relevo. Toda tela do sistema lê daqui. Extraído do design aprovado (Claude Design, "TodaRota Visão Geral"). Para retunar o tema, edite SÓ este arquivo. ========================================================================== */ :root { /* ---- Superfícies --------------------------------------------------- Quatro planos empilhados. A profundidade vem da DIFERENÇA entre eles, não de borda: é o que separa um painel moderno de um admin de 2020. mesa → painel → conteúdo → cartão ------------------------------------------------------------------- */ --bg-app: #0B0D10; /* a mesa: o plano mais fundo, aparece na calha */ --bg-chrome: #14171B; /* painéis: sidebar e topbar */ --bg-page: #101318; /* área de conteúdo dentro do painel */ --bg-card: #1B1F25; /* cartão: sobe claramente do conteúdo */ --bg-card-hover: #20242B; --bg-inset: #0E1014; /* campos afundados (busca) */ --bg-badge: #262B33; /* pastilha de ícone, skeleton */ --bg-donut-track: #262B33; --scroll-thumb: rgba(255,255,255,.10); --scroll-thumb-hover: rgba(255,255,255,.20); /* ---- Controles (o material que tem relevo) ------------------------ */ --control-bg: #2A2F37; --control-bg-hover: #30363F; --control-bg-active: #23272E; /* ---- Linhas -------------------------------------------------------- */ --line-chrome: rgba(255,255,255,.05); /* divisórias do chrome */ --line-card: rgba(255,255,255,.05); /* fio do cartão: sustenta a silhueta, não desenha caixa */ --line-row: rgba(255,255,255,.045); /* divisória de linha de tabela */ --line-guide: #31363E; /* a guia vertical do menu (a rota) */ --line-node: #4A515C; /* contorno do nó (a parada) */ --line-control: #3A414B; --line-control-hover: #454D58; /* ---- Texto --------------------------------------------------------- */ --text: #E8EAED; /* primário */ --text-2: #C7CBD2; --text-3: #B9BFC8; /* item de menu inativo */ --text-4: #9AA0A9; /* rótulo de métrica */ --text-5: #8A919C; /* cabeçalho de tabela */ --text-6: #6F7680; /* legenda, carimbo de tempo */ --text-7: #565D68; /* seta de link, sparkline */ /* ---- Acento (laranja da marca) ------------------------------------- */ --accent: #F2762E; --accent-solid: #E56A24; /* botão primário */ --accent-solid-hover: #F2762E; --accent-solid-active: #D2601C; --accent-solid-line: #B54F16; --on-accent: #2A1300; /* texto sobre laranja sólido */ --on-accent-badge: #241105; /* ---- Alerta (superfície inteira, nunca tarja na borda) ------------- */ --alert-bg: #2B1A0F; --alert-bg-hover: #33200F; --alert-line: rgba(242,118,46,.20); --alert-line-hover: rgba(242,118,46,.34); --alert-text: #C9A183; --alert-text-2: #A5815F; --alert-arrow: #8A6A4E; /* ---- Semântica de dado --------------------------------------------- */ --good: #63A57E; /* delta na direção desejada */ --grid: rgba(255,255,255,.07); /* grade de gráfico: pontilhada, quase invisível */ --anomalia: rgba(242,118,46,.09); /* faixa de fundo do dia de pico */ --neutral-1: #C7CBD2; /* faixas de gráfico, do claro ao escuro */ --neutral-2: #8A919C; --neutral-3: #565D68; --neutral-4: #3E444D; /* ---- Pílulas de risco ---------------------------------------------- */ --pill-alto-bg: rgba(242, 118, 46, .13); --pill-alto-fg: #F5915A; --pill-alto-line: rgba(242, 118, 46, .32); --pill-medio-bg: rgba(255, 255, 255, .06); --pill-medio-fg: #C7CBD2; --pill-medio-line: rgba(255, 255, 255, .10); --pill-baixo-bg: rgba(255, 255, 255, .03); --pill-baixo-fg: #868D98; --pill-baixo-line: rgba(255, 255, 255, .07); /* ---- Relevo ------------------------------------------------------- A assinatura do produto: controle se levanta da superfície, dado fica plano. O levantar vem do PREENCHIMENTO ser mais claro que o fundo, mais um fio de luz no topo. Sem bisel, sem faixa escura no rodapé, sem sombra projetada pesada — isso vira botão skeumórfico datado. ------------------------------------------------------------------- */ --key: inset 0 1px 0 rgba(255,255,255,.055), 0 1px 2px rgba(0,0,0,.22); --key-hover: inset 0 1px 0 rgba(255,255,255,.075), 0 1px 2px rgba(0,0,0,.26); /* Pressionado: o fio de luz some e entra uma sombra interna macia. */ --key-down: inset 0 1px 2px rgba(0,0,0,.30); --key-accent: inset 0 1px 0 rgba(255,255,255,.16), 0 1px 2px rgba(0,0,0,.26); --inset-field: inset 0 1px 2px rgba(0,0,0,.22); /* Borda de controle: fio, não traço. Some contra o fundo e só sustenta a silhueta. Cinza sólido aqui é o que envelhece o botão. */ --hairline: rgba(255,255,255,.07); --hairline-hover: rgba(255,255,255,.11); /* ---- Raio ------------------------------------------------------------ Sistema de 3 níveis, não gosto solto: painel > cartão > controle, e pílula só para chip (delta, risco, contador). ------------------------ */ --r-panel: 20px; /* sidebar e painel principal */ --r-card: 16px; /* cartão, tabela, estado vazio */ --r-control: 10px; /* botão, campo, item de menu */ --r-pill: 999px; /* chip: delta, risco, badge */ /* ---- Espaço (escala de 4) ------------------------------------------ */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 28px; --s8: 36px; /* ---- Tipografia ----------------------------------------------------- */ --font: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --t-xl: 38px; /* métrica herói */ --t-lg: 20px; /* título de bloco, métrica secundária */ --t-md: 14px; /* corpo, item de menu */ --t-sm: 12px; /* rótulo, legenda */ --t-xs: 11px; /* cabeçalho de grupo */ /* ---- Estrutura ------------------------------------------------------ */ --sidebar: 260px; --sidebar-collapsed: 64px; --chrome-h: 64px; }