/* Vozeria · tokens do design system ("O Instrumento Silencioso"). Fonte única de cores, tipografia, espaço, cantos e movimento. Documentação: DESIGN.md e /design-system. Modo: segue o sistema; [data-tema="claro"|"escuro"] na força um dos dois. */ @import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap"); :root { color-scheme: light; /* ---- marca */ --lima: #C6F453; /* o sinal (escuro); ponto da logo */ --lima-profunda: #709D20; /* o sinal em superfícies claras (3:1 no papel) */ --lima-clara: #E2F9B7; /* lavagem do sinal (fundos de destaque no claro) */ /* ---- neutros (tingidos para o verde, h 115) */ --tinta: #161612; --papel: #F7F8F5; --papel-2: #F0F0ED; --papel-linha: #E1E2DD; --noite: #0E0F0C; --noite-2: #171814; --noite-3: #21221E; --noite-linha: #30312C; --cinza-escuro: #555651; --cinza: #868781; --cinza-claro: #B7B8B2; /* ---- status (reservado; sempre com ícone + texto) */ --ao-vivo: #E23532; /* vermelho: "ao vivo" e erro crítico, nunca marca */ --serio: #EF7926; --atencao: #F3B01D; --bom: #17A750; --info: #3280DD; /* ---- papéis semânticos: modo claro */ --fundo: var(--papel); --superficie: #FCFCFA; /* um tom acima do papel: blocos que se destacam */ --superficie-2: var(--papel-2); /* painéis, barras */ --superficie-3: #E8E9E4; /* hover, selecionado */ --controle: var(--papel-2); /* botão secundário, chip, trilho */ --controle-hover: #E6E7E2; --campo: #FCFCFA; /* fundo de input */ --linha: var(--papel-linha); --linha-forte: var(--cinza-claro); --texto: var(--tinta); --texto-2: var(--cinza-escuro); /* 6.9:1 */ --texto-3: var(--cinza); /* rótulos auxiliares, só >= 13px */ --sinal: var(--lima-profunda); --sinal-lavagem: var(--lima-clara); --texto-sobre-sinal: var(--tinta); --inverso: var(--tinta); /* botão primário */ --texto-inverso: var(--papel); --foco: var(--lima-profunda); --lavagem: 10%; /* intensidade dos fundos de status (color-mix) */ --grafico-grade: var(--papel-linha); --grafico-eixo: var(--cinza); /* ---- cores de métricas (ordem fixa; nunca ciclar; validadas p/ daltonismo) */ --dado-1: #78AB00; /* lima */ --dado-2: #9C44FF; /* violeta */ --dado-3: #099EAB; /* ciano */ --dado-4: #C56001; /* laranja */ --dado-5: #DE03A2; /* magenta */ --dado-6: #D79700; /* âmbar */ --dado-7: #007DF2; /* azul */ --dado-8: #009863; /* esmeralda */ /* ---- tipografia */ --fonte: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --fonte-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace; --t-display: 600 clamp(2.75rem, 6vw, 4.5rem)/1.02 var(--fonte); --t-titulo-1: 600 2rem/1.1 var(--fonte); /* 32 */ --t-titulo-2: 600 1.5rem/1.2 var(--fonte); /* 24 */ --t-titulo-3: 600 1.125rem/1.3 var(--fonte); /* 18 */ --t-corpo: 400 0.9375rem/1.5 var(--fonte); /* 15 */ --t-rotulo: 500 0.8125rem/1.35 var(--fonte); /* 13 */ --t-micro: 500 0.6875rem/1.2 var(--fonte-mono); /* 11, caixa alta */ --t-numero: 600 2rem/1 var(--fonte-mono); /* números de painel */ /* ---- espaço (base 4) e cantos */ --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px; --e-6: 32px; --e-7: 48px; --e-8: 72px; --r-1: 6px; --r-2: 10px; --r-3: 14px; --r-4: 20px; --r-pilula: 999px; /* ---- movimento */ --ease-saida: cubic-bezier(0.25, 1, 0.5, 1); /* quart: estados e entradas */ --ease-expo: cubic-bezier(0.16, 1, 0.3, 1); /* expo: alertas, painéis */ --d-rapida: 120ms; --d-base: 200ms; --d-media: 320ms; --d-lenta: 600ms; /* ---- elevação (só para o que flutua: menus, popovers, toasts) */ --sombra-flutua: 0 1px 2px rgb(22 22 18 / 0.06), 0 8px 24px rgb(22 22 18 / 0.08); } @media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { color-scheme: dark; --fundo: var(--noite); --superficie: var(--noite-2); --superficie-2: var(--noite-2); --superficie-3: var(--noite-3); --controle: var(--noite-3); --controle-hover: #2A2B26; --campo: #1B1C18; --linha: var(--noite-linha); --linha-forte: #45463F; --texto: var(--papel); --texto-2: var(--cinza-claro); --texto-3: var(--cinza); --sinal: var(--lima); --sinal-lavagem: rgb(198 244 83 / 0.12); --texto-sobre-sinal: var(--noite); --inverso: var(--papel); --texto-inverso: var(--noite); --foco: var(--lima); --lavagem: 14%; --grafico-grade: #262722; --grafico-eixo: var(--cinza); --dado-1: #74A600; --dado-2: #A561FE; --dado-3: #0CA7B4; --dado-4: #D96A00; --dado-5: #F021B1; --dado-6: #C18703; --dado-7: #268CFE; --dado-8: #00A86E; --info: #468DE5; --sombra-flutua: 0 0 0 1px var(--noite-linha), 0 12px 32px rgb(0 0 0 / 0.5); } } /* .vz-escuro: uma região sempre escura, em qualquer tema (ex.: seção de destaque da landing) */ :root[data-tema="escuro"], .vz-escuro { color-scheme: dark; --fundo: var(--noite); --superficie: var(--noite-2); --superficie-2: var(--noite-2); --superficie-3: var(--noite-3); --controle: var(--noite-3); --controle-hover: #2A2B26; --campo: #1B1C18; --linha: var(--noite-linha); --linha-forte: #45463F; --texto: var(--papel); --texto-2: var(--cinza-claro); --texto-3: var(--cinza); --sinal: var(--lima); --sinal-lavagem: rgb(198 244 83 / 0.12); --texto-sobre-sinal: var(--noite); --inverso: var(--papel); --texto-inverso: var(--noite); --foco: var(--lima); --lavagem: 14%; --grafico-grade: #262722; --grafico-eixo: var(--cinza); --dado-1: #74A600; --dado-2: #A561FE; --dado-3: #0CA7B4; --dado-4: #D96A00; --dado-5: #F021B1; --dado-6: #C18703; --dado-7: #268CFE; --dado-8: #00A86E; --info: #468DE5; --sombra-flutua: 0 0 0 1px var(--noite-linha), 0 12px 32px rgb(0 0 0 / 0.5); } @media (prefers-reduced-motion: reduce) { :root { --d-rapida: 0ms; --d-base: 0ms; --d-media: 0ms; --d-lenta: 0ms; } }