/* ============================================================
BlueShift Design System v1.0 — tokens do BitV2 Console IoT
Fonte normativa: BLUESHIFT-HANDOFF.md / skill blueshift-design-system.
Dois temas:
:root → BlueShift Light (padrão)
[data-theme="dark"] → BlueShift Dark
Os nomes legados (--accent, --bg, --panel, --text…) foram MANTIDOS de
propósito: todo o CSS e JSX existente continua funcionando sem reescrita.
Os tokens --bs-* são a nomenclatura oficial do DS e devem ser usados em
código novo.
============================================================ */
/* ---------- Primitivos da marca (iguais nos dois temas) ---------- */
:root {
--bs-color-primary-blue: #006EFF;
--bs-color-deep-night: #050A20;
--bs-color-arctic-gray: #C5D2E4;
--bs-color-light-frost: #E5F0FF;
--bs-color-sky-light: #F4F9FF;
/* escala Deep Night */
--bs-night-50: #E9F4FF; --bs-night-100: #D7EAFF; --bs-night-200: #B8D8FF;
--bs-night-300: #8DBDFF; --bs-night-400: #6096FF; --bs-night-500: #3C70FF;
--bs-night-600: #1A46FF; --bs-night-700: #1037F2; --bs-night-800: #1031C3;
--bs-night-900: #173298; --bs-night-950: #050A20;
/* escala Arctic Gray */
--bs-arctic-200: #C5D2E4; --bs-arctic-300: #B4C6DC; --bs-arctic-400: #90A9CA;
--bs-arctic-500: #758EBC; --bs-arctic-600: #6378AD; --bs-arctic-700: #57689E;
--bs-arctic-800: #4B5782; --bs-arctic-900: #404968; --bs-arctic-950: #2A2F41;
/* feedback canônico */
--bs-success: #1B9E62; --bs-success-surface: #E4F6EE; --bs-success-dark: #0E7A4A;
--bs-warning: #F6A609; --bs-warning-surface: #FFF4E0; --bs-warning-dark: #C77700;
--bs-error: #E5484D; --bs-error-surface: #FDECEA; --bs-error-dark: #C11C22;
--bs-info: #006EFF; --bs-info-surface: #EAF1FF; --bs-info-dark: #0057DB;
/* tipografia */
--font-sans: "Rubik", system-ui, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, monospace;
--bs-font-sans: var(--font-sans);
--bs-font-mono: var(--font-mono);
/* espaçamento (base 4px) */
--bs-space-4: 4px; --bs-space-8: 8px; --bs-space-12: 12px;
--bs-space-16: 16px; --bs-space-20: 20px; --bs-space-24: 24px;
--bs-space-32: 32px; --bs-space-40: 40px; --bs-space-48: 48px;
--bs-space-64: 64px; --bs-space-80: 80px; --bs-space-96: 96px;
/* raio */
--bs-radius-xs: 6px; --bs-radius-sm: 10px; --bs-radius-md: 12px;
--bs-radius-lg: 16px; --bs-radius-xl: 24px; --bs-radius-pill: 999px;
--radius: 16px;
--radius-sm: 10px;
/* motion */
--bs-dur-fast: 120ms; --bs-dur-base: 200ms;
--bs-dur-slow: 320ms; --bs-dur-slower: 480ms;
--bs-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
/* elevação */
--bs-elevation-1: 0px 1px 2px 0px rgba(5,10,32,.10);
--bs-elevation-2: 0px 2px 2px 0px rgba(5,10,32,.10);
--bs-elevation-3: 0px 6px 8px -4px rgba(5,10,32,.12);
--bs-elevation-4: 0px 10px 18px -8px rgba(5,10,32,.15);
--bs-elevation-5: 0px 16px 20px -10px rgba(5,10,32,.15);
/* anel de foco — obrigatório em todo elemento interativo */
--bs-focus-ring: 0 0 0 4px rgba(0,110,255,.30);
--bs-focus-ring-soft: 0 0 0 4px rgba(0,110,255,.15);
}
/* ============================================================
TEMA CLARO (padrão)
============================================================ */
:root {
color-scheme: light;
--accent: #006EFF;
--accent-bright: #3C70FF;
--accent-deep: #0048B5; /* pressed */
--accent-hover: #0057DB;
--accent-soft: #EAF1FF;
--accent-glow: rgba(0,110,255,.30);
/* UI de produto é chapada. Gradiente de azuis pertence à skill
blueshift-brand (marketing) — não usar em telas. */
--accent-grad: #006EFF;
--ok: #1B9E62;
--ok-soft: #E4F6EE;
--warn: #C77700; /* texto/ícone */
--warn-fill: #F6A609; /* preenchimento de badge */
--warn-soft: #FFF4E0;
--crit: #E5484D;
--crit-soft: #FDECEA;
--idle: #A2ABBE;
--bg: #F4F9FF;
/* ⚠️ `--bg-2` é a superfície RECUADA (campo de formulário, trilho de barra,
controle segmentado, busca) — quase sempre desenhada DENTRO de um
`--panel` branco. Branco puro aqui fazia todos esses controles
desaparecerem no card, deixando só um fio de borda. Um degrau abaixo do
painel é o que dá o "afundado" que o controle precisa. */
--bg-2: #F2F6FC;
--panel: #FFFFFF;
--panel-2: #FAFCFF;
--panel-hi: #EAF1FF;
--row-hover: #FAFCFF;
/* ⚠️ `--border` subiu de #E7ECF5 para #DCE4F0: o valor do DS é calibrado
para separar blocos grandes, mas em contorno de controle pequeno
(input, chip, célula) ele praticamente sumia sobre o painel branco. */
--border: #DCE4F0;
--border-strong: #B4C6DC;
--grid-line: #E7ECF5;
--text: #050A20;
/* ⚠️ `--text-2` e `--text-3` são MAIS ESCUROS que os valores nominais do DS
(#758EBC / #A2ABBE). Motivo: no DS aqueles são tokens de "texto
secundário" e "desabilitado/metadado", e o próprio handoff proíbe usar
Arctic Gray / --text-3 como texto sobre fundo claro (1.4:1). Mas este
console os usa como TEXTO DE LEITURA em ~67 lugares (rótulo de KPI,
descrição, cabeçalho de tabela, timestamp). Mantê-los nos valores
nominais deixaria essas telas ilegíveis no tema claro; aqui eles passam
AA (≥4.5:1) sobre #FFFFFF sem perder a hierarquia visual. */
--text-2: #5A6E96; /* secundário — 4.9:1 sobre branco */
--text-3: #6B7794; /* metadado — 4.6:1 sobre branco */
--shadow: var(--bs-elevation-4);
/* superfícies de estado desabilitado */
--disabled-bg: #EDF0F6;
--disabled-fg: #A2ABBE;
/* ------------------------------------------------------------------
FACE DO BOTÃO SECUNDÁRIO (.btn, .icon-btn).
⚠️ NÃO usar --panel/--bg-2 aqui. No tema claro os dois são branco puro,
que é exatamente a cor do card onde o botão vive — o botão sumia no
fundo e sobrava só um fio de borda. Este é um degrau de cinza-azulado
ABAIXO da superfície, com borda mais escura que --border, de modo que o
contorno feche mesmo sobre um fundo já acinzentado.
------------------------------------------------------------------ */
--btn-face: #EFF3FA;
--btn-edge: #B4C6DC;
/* ------------------------------------------------------------------
Tokens legados que o CSS antigo referencia mas nunca definiu
(--line, --text-1, na seção "etiqueta"). Antes caíam em
inherit/transparent; agora resolvem para algo coerente com o DS.
------------------------------------------------------------------ */
--line: var(--border);
--text-1: var(--text);
/* ------------------------------------------------------------------
Superfície translúcida — no DS a ÚNICA permitida é a topbar.
Os tokens --glass-* continuam existindo porque o bloco GLASS do
styles.css e a classe .vidro da Fazendinha os consomem; foram
recalibrados para o blur leve do DS (10px) em vez dos 18px +
saturate(140%) do tema antigo.
------------------------------------------------------------------ */
/* `--glass-fill` = quanto do --panel SOBRA (menor = mais vidro).
78% no claro: o suficiente para o fundo transparecer sem que o texto
do painel perca contraste. Ver o bloco GLASS no fim do styles.css. */
--glass-blur: 14px;
--glass-sat: 130%;
--glass-fill: 78%;
--glass-edge: rgba(255,255,255,.85);
--glass-border: rgba(180,198,220,.55);
--glass-shadow: 0 10px 30px -12px rgba(5,10,32,.18);
/* Auras do fundo: é o que o vidro tem para borrar. Sem elas o
backdrop-filter não teria o que fazer sobre um --bg chapado. */
--glass-aura-1: rgba(0,110,255,.10);
--glass-aura-2: rgba(60,112,255,.07);
--topbar-bg: rgba(255,255,255,.72);
}
/* ============================================================
TEMA ESCURO — [data-theme="dark"]
O DS v1.0 não documenta dark mode. Os valores abaixo são DERIVADOS
da paleta oficial: fundos = Deep Night; textos = night-50 / arctic-300;
o azul de ação permanece #006EFF em preenchimentos e sobe para
night-300 em texto/ícone (o #006EFF sobre #050A20 não passa AA como
texto). Tokens marcados DERIVADO precisam de aprovação do time de DS.
============================================================ */
[data-theme="dark"] {
color-scheme: dark;
--accent: #006EFF; /* preenchimento de botão primário */
--accent-bright: #8DBDFF; /* texto/link/ícone azul sobre fundo escuro */
--accent-deep: #1A46FF;
--accent-hover: #1A46FF;
--accent-soft: rgba(0,110,255,.18);
--accent-glow: rgba(60,112,255,.45);
--accent-grad: #006EFF;
--ok: #4ECF95; /* DERIVADO de #1B9E62 */
--ok-soft: rgba(27,158,98,.18);
--warn: #F6A609;
--warn-fill: #F6A609;
--warn-soft: rgba(246,166,9,.16);
--crit: #FF7B7F; /* DERIVADO de #E5484D */
--crit-soft: rgba(229,72,77,.18);
--idle: #57689E;
--bg: #050A20;
--bg-2: #080D22;
--panel: #0B1230; /* DERIVADO */
--panel-2: #101838; /* DERIVADO */
--panel-hi: #17204A; /* DERIVADO */
--row-hover: rgba(0,110,255,.08);
--border: rgba(197,210,228,.14);
--border-strong: rgba(197,210,228,.28);
--grid-line: rgba(197,210,228,.10);
--text: #E9F4FF; /* night-50 */
--text-2: #B4C6DC; /* arctic-300 */
--text-3: #758EBC; /* arctic-500 */
--shadow: 0 18px 40px -14px rgba(0,0,0,.60);
--disabled-bg: rgba(197,210,228,.10);
--disabled-fg: #57689E;
/* No escuro o degrau vai para CIMA: o painel é escuro, então a face do
botão precisa ser mais clara que ele para se destacar. */
--btn-face: #1B2450;
--btn-edge: rgba(197,210,228,.34);
--bs-focus-ring: 0 0 0 4px rgba(60,112,255,.45);
--bs-focus-ring-soft: 0 0 0 4px rgba(60,112,255,.22);
--line: var(--border);
--text-1: var(--text);
/* No escuro o vidro segura MAIS tinta: o texto é claro e, com pouco
preenchimento, as auras vazam por trás e comem o contraste da letra. */
--glass-fill: 82%;
--glass-edge: rgba(197,210,228,.22);
--glass-border: rgba(197,210,228,.20);
--glass-shadow: 0 18px 40px -14px rgba(0,0,0,.60);
--glass-aura-1: rgba(0,110,255,.16);
--glass-aura-2: rgba(60,112,255,.10);
--topbar-bg: rgba(5,10,32,.72);
}
/* ============================================================
Base
============================================================ */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
font-family: var(--font-sans);
font-size: 12.5px; /* densidade de console; o DS pede 16px em prosa */
line-height: 1.5;
color: var(--text);
background: var(--bg);
/* Sem starfield, sem radial-gradient de fundo: o DS pede superfícies limpas. */
background-image: none;
-webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-deep); }
[data-theme="dark"] a { color: var(--accent-bright); }
button, input, select, textarea { font-family: inherit; }
button { cursor: pointer; }
/* foco visível global — NUNCA remover sem alternativa equivalente */
:focus-visible {
outline: none;
box-shadow: var(--bs-focus-ring);
border-radius: var(--bs-radius-sm);
}
/* dados numéricos, IDs, MACs, métricas */
.mono, .num, .dev-id, td.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
/* scrollbar do DS */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb {
background: #D2DCEC; border-radius: 8px; border: 3px solid var(--panel);
}
::-webkit-scrollbar-thumb:hover { background: #B6C4DC; }
::-webkit-scrollbar-track { background: transparent; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #2A2F41; border-color: var(--panel); }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #404968; }
/* ============================================================
Material Symbols Rounded — base do componente
============================================================ */
.ms {
font-family: "Material Symbols Rounded";
font-weight: normal; font-style: normal;
line-height: 1; letter-spacing: normal; text-transform: none;
display: inline-block; white-space: nowrap; direction: ltr;
font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
-webkit-font-smoothing: antialiased;
flex-shrink: 0;
/* O Icon antigo era um