/* ============================================================================= SiM Hub · Design Tokens Variáveis CSS para tema dark (default) e light. Mantém aderência ao design system GestaoChat / SiMco Healthcare Platform. ============================================================================= */ :root { /* ---------- Paleta Jade Refinado (default dark) ---------- */ --primary: #34D399; --primary-hover: #10B981; --primary-soft: rgba(52, 211, 153, 0.12); --primary-border: rgba(52, 211, 153, 0.35); /* ---------- Verde Clínica SiM ---------- */ --clinica-green: #1DD45F; --clinica-green-soft: rgba(29, 212, 95, 0.15); /* ---------- Gradiente SiMco (assinatura visual) ---------- */ --simco-gradient: linear-gradient(135deg, #E65C2E 0%, #903B96 50%, #4459A0 100%); --rainbow-gradient: linear-gradient(135deg, #E65C2E 0%, #903B96 25%, #4459A0 50%, #34D399 100%); /* ---------- Backgrounds ---------- */ --bg: #0B1220; --bg-elev-1: #111827; --bg-elev-2: #1F2937; --surface: #111827; --surface-hover: #1F2937; /* ---------- Bordas ---------- */ --border: rgba(148, 163, 184, 0.15); --border-strong: rgba(148, 163, 184, 0.28); /* ---------- Texto ---------- */ --text-main: #F1F5F9; --text-sub: #94A3B8; --text-muted: #64748B; --text-inverse: #0F172A; /* ---------- Status (dark mode default) ---------- Cada cor de status tem 4 papéis: --x → cor "cheia" (borda forte, ícone preenchido, base de chip) --x-text → cor de TEXTO sobre fundo soft (precisa contrastar com o fundo) --x-soft → fundo translúcido sutil (chips, banners) --x-border → borda translúcida sobre o soft No DARK as variantes de texto são MAIS CLARAS (ex: amber-300) pra serem legíveis sobre fundo escuro + soft. No LIGHT (abaixo) são MAIS ESCURAS. */ --success: #34D399; --success-text: #6EE7B7; --success-soft: rgba(52, 211, 153, 0.18); --success-border: rgba(52, 211, 153, 0.40); --danger: #F87171; --danger-text: #FCA5A5; --danger-soft: rgba(248, 113, 113, 0.16); --danger-border: rgba(248, 113, 113, 0.40); --warning: #FBBF24; --warning-text: #FCD34D; --warning-soft: rgba(251, 191, 36, 0.18); --warning-border: rgba(251, 191, 36, 0.45); --info: #60A5FA; --info-text: #93C5FD; --info-soft: rgba(96, 165, 250, 0.18); --info-border: rgba(96, 165, 250, 0.40); /* ---------- Tipografia ---------- */ --font-display: 'Space Grotesk', system-ui, -apple-system, sans-serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* ---------- Tamanhos / Espaçamento ---------- */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-pill: 999px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; /* ---------- Sombras ---------- */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.35); --shadow-glow: 0 0 24px rgba(52, 211, 153, 0.25); /* ---------- Z-index ---------- */ --z-base: 1; --z-dropdown: 100; --z-modal: 99998; /* v0.14.27.6: acima de drawers (9990), abaixo do toast (99999) */ --z-toast: 99999; /* v0.14.27.1: acima de drawers e modais */ --z-loader: 9999; /* ---------- Transições ---------- */ --transition-fast: 120ms ease; --transition-base: 200ms ease; --transition-slow: 360ms cubic-bezier(0.16, 1, 0.3, 1); /* ========================================================================= TIPOGRAFIA FLUIDA (clamp()) Escala automática entre 1024px e 1920px sem media queries. Fórmula: clamp(min, preferred, max) - min: valor em laptop pequeno (1280px) - preferred: XXvw — cresce com a viewport - max: valor em telas grandes (1920px+) ========================================================================= */ /* Display (títulos grandes — heróis, login, hero da home) */ --fs-display-xl: clamp(1.6rem, 1.4vw + 0.9rem, 2.5rem); /* 25.6px → 40px */ --fs-display-lg: clamp(1.3rem, 1vw + 0.85rem, 1.85rem); /* 20.8px → 29.6px */ --fs-display-md: clamp(1.05rem, 0.5vw + 0.85rem, 1.35rem); /* 16.8px → 21.6px */ /* Headings (cabeçalhos de seção, nomes de paciente) */ --fs-heading-lg: clamp(0.95rem, 0.3vw + 0.85rem, 1.15rem); /* 15.2px → 18.4px */ --fs-heading-md: clamp(0.85rem, 0.2vw + 0.8rem, 1rem); /* 13.6px → 16px */ --fs-heading-sm: clamp(0.78rem, 0.15vw + 0.74rem, 0.9rem); /* 12.5px → 14.4px */ /* Body (texto comum) */ --fs-body: clamp(0.82rem, 0.2vw + 0.76rem, 0.95rem); /* 13.1px → 15.2px */ --fs-body-sm: clamp(0.72rem, 0.15vw + 0.68rem, 0.85rem); /* 11.5px → 13.6px */ --fs-body-xs: clamp(0.64rem, 0.1vw + 0.62rem, 0.74rem); /* 10.2px → 11.8px */ /* Labels (UPPERCASE pequenos, mono pequeno) */ --fs-label: clamp(0.6rem, 0.1vw + 0.58rem, 0.7rem); /* 9.6px → 11.2px */ --fs-label-xs: clamp(0.55rem, 0.08vw + 0.53rem, 0.62rem); /* 8.8px → 9.9px */ /* ESPAÇAMENTOS FLUIDOS — proporcionais à viewport */ --sp-card-sm: clamp(8px, 0.6vw + 4px, 14px); /* 8px → 14px */ --sp-card-md: clamp(12px, 0.8vw + 6px, 20px); /* 12px → 20px */ --sp-card-lg: clamp(16px, 1vw + 10px, 28px); /* 16px → 28px */ --sp-section: clamp(20px, 1.4vw + 12px, 40px); /* 20px → 40px */ /* AVATARES E ÍCONES FLUIDOS */ --avatar-sm: clamp(28px, 1.5vw + 18px, 36px); /* 28px → 36px */ --avatar-md: clamp(36px, 2vw + 20px, 46px); /* 36px → 46px */ --avatar-lg: clamp(44px, 2.5vw + 24px, 56px); /* 44px → 56px */ --icon-sm: clamp(14px, 0.8vw + 8px, 18px); /* 14px → 18px */ --icon-md: clamp(18px, 1vw + 10px, 22px); /* 18px → 22px */ /* ALTURAS DE INPUT/BOTÃO */ --control-h-sm: clamp(32px, 1.5vw + 22px, 40px); /* 32px → 40px */ --control-h-md: clamp(40px, 2vw + 28px, 52px); /* 40px → 52px */ --control-h-lg: clamp(48px, 2.5vw + 32px, 60px); /* 48px → 60px */ /* ---------- ALIASES DE COMPATIBILIDADE (v0.14.21.8) ---------- O módulo BKO (bko.css) foi escrito com nomes de variáveis que nunca chegaram a ser definidos aqui — provavelmente herdou de outra versão do design system. Em vez de renomear ~125 ocorrências espalhadas pelo bko.css, mapeamos aqui os nomes "antigos" pros "novos". Como esses aliases viram `var(...)` aninhado, eles seguem o tema: quando o body.light-mode redefine --bg, --bg-elev-1, --border, etc., os aliases automaticamente apontam pros valores light também — sem precisar duplicar nada no bloco de baixo. */ --bg-primary: var(--bg); --bg-secondary: var(--bg-elev-1); --text-primary: var(--text-main); --text-secondary: var(--text-sub); --text-tertiary: var(--text-muted); --border-color: var(--border); --accent: var(--primary); } /* ============================================================================= TEMA LIGHT (toggle via body.light-mode) ============================================================================= */ body.light-mode { --primary: #059669; --primary-hover: #047857; --primary-soft: rgba(5, 150, 105, 0.10); --primary-border: rgba(5, 150, 105, 0.30); --bg: #F1F5F9; --bg-elev-1: #FFFFFF; --bg-elev-2: #F8FAFC; --surface: #FFFFFF; --surface-hover: #F1F5F9; --border: rgba(15, 23, 42, 0.08); --border-strong: rgba(15, 23, 42, 0.16); --text-main: #0F172A; --text-sub: #475569; --text-muted: #94A3B8; --text-inverse: #FFFFFF; /* Status (light mode) — variantes de texto MAIS ESCURAS pra contraste em fundo claro. Espelho do bloco do :root, mas com tons puxados pro 700/800. */ --success: #059669; --success-text: #047857; --success-soft: rgba(5, 150, 105, 0.10); --success-border: rgba(5, 150, 105, 0.30); --danger: #DC2626; --danger-text: #B91C1C; --danger-soft: rgba(220, 38, 38, 0.10); --danger-border: rgba(220, 38, 38, 0.30); --warning: #D97706; --warning-text: #B45309; --warning-soft: rgba(217, 119, 6, 0.10); --warning-border: rgba(217, 119, 6, 0.30); --info: #2563EB; --info-text: #1D4ED8; --info-soft: rgba(37, 99, 235, 0.10); --info-border: rgba(37, 99, 235, 0.30); --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06); --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08); --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12); --shadow-glow: 0 0 24px rgba(5, 150, 105, 0.20); /* v0.14.21.9: redefine os aliases de compatibilidade no light-mode com valores HARDCODED pra eliminar qualquer cascade ambíguo. Antes, os aliases ficavam no :root apontando pra var() aninhado, mas o módulo BKO no light-mode aparecia com valores apagados — texto cinza sobre fundo claro, ilegível. Definir explicitamente aqui garante que a cor consumida é a do tema light, sem depender de resolução em cadeia. */ --bg-primary: #F1F5F9; /* = --bg */ --bg-secondary: #FFFFFF; /* = --bg-elev-1 (sidebar/cards) */ --text-primary: #0F172A; /* = --text-main, texto principal */ --text-secondary: #475569; /* = --text-sub */ --text-tertiary: #64748B; /* MAIS ESCURO que --text-muted (#94A3B8) — pro light, queremos labels visíveis (não apagados) */ --border-color: rgba(15, 23, 42, 0.08); --accent: #059669; } /* ============================================================================= Troca de tema INSTANTÂNEA — desliga transições só no instante do switch. Sem isso, cor/fundo de alguns elementos mudam com atraso (efeito "delay") enquanto o texto muda na hora. Aplicada por Theme.apply() via classe no . ============================================================================= */ html.theme-trocando, html.theme-trocando *, html.theme-trocando *::before, html.theme-trocando *::after { transition: none !important; }