/* =========================================================================== DESIGN TOOLS — tokens Design system compartilhado pelas ferramentas internas do Design. Toda ferramenta consome só estes tokens; o visual evolui aqui. Seleção, sempre no : data-estilo="padrao" | "nothing" (padrão: "padrao") data-theme="light" | "dark" (padrão: "light") Vocabulário (use sempre estes nomes): superfícies --bg --surface --surface-2 --surface-3 --line --line-2 texto --ink-display --ink --ink-2 --ink-3 --ink-4 marca/sinal --red --red-strong --red-text --red-dim --red-soft --red-line semânticos --green* --amber* --blue* (-text, -bg, -line) papéis --primary --primary-ink --primary-soft --accent --focus status --s-{ok|run|wait|idle|stop}-{bg|ink|line} saúde --h-good --h-warn --h-over tipo --sans --mono --display · --t-micro … --t-xl forma --r-sm --r-md --r-lg · --shadow-1..3 · --ease · --z-* =========================================================================== */ /* --------------------------------------------------------------------------- ESTILO PADRÃO — claro Branco, grafite e o vermelho da marca (#FF3748). Cor só onde há significado. --------------------------------------------------------------------------- */ :root{ color-scheme: light; /* superfícies por contraste de fundo: página cinza, card branco por cima */ --bg: #F5F5F5; --surface: #FFFFFF; --surface-2: #F0F0F0; --surface-3: #E8E8E8; --line: #E8E8E8; --line-2: #CCCCCC; --ink-display: #1A1A1A; --ink: #1A1A1A; /* 17:1 no card */ --ink-2: #5E5E5E; /* 6,5:1 */ --ink-3: #6B6B6B; /* 4,7:1 mesmo na faixa #F0F0F0 */ --ink-4: #6B6B6B; --green: oklch(0.500 0.115 152); --green-text: oklch(0.445 0.105 152); --green-bg: oklch(0.962 0.026 152); --green-line: oklch(0.888 0.052 152); --amber: oklch(0.560 0.125 72); --amber-text: oklch(0.445 0.105 72); --amber-bg: oklch(0.962 0.026 72); --amber-line: oklch(0.888 0.052 72); --blue: oklch(0.520 0.115 250); --blue-text: oklch(0.445 0.105 250); --blue-bg: oklch(0.962 0.026 250); --blue-line: oklch(0.888 0.052 250); --red: oklch(0.654 0.232 22.7); /* #FF3748 */ --red-strong: oklch(0.560 0.232 22.7); /* carrega texto branco, 5,2:1 */ --red-text: oklch(0.490 0.205 22.7); /* vermelho legível, 6,8:1 */ --red-dim: oklch(0.735 0.205 22.7); /* só em gráfico */ --red-soft: oklch(0.958 0.038 22.7); --red-line: oklch(0.880 0.090 22.7); --primary: var(--ink); --primary-ink: var(--bg); --primary-soft: var(--surface-3); --accent: var(--red); --focus: var(--ink); --s-ok-bg: var(--green-bg); --s-ok-ink: var(--green-text); --s-ok-line: var(--green-line); --s-run-bg: var(--blue-bg); --s-run-ink: var(--blue-text); --s-run-line: var(--blue-line); --s-wait-bg: var(--amber-bg); --s-wait-ink: var(--amber-text); --s-wait-line: var(--amber-line); --s-idle-bg: var(--surface-2); --s-idle-ink: var(--ink-3); --s-idle-line: var(--line-2); --s-stop-bg: var(--red-soft); --s-stop-ink: var(--red-text); --s-stop-line: var(--red-line); --h-good: var(--green); --h-warn: var(--amber); --h-over: var(--red); --t-micro: 11px; --t-xs: 12px; --t-sm: 13px; --t-md: 14px; --t-lg: 16px; --t-xl: 22px; --sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --display: var(--sans); --r-sm: 6px; --r-md: 9px; --r-lg: 13px; --shadow-1: 0 1px 2px oklch(0.255 0 0 / .05); --shadow-2: 0 1px 2px oklch(0.255 0 0 / .06), 0 12px 28px -18px oklch(0.255 0 0 / .32); --shadow-3: 0 2px 6px oklch(0.255 0 0 / .10), 0 24px 48px -24px oklch(0.255 0 0 / .42); --ease: cubic-bezier(.22,.61,.36,1); --z-sticky: 20; --z-pop: 40; --z-toast: 60; } /* --------------------------------------------------------------------------- ESTILO PADRÃO — escuro. Só invertem os neutros; o vermelho clareia. --------------------------------------------------------------------------- */ :root[data-theme="dark"]{ color-scheme: dark; --bg: #000000; --surface: #111111; --surface-2: #1A1A1A; --surface-3: #222222; --line: #222222; --line-2: #333333; --ink-display: #FFFFFF; --ink: #E8E8E8; --ink-2: #B0B0B0; --ink-3: #8E8E8E; /* 5,3:1 na faixa #1A1A1A */ --ink-4: #8E8E8E; --green: oklch(0.760 0.120 152); --green-text: oklch(0.845 0.110 152); --green-bg: oklch(0.298 0.048 152); --green-line: oklch(0.375 0.062 152); --amber: oklch(0.790 0.125 72); --amber-text: oklch(0.845 0.110 72); --amber-bg: oklch(0.298 0.048 72); --amber-line: oklch(0.375 0.062 72); --blue: oklch(0.760 0.115 250); --blue-text: oklch(0.845 0.110 250); --blue-bg: oklch(0.298 0.048 250); --blue-line: oklch(0.375 0.062 250); --red: oklch(0.690 0.225 22.7); --red-strong: oklch(0.560 0.232 22.7); --red-text: oklch(0.770 0.175 22.7); --red-dim: oklch(0.700 0.200 22.7); --red-soft: oklch(0.312 0.085 22.7); --red-line: oklch(0.400 0.130 22.7); --shadow-1: 0 1px 2px oklch(0 0 0 / .4); --shadow-2: 0 1px 2px oklch(0 0 0 / .5), 0 12px 28px -18px oklch(0 0 0 / .8); --shadow-3: 0 2px 6px oklch(0 0 0 / .6), 0 24px 48px -24px oklch(0 0 0 / .9); } /* --------------------------------------------------------------------------- ESTILO NOTHING — monocromático, tipográfico, industrial. Vermelho é interrupção; status colore o texto, nunca o fundo; sem sombra. --------------------------------------------------------------------------- */ :root[data-estilo="nothing"]{ color-scheme: dark; --bg: #000000; --surface: #111111; --surface-2: #1A1A1A; --surface-3: #222222; --line: #222222; --line-2: #333333; --ink-display: #FFFFFF; --ink: #E8E8E8; --ink-2: #E8E8E8; --ink-3: #999999; --ink-4: #666666; /* só decoração: 3,7:1 */ --red: #D71921; --red-strong: #D71921; --red-text: #F0444C; /* 5,1:1 no card */ --red-dim: rgba(215,25,33,.55); --red-soft: rgba(215,25,33,.15); --red-line: #D71921; --green: #4A9E5C; --green-text: #4A9E5C; --green-bg: transparent; --green-line: #333333; --amber: #D4A843; --amber-text: #D4A843; --amber-bg: transparent; --amber-line: #333333; --blue: #E8E8E8; --blue-text: #E8E8E8; --blue-bg: transparent; --blue-line: #333333; --primary: var(--ink-display); --primary-ink: var(--bg); --focus: var(--ink); --s-ok-bg: transparent; --s-ok-ink: var(--green-text); --s-ok-line: var(--line-2); --s-run-bg: transparent; --s-run-ink: var(--ink); --s-run-line: var(--line-2); --s-wait-bg: transparent; --s-wait-ink: var(--amber-text); --s-wait-line: var(--line-2); --s-idle-bg: transparent; --s-idle-ink: var(--ink-3); --s-idle-line: var(--line); --s-stop-bg: transparent; --s-stop-ink: var(--red-text); --s-stop-line: var(--red); --sans: "Space Grotesk", "DM Sans", system-ui, sans-serif; --mono: "Space Mono", "JetBrains Mono", "SF Mono", ui-monospace, monospace; --display: "Doto", "Space Mono", monospace; --r-sm: 4px; --r-md: 8px; --r-lg: 16px; --shadow-1: none; --shadow-2: none; --shadow-3: none; --ease: cubic-bezier(.25,.1,.25,1); } :root[data-estilo="nothing"][data-theme="light"]{ color-scheme: light; --bg: #F5F5F5; --surface: #FFFFFF; --surface-2: #F0F0F0; --surface-3: #E8E8E8; --line: #E8E8E8; --line-2: #CCCCCC; --ink-display: #000000; --ink: #1A1A1A; --ink-2: #1A1A1A; --ink-3: #666666; --ink-4: #999999; --red-text: #D71921; --red-soft: rgba(215,25,33,.10); /* no papel, verde e âmbar puros não seguram texto pequeno */ --green-text: #357A45; --green-line: #CCCCCC; --amber-text: #8A6A12; --amber-line: #CCCCCC; --blue: #1A1A1A; --blue-text: #1A1A1A; --blue-line: #CCCCCC; }