/* ══════════════════════════════════════════════════════════════════════════════
tokens.css — Camada única de design do Sistema Myelinfy MNO
──────────────────────────────────────────────────────────────────────────────
Fonte única de verdade para cor, raio, sombra e transição. Carregue SEMPRE
antes de style.css:
Tema: escuro por padrão em :root, claro em [data-theme="light"]. O tema.js
carimba data-theme no antes da primeira pintura. Impressão sempre sai
no tema claro (bloco @media print no fim).
Nunca escreva cor literal numa regra. Se falta um tom, acrescente um token
aqui e use-o — é isso que mantém os seis templates falando a mesma língua.
══════════════════════════════════════════════════════════════════════════════ */
:root {
/* ── Superfícies da aplicação ── */
--bg-gradient: radial-gradient(circle at 20% 0%, #0f172a 0%, #07111f 48%, #020617 100%);
--surface-solid: #0f172a;
--surface-trans: rgba(15, 23, 42, 0.75);
--surface-sunken: rgba(2, 6, 23, 0.45);
--glass-bg: rgba(15, 23, 42, 0.65);
--glass-border: rgba(255, 255, 255, 0.08);
--glass-glow: rgba(59, 130, 246, 0.12);
/* ── Realces sobre superfície ──
O app nasceu dark-first, e por isso o realce de hover, o trilho da barra de
progresso e o marcador do quiz foram escritos como `rgba(255,255,255,α)`
direto na regra do componente. Branco translúcido sobre fundo escuro
clareia; sobre fundo claro não faz nada — e o elemento não fica feio, ele
some. Foi o que aconteceu com o hover da aba, o hover da etapa do wizard, o
hover do botão secundário e, o pior dos quatro, as pílulas de progresso do
quiz: no tema claro a pessoa perdia a noção de quantas perguntas faltavam.
Estes três tokens são o mesmo realce descrito nos dois temas. */
--realce-sutil: rgba(255, 255, 255, 0.05);
--realce-medio: rgba(255, 255, 255, 0.08);
--marcador-inativo: rgba(255, 255, 255, 0.20);
/* ── Superfícies de documento (painéis, dossiês e laudos) ── */
--doc-bg: #0b1220;
--doc-surface: #131c2e;
--doc-border: rgba(255, 255, 255, 0.10);
/* ── Cores de marca e semântica ── */
--color-primary: #3b82f6;
--color-primary-hover: #2563eb;
--color-primary-glow: rgba(59, 130, 246, 0.25);
--color-secondary: #6366f1;
--color-success: #34d399;
--color-warning: #fbbf24;
--color-danger: #f87171;
--color-info: #38bdf8;
--color-purple: #8b5cf6;
/* ── Tons de destaque (fundo suave + texto legível sobre ele) ── */
--tone-accent-bg: rgba(59, 130, 246, 0.16);
--tone-accent-fg: #93c5fd;
--tone-success-bg: rgba(16, 185, 129, 0.16);
--tone-success-fg: #6ee7b7;
--tone-warning-bg: rgba(245, 158, 11, 0.16);
--tone-warning-fg: #fcd34d;
--tone-danger-bg: rgba(239, 68, 68, 0.16);
--tone-danger-fg: #fca5a5;
--tone-info-bg: rgba(14, 165, 233, 0.16);
--tone-info-fg: #7dd3fc;
/* Roxo da plataforma: /admin e o selo do administrador. Nao e um tom
de estado como os acima — marca o que esta ACIMA das organizacoes. */
--tone-plataforma-bg: rgba(139, 92, 246, 0.16);
--tone-plataforma-fg: #c4b5fd;
--tone-plataforma-borda: rgba(139, 92, 246, 0.40);
--sobre-roxo: #0f172a;
/* ── Gradiente de cabeçalho dos relatórios ── */
--hero-from: #0f172a;
--hero-mid: #1e3a8a;
--hero-to: #3b82f6;
--hero-text: #ffffff;
--hero-text-muted: rgba(255, 255, 255, 0.78);
/* ── Texto ── */
--text-main: #f8fafc;
--text-muted: #94a3b8;
--text-strong: #ffffff;
--text-body: #cbd5e1;
/* ── Campos de formulário ── */
--input-bg: rgba(2, 6, 23, 0.6);
--input-color: #f8fafc;
--input-border: rgba(255, 255, 255, 0.12);
--input-focus-border: #3b82f6;
/* ── Cartões ── */
--card-bg: rgba(15, 23, 42, 0.55);
--card-border: rgba(255, 255, 255, 0.08);
--card-hover-border: rgba(59, 130, 246, 0.35);
/* ── Abas ── */
--tabs-bg: rgba(0, 0, 0, 0.35);
--tab-active-bg: #1e293b;
--tab-active-border: #3b82f6;
/* ── Assistência de IA ── */
--ia-text: #ddd6fe;
--ia-bg: rgba(139, 92, 246, 0.16);
--ia-bg-hover: rgba(139, 92, 246, 0.28);
--ia-border: rgba(167, 139, 250, 0.38);
/* ── Elevação, raio e movimento ── */
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
--shadow-md: 0 10px 30px rgba(0, 0, 0, 0.35);
--shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.5);
--radius-sm: 8px;
--radius-md: 14px;
--radius-lg: 20px;
--radius-full: 9999px;
--transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
/* ── Escala tipográfica e de espaçamento ──
Estes tokens não mudam entre os temas — ficam aqui porque tokens.css é o
único lugar que todas as folhas carregam, e porque a razão de existirem é a
mesma das cores: uma definição só.
Antes deles, as três folhas somavam 201 declarações `font-size` em 29
valores distintos, com meio-pixel espalhado — 10,5px, 11,5px, 12,5px,
13,5px, 14,5px, 16,5px. Nenhum desses valores foi decidido; cada um nasceu
de um ajuste que ficou bom naquela tela, e a soma deles é o motivo de dois
cartões iguais parecerem de sistemas diferentes.
Não saímos reescrevendo as 201: o risco é alto e o ganho é lento. A regra
é para daqui em diante — componente novo usa a escala, e o que for tocado
por outro motivo migra junto.
A escala tipográfica é a que o sistema já praticava nos valores redondos.
A de espaçamento segue passos de 4px, que é o que a maioria dos paddings
atuais já usa quando não tem meio-pixel. */
--texto-rotulo: 11px; /* rótulo em caixa alta, cabeçalho de tabela */
--texto-mini: 12px; /* legenda, contagem, texto de apoio */
--texto-corpo: 13px; /* corpo de tabela e de formulário */
--texto-leitura: 14px; /* texto corrido que alguém lê inteiro */
--texto-forte: 16px; /* título de cartão */
--texto-titulo: 18px; /* título de seção */
--texto-tela: 22px; /* título da tela */
--esp-1: 4px;
--esp-2: 8px;
--esp-3: 12px;
--esp-4: 16px;
--esp-5: 24px;
--esp-6: 32px;
/* Empilhamento. Eram três literais desconexos espalhados pelas folhas — 100
no cabeçalho, 10000 no painel de sessão e 20 no sumário da auditoria — e a
ordem entre eles era coincidência, não decisão. */
--z-sumario: 20;
--z-cabecalho: 100;
--z-sessao: 10000;
/* As duas famílias, escritas uma vez. Estavam repetidas literalmente em cerca
de 20 regras, e uma delas já divergia no fallback. */
--fonte-marca: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
--fonte-texto: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
/* A terceira família, só para documento — o painel do caso e o PDF dele. Ela
não é decoração: com uma sans só, o título de seção, o parágrafo e a cifra
saem com a mesma voz, e um documento de cinco seções lê-se como um
dashboard impresso. A serifa marca o que se LÊ; a sans segue marcando o
que se opera. Carregue-a apenas nos templates que a usam. */
--fonte-display: "Fraunces", Georgia, "Times New Roman", serif;
}
[data-theme="light"] {
--bg-gradient: radial-gradient(circle at 20% 0%, #f8fbff 0%, #eef3f9 45%, #e2e8f0 100%);
--surface-solid: #ffffff;
--surface-trans: rgba(255, 255, 255, 0.85);
--surface-sunken: #f1f5f9;
--glass-bg: rgba(255, 255, 255, 0.8);
--glass-border: rgba(15, 23, 42, 0.09);
--glass-glow: rgba(37, 99, 235, 0.06);
--realce-sutil: rgba(15, 23, 42, 0.05);
--realce-medio: rgba(15, 23, 42, 0.08);
--marcador-inativo: rgba(15, 23, 42, 0.22);
--doc-bg: #f8fafc;
--doc-surface: #ffffff;
--doc-border: #e2e8f0;
--color-primary: #2563eb;
--color-primary-hover: #1d4ed8;
--color-primary-glow: rgba(37, 99, 235, 0.18);
--color-secondary: #4338ca;
--color-success: #059669;
--color-warning: #d97706;
--color-danger: #dc2626;
--color-info: #0284c7;
--color-purple: #7c3aed;
--tone-accent-bg: #eff6ff;
--tone-accent-fg: #1d4ed8;
--tone-success-bg: #f0fdf4;
--tone-success-fg: #15803d;
--tone-warning-bg: #fef3c7;
--tone-warning-fg: #b45309;
--tone-danger-bg: #fef2f2;
--tone-danger-fg: #b91c1c;
--tone-info-bg: #e0f2fe;
--tone-info-fg: #0369a1;
--tone-plataforma-bg: #f5f3ff;
--tone-plataforma-fg: #6d28d9;
--tone-plataforma-borda: #ddd6fe;
--sobre-roxo: #ffffff;
--hero-from: #0f172a;
--hero-mid: #1e3a8a;
--hero-to: #3b82f6;
--hero-text: #ffffff;
--hero-text-muted: rgba(255, 255, 255, 0.82);
--text-main: #0f172a;
/* Era #64748b: 4,76:1 sobre o branco do cartão, mas 3,86:1 sobre o fim do
gradiente da página, onde vive boa parte do texto de 10 a 12px — abaixo
do mínimo de 4,5:1. Este valor é o mesmo que a folha de impressão já
usava, e sobe para 7,6:1 sobre branco sem mudar a hierarquia visual. */
--text-muted: #475569;
--text-strong: #0f172a;
--text-body: #334155;
--input-bg: rgba(255, 255, 255, 0.95);
--input-color: #0f172a;
--input-border: rgba(15, 23, 42, 0.14);
--input-focus-border: #2563eb;
--card-bg: rgba(255, 255, 255, 0.88);
--card-border: rgba(15, 23, 42, 0.08);
--card-hover-border: rgba(37, 99, 235, 0.35);
--tabs-bg: rgba(15, 23, 42, 0.05);
--tab-active-bg: #ffffff;
--tab-active-border: #2563eb;
--ia-text: #5b21b6;
--ia-bg: rgba(139, 92, 246, 0.08);
--ia-bg-hover: rgba(139, 92, 246, 0.16);
--ia-border: rgba(109, 40, 217, 0.25);
--shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.04);
--shadow-md: 0 10px 30px rgba(15, 23, 42, 0.06);
--shadow-lg: 0 20px 60px rgba(15, 23, 42, 0.08);
}
/* ══════════════════════════════════════════════════════════════════════════════
Apelidos de transição
──────────────────────────────────────────────────────────────────────────────
Nomes que existiam nos cinco :root locais dos templates, antes da unificação.
Mantidos para que as regras herdadas continuem válidas. Não use em código
novo — ao tocar numa regra, troque pelo nome canônico e apague o apelido daqui.
══════════════════════════════════════════════════════════════════════════════ */
:root {
--bg: var(--doc-bg);
--surface: var(--doc-surface);
--border: var(--doc-border);
--text: var(--text-main);
--primary: var(--color-primary);
--primary-hover: var(--color-primary-hover);
--primary-accent: var(--color-primary);
--primary-light: var(--tone-accent-bg);
--primary-dark: var(--color-primary-hover);
--primary-glow: var(--color-primary-glow);
--accent: var(--color-info);
--green: var(--color-success);
--amber: var(--color-warning);
--red: var(--color-danger);
--success: var(--color-success);
--warning: var(--color-warning);
--danger: var(--color-danger);
--bg-card: var(--surface-sunken);
--bg-highlight: var(--tone-accent-bg);
--radius: var(--radius-md);
--shadow: var(--shadow-sm);
--card-shadow: var(--shadow-md);
/* Escala neutra herdada do laudo executivo */
--slate-900: var(--text-strong);
--slate-800: var(--text-main);
--slate-700: var(--text-body);
--slate-600: var(--text-muted);
--slate-500: var(--text-muted);
--slate-200: var(--doc-border);
--slate-100: var(--surface-sunken);
--slate-50: var(--doc-bg);
}
/* ══════════════════════════════════════════════════════════════════════════════
Impressão — os laudos saem sempre em tema claro sobre papel branco,
independentemente do tema que o operador esteja usando na tela.
══════════════════════════════════════════════════════════════════════════════ */
@media print {
:root {
--bg-gradient: none;
--surface-solid: #ffffff;
--surface-trans: #ffffff;
--surface-sunken: #f1f5f9;
--glass-bg: #ffffff;
--glass-border: #e2e8f0;
--glass-glow: transparent;
--realce-sutil: #f1f5f9;
--realce-medio: #e2e8f0;
--marcador-inativo: #cbd5e1;
--doc-bg: #ffffff;
--doc-surface: #ffffff;
--doc-border: #cbd5e1;
--color-primary: #1d4ed8;
--color-primary-hover: #1e3a8a;
--color-secondary: #4338ca;
--color-success: #047857;
--color-warning: #b45309;
--color-danger: #b91c1c;
--color-info: #0369a1;
--color-purple: #6d28d9;
--tone-accent-bg: #eff6ff;
--tone-accent-fg: #1d4ed8;
--tone-success-bg: #f0fdf4;
--tone-success-fg: #15803d;
--tone-warning-bg: #fef3c7;
--tone-warning-fg: #b45309;
--tone-danger-bg: #fef2f2;
--tone-danger-fg: #b91c1c;
--tone-info-bg: #e0f2fe;
--tone-info-fg: #0369a1;
--tone-plataforma-bg: #f5f3ff;
--tone-plataforma-fg: #6d28d9;
--tone-plataforma-borda: #ddd6fe;
--sobre-roxo: #ffffff;
--text-main: #0f172a;
--text-muted: #475569;
--text-strong: #000000;
--text-body: #1e293b;
--card-bg: #ffffff;
--card-border: #cbd5e1;
--shadow-sm: none;
--shadow-md: none;
--shadow-lg: none;
}
body { background: #ffffff !important; }
}