/* ============================================================ PBI Monitor — Design tokens (única fonte de variáveis CSS) Tema via [data-theme="dark"|"light"] em . ============================================================ */ :root, [data-theme="dark"] { /* ============================================================ Bootstrap 5.3 — overrides de marca via variáveis nativas. Mapeiam --bs-* para tokens do projeto, eliminando a necessidade de redefinir classes Bootstrap (.btn-primary, .text-primary, etc.). Não tocar --bs-modal-zindex / --bs-backdrop-zindex (governança §8). ============================================================ */ --bs-primary: var(--color-primary, #E0268F); --bs-primary-rgb: 224, 38, 143; --bs-success: var(--color-success, #27AE60); --bs-success-rgb: 39, 174, 96; --bs-danger: var(--color-danger, #E74C3C); --bs-danger-rgb: 231, 76, 60; --bs-warning: var(--color-warning, #F39C12); --bs-warning-rgb: 243, 156, 18; --bs-info: var(--color-info, #00bcd4); --bs-info-rgb: 0, 188, 212; --bs-body-bg: var(--bg-body-start, #0f172a); --bs-body-color: var(--text-primary, #e2e8f0); --bs-secondary-color: var(--text-secondary, #94a3b8); --bs-border-color: var(--border-medium, rgba(255, 255, 255, 0.1)); --bs-border-radius: var(--radius-md, 8px); --bs-border-radius-sm: var(--radius-sm, 3px); --bs-border-radius-lg: var(--radius-lg, 12px); --bs-link-color: var(--color-primary, #E0268F); --bs-link-hover-color: var(--color-primary-light, #ec5ba9); --bs-font-sans-serif: var(--font-family, 'Inter', sans-serif); /* Bootstrap .table — vence sem !important via variáveis nativas da própria lib. Bootstrap aplica var(--bs-table-color/-bg) em `.table > :not(caption) > * > *` (especificidade 0,1,5) que nossas regras `.table tbody td` (0,1,3) jamais venceriam sem !important. Aqui sobrescrevemos a fonte. */ --bs-table-color: var(--text-gray-3, #ecf0f1); --bs-table-bg: transparent; --bs-table-border-color: rgba(var(--brand-rgb, 76, 175, 80), 0.15); --bs-table-striped-color: var(--text-gray-3, #ecf0f1); --bs-table-striped-bg: rgba(255, 255, 255, 0.03); --bs-table-active-color: var(--text-gray-3, #ecf0f1); --bs-table-active-bg: rgba(var(--brand-rgb, 76, 175, 80), 0.12); --bs-table-hover-color: var(--text-gray-3, #ecf0f1); --bs-table-hover-bg: rgba(var(--brand-rgb, 76, 175, 80), 0.08); /* Bootstrap .tooltip — overrides aplicados em components/modals.css no seletor `body .tooltip` (Bootstrap re-declara as variáveis dentro de .tooltip {}, então definir em :root é ignorado por especificidade). */ /* ---- Marca WifiMaxx (gradiente magenta → laranja → amarelo) ---- Sempre aplicada como gradiente nas superfícies de marca. */ --wmx-magenta: #E0268F; --wmx-orange: #F05A28; --wmx-yellow: #F9B234; --wmx-magenta-rgb: 224, 38, 143; --wmx-orange-rgb: 240, 90, 40; --wmx-yellow-rgb: 249, 178, 52; --wmx-gradient: linear-gradient(120deg, #E0268F 0%, #F05A28 55%, #F9B234 100%); --wmx-gradient-2: linear-gradient(135deg, #E0268F 0%, #F05A28 100%); --wmx-gradient-soft: linear-gradient(120deg, rgba(224,38,143,0.16), rgba(240,90,40,0.12), rgba(249,178,52,0.12)); --shadow-brand-glow: 0 10px 30px rgba(240, 90, 40, 0.40); /* ---- Status de monitoramento (7 estados — cards glass tingidos) ---- */ --status-online: #27AE60; --status-online-rgb: 39, 174, 96; --status-inativo: #00BCD4; --status-inativo-rgb: 0, 188, 212; --status-atencao: #F9B234; --status-atencao-rgb: 249, 178, 52; --status-alerta: #F05A28; --status-alerta-rgb: 240, 90, 40; --status-offline: #E74C3C; --status-offline-rgb: 231, 76, 60; --status-manut: #8b8fa3; --status-manut-rgb: 139, 143, 163; --status-diverg: #a855f7; --status-diverg-rgb: 168, 85, 247; /* --- Cores principais (PRIMARY = magenta da marca) --- */ --color-primary: #E0268F; --color-primary-dark: #c01e79; --color-primary-darker: #9c1763; --color-primary-light: #ec5ba9; --color-primary-bg: rgba(224, 38, 143, 0.18); --color-success: #27AE60; --color-success-bg: rgba(39, 174, 96, 0.18); --color-warning: #F39C12; --color-warning-bg: rgba(243, 156, 18, 0.18); --color-danger: #E74C3C; --color-danger-bg: rgba(231, 76, 60, 0.18); --color-danger-soft: #ef7367; --color-danger-soft-hover: #ff8a7e; --color-info: #00bcd4; --color-info-bg: rgba(0, 188, 212, 0.2); --color-maintenance: var(--color-warning); --color-maintenance-bg: var(--color-warning-bg); --color-divergence: var(--color-danger); --color-map-purple: #8a2be2; --tone-bs-success: #28a745; --tone-bs-danger: #dc3545; --tone-bs-warning: #ffc107; --tone-bs-secondary: #6c757d; --tone-bs-orange: #ff7e14; /* --- Accent UI (busca / dropdowns) — rebrand: azul Bootstrap → magenta WifiMaxx --- */ --color-ui-accent: #E0268F; --color-ui-accent-dark: #c01e79; --color-ui-accent-muted: rgba(224, 38, 143, 0.35); --color-ui-accent-soft: rgba(224, 38, 143, 0.08); --color-teal: #20c997; /* --- Glass dashboard (cartões claros sobre fundo escuro) --- */ /* Overlay glass do dashboard — sincronizado com wmx-tokens do protótipo. Antes 0.15/0.2/0.35 (branco), que lavava os cards sobre o fundo ameixa. */ --dash-glass-bg: rgba(255, 255, 255, 0.04); --dash-glass-bg-soft: rgba(255, 255, 255, 0.03); --dash-glass-border: rgba(255, 255, 255, 0.10); --dash-glass-border-strong: rgba(255, 255, 255, 0.18); --dash-glass-shadow: 0 8px 28px rgba(0, 0, 0, 0.30); --dash-glass-shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.38); --dash-glass-blur: 15px; --dash-glass-line-fade: linear-gradient(90deg, transparent, var(--dash-glass-border-strong), transparent); --glass-motion: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); --glass-hover-lift: translateY(-2px); --glass-hover-scale: 1.02; --radius-glass-card: 20px; --radius-glass-panel: 24px; --radius-glass-input: 16px; --glass-tone-success-bg: rgba(40, 167, 69, 0.2); --glass-tone-warning-bg: rgba(255, 193, 7, 0.2); --glass-tone-danger-bg: rgba(220, 53, 69, 0.2); --glass-tone-info-bg: rgba(108, 117, 125, 0.2); --glass-tone-maintenance-bg: rgba(255, 152, 0, 0.2); --z-search-layer: 1000; --z-search-dropdown: 1001; --z-search-toast: 2000; /* --- Fundos (premium dark com leve tom ameixa p/ casar com magenta) --- */ --bg-body-start: #17131f; --bg-body-end: #100d17; --bg-surface: rgba(26, 21, 36, 0.98); --bg-elevated: rgba(18, 14, 26, 0.98); --bg-card-start: rgba(33, 26, 46, 0.92); --bg-card-end: rgba(26, 20, 38, 0.92); --bg-card-alt: rgba(40, 32, 56, 0.55); --bg-chart-card: rgba(33, 26, 46, 0.5); --bg-hover: rgba(224, 38, 143, 0.06); --bg-primary-subtle: rgba(224, 38, 143, 0.10); --bg-hover-light: rgba(255, 255, 255, 0.05); --bg-input: rgba(18, 14, 26, 0.85); --bg-input-disabled: rgba(18, 14, 26, 0.5); --bg-table-head: rgba(18, 14, 26, 0.9); --bg-modal-start: #1c1730; --bg-modal-end: #15111f; --bg-switch-off: #4a4358; --bg-scrollbar-track: rgba(18, 14, 26, 0.5); --bg-scrollbar-thumb: rgba(224, 38, 143, 0.35); --bg-scrollbar-thumb-hover: rgba(224, 38, 143, 0.55); --bg-modal-check: #334155; /* --- Texto --- */ --text-primary: #e2e8f0; /* Modo escuro: texto secundário em BRANCO (antes #94a3b8) — a pedido, para maior legibilidade. O negrito é aplicado por componente abaixo (.text-secondary) e em base.css. Light theme redefine este token. */ --text-secondary: #ffffff; --text-muted: #64748b; --text-muted-alt: #bdc3c7; --text-inverse: #ffffff; --text-heading: var(--text-inverse); --text-empty: #475569; --text-charcoal: #212529; /* --- Fundos --- */ /* Glass ameixa (sincronizado com wmx-tokens do protótipo). Antes era ardósia rgba(30,41,59,.5), que deixava painéis/toolbar azulados e mais claros que o visual novo. */ --glass-bg: rgba(40, 32, 56, 0.5); --glass-bg-strong: rgba(26, 35, 126, 0.95); --glass-border: rgba(255, 255, 255, 0.06); --glass-border-strong: rgba(255, 255, 255, 0.12); --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); --glass-shadow-hover: 0 4px 15px rgba(224, 38, 143, 0.4); --glass-blur: 10px; --glass-blur-strong: 20px; /* --- Espaçamento --- */ --space-2xs: 0.25rem; --space-xs: 0.35rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.25rem; --space-xl: 1.5rem; --space-2xl: 2rem; --space-3xl: 3rem; /* --- Bordas --- */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 18px; --radius-2xl: 22px; --radius-full: 9999px; --border-light: rgba(255, 255, 255, 0.05); --border-medium: rgba(255, 255, 255, 0.1); --border-strong: rgba(224, 38, 143, 0.22); --border-strong-hover: rgba(224, 38, 143, 0.5); --border-accent: rgba(224, 38, 143, 0.3); --border-navbar: rgba(224, 38, 143, 0.3); --border-hamburger: rgba(255, 255, 255, 0.18); --border-table: rgba(224, 38, 143, 0.18); --border-modal: rgba(224, 38, 143, 0.2); --border-faint: rgba(255, 255, 255, 0.08); --size-icon-empty: 3rem; /* --- Sombras --- */ --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.2); --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.3); --shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.4); --shadow-navbar: var(--shadow-lg); --shadow-sidebar: 8px 0 30px rgba(0, 0, 0, 0.5); --shadow-sidebar-inverse: -8px 0 30px rgba(0, 0, 0, 0.5); --shadow-glow-green: 0 4px 15px rgba(224, 38, 143, 0.4); --shadow-text-heading: 0 2px 10px rgba(0, 0, 0, 0.3); --shadow-focus: 0 0 0 0.2rem rgba(224, 38, 143, 0.22); /* --- Tipografia --- */ --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: ui-monospace, 'Cascadia Code', 'Segoe UI Mono', monospace; --text-xs: 0.7rem; --text-sm: 0.8rem; --text-base: 0.85rem; --text-md: 0.95rem; --text-lg: 1rem; --text-xl: 1.05rem; --text-2xl: 1.2rem; --text-3xl: 1.35rem; --text-display: 2rem; --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; /* letter-spacing (labels/pills maiúsculos do novo design system) */ --ls-label: 0.04em; --ls-pill: 0.05em; /* --- Z-index (Bootstrap modal/backdrop: não sobrescrever) --- */ --z-content: 1; --z-sticky: 1020; --z-navbar: 1030; --z-navbar-btn: 1031; --z-sidebar-overlay: 1040; --z-sidebar: 1045; --z-modal-backdrop: 1050; --z-modal: 1055; --z-toast: 1090; /* --- Transições --- */ --transition-fast: 0.2s ease; --transition-base: 0.3s ease; --transition-slow: 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* --- Navbar / overlay --- */ --overlay-scrim: rgba(0, 0, 0, 0.5); --navbar-gradient-start: rgba(26, 35, 126, 0.95); --navbar-gradient-end: rgba(15, 23, 42, 0.95); --placeholder-opacity: rgba(255, 255, 255, 0.35); /* --- Sidebar width / navbar / touch (layout do shell) --- */ --sidebar-width: 300px; --navbar-height: 68px; --touch-min: 44px; --text-sidebar-section: #9a92a8; /* --- Legado style.css / shells claros --- */ --legacy-header-indigo: #E0268F; /* rebrand: indigo legado → magenta WifiMaxx */ --legacy-body-bg-light: #f3f6fd; --legacy-slate-text: #334155; --legacy-card-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); --legacy-radius-shell: 12px; --color-info-bootstrap: #17a2b8; --text-bootstrap-secondary: #495057; /* --- Mobile (mobile-optimizations) --- */ --mobile-header-height: 60px; --mobile-padding: 12px; --mobile-margin: 8px; --touch-target-size: 44px; --mobile-font-size: 14px; --mobile-small-font: 12px; /* --- Palette de status (UI indicators, paleta Tailwind 500/400) Usadas em pages/chamados, dashboard, watchlist para gradientes de status/nível. Convivem com --color-success/--color-warning/etc. (que são as cores da marca, mais saturadas). --- */ --palette-blue-500: #3b82f6; --palette-blue-400: #60a5fa; --palette-yellow-500: #eab308; --palette-yellow-400: #facc15; --palette-amber-600: #d97706; --palette-amber-500: #f59e0b; --palette-amber-400: #fbbf24; --palette-orange-500: #f97316; --palette-orange-400: #fb923c; --palette-orange-amber: #f39c12; --palette-red-600: #dc2626; --palette-red-500: #ef4444; --palette-red-400: #f87171; --palette-purple-500: #8b5cf6; --palette-purple-400: #a78bfa; --palette-violet-700: #764ba2; --palette-violet-500: #a855f7; --palette-violet-400: #c084fc; --palette-indigo-400: #667eea; --palette-green-600: #16a34a; --palette-green-500: #22c55e; --palette-green-400: #4ade80; --palette-cyan-400: #22d3ee; --palette-gray-500: #6b7280; --palette-gray-400: #9ca3af; --palette-blue-info: #2196f3; --palette-blue-info-light: #90caf9; /* Slate scale (cool gray) — para modais escuros e overlays */ --bg-slate-800: #1e293b; --bg-slate-700: #334155; --bg-slate-600: #475569; --bg-slate-500: #64748b; --text-slate-100: #f1f5f9; --text-slate-50: #f8fafc; --bg-slate-300: #cbd5e1; --bg-slate-200: #e2e8f0; /* --- Texto cinza (legado, vários tons herdados do design original) --- */ --text-gray-1: #c9d1d9; --text-gray-2: #d1d9e0; --text-gray-3: #ecf0f1; --text-gray-4: #bdc3c7; --text-gray-5: #b8c0cc; --text-gray-6: #e8eaed; /* --- Brand RGB triplet (para gradientes com alpha arbitrária) --- */ --brand-rgb: 224, 38, 143; /* = --color-primary (magenta WifiMaxx) */ --card-dark-rgb-start: 33, 26, 46; /* = --bg-card-start (sem alpha) */ --card-dark-rgb-end: 26, 20, 38; /* = --bg-card-end (sem alpha) */ /* --- Gradientes de card reutilizáveis --- */ --gradient-card-strong: linear-gradient(135deg, rgba(var(--card-dark-rgb-start), 0.95), rgba(var(--card-dark-rgb-end), 0.95)); --gradient-card-elevated: linear-gradient(135deg, rgba(var(--card-dark-rgb-start), 0.98), rgba(var(--card-dark-rgb-end), 0.98)); /* --- Gradientes de form-control / upload (asbuilt, chamados, estoque) --- */ --bg-form-control-gradient: linear-gradient(135deg, rgba(50, 70, 100, 0.5), rgba(40, 60, 90, 0.5)); --bg-form-control-gradient-soft: linear-gradient(135deg, rgba(50, 70, 100, 0.4), rgba(40, 60, 90, 0.4)); --bg-form-control-focus: linear-gradient(135deg, rgba(var(--brand-rgb), 0.2), rgba(240, 90, 40, 0.18)); --bg-readonly-overlay: rgba(var(--card-dark-rgb-start), 0.5); /* --- Cores de gradiente reutilizadas em botões/badges/alerts --- */ --color-primary-soft: #ec5ba9; /* magenta claro usado em hover/gradient */ --color-success-soft: #66BB6A; --color-warning-soft: #FFD54F; --color-danger-soft-light: #EF5350; --color-info-soft: #42A5F5; --color-info-soft-light: #64B5F6; --palette-gray-mid: #757575; --palette-gray-light: #9E9E9E; --palette-gray-disabled: #95a5a6; --alert-info-text: #B3E5FC; --alert-success-text: #C8E6C9; --alert-danger-text: #FFCDD2; /* --- Material Design (uso pontual em status badges e tabelas) --- */ --color-material-orange: #FF9800; --color-material-orange-rgb: 255, 152, 0; --color-material-purple: #9C27B0; --color-material-purple-rgb: 156, 39, 176; --color-material-blue: #1976D2; --color-material-red: #D32F2F; --color-danger-soft-bg: #ef9a9a; --color-danger-soft-mid: #ef5350; --palette-blue-info-rgb: 33, 150, 243; --bs-danger-rgb-literal: 244, 67, 54; /* --- Scrollbar tema claro (table-responsive em mobile) --- */ --scrollbar-light-track: #f1f1f1; --scrollbar-light-thumb: #c1c1c1; --scrollbar-light-thumb-hover: #a8a8a8; /* --- Cinzas neutros (dashboard, filtros, modais com tema claro) --- */ --text-slate-900: #1f2937; --text-slate-700: #374151; --text-slate-800-alt: #2c3e50; --text-slate-200-alt: #e5e7eb; /* --- Bootstrap-like grays (modais com tema claro embutido) --- */ --bg-bootstrap-50: #f8f9fa; --bg-bootstrap-100: #f1f3f4; --border-bootstrap-100: #e9ecef; /* --- Material amber (modal #verificacaoEletricaModal) --- */ --bg-amber-100: #fef3c7; /* --- DarkGoldenrod (cor de ícone de aviso em tema claro — contraste maior que amarelo Bootstrap sobre fundo claro) --- */ --color-warning-dark: #b8860b; /* --- Material blue 50 (info backgrounds tema claro) --- */ --bg-blue-50: #e3f2fd; /* --- Light body gradient (watchlist, dashboard tema claro) --- */ --bg-light-body-start: #f5f7fa; --bg-light-body-end: #e8ecf0; /* --- Legacy indigo & teal-green (RAT header e signature buttons) --- */ --legacy-indigo-darker: #c01e79; /* rebrand → magenta escuro */ --color-teal-700: #16a085; --color-green-600-alt: #27ae60; --legacy-indigo-deep: #9c1763; /* rebrand → magenta mais escuro */ /* --- Material grays (reports.css gradient strips, badges) --- */ --palette-gray-200-alt: #BDBDBD; --palette-gray-700: #424242; --palette-gray-700-soft: #616161; /* --- Material purple variant (reports.css "map" report) --- */ --color-purple-deep: #9932CC; /* --- Flat UI accents (campanhas.css) --- */ --color-flat-blue: #3498db; --color-flat-green: #2ecc71; --color-flat-green-dark: #1e8449; --color-green-dark: #1a5c1f; --color-green-soft-light:#81C784; /* --- Orange (cco-modal botão export PPTX) --- */ --color-orange-700: #c2410c; --color-orange-600: #ea580c; /* --- Legacy indigo escuro (login, change-password headers) --- */ --legacy-indigo-darkest: #17131f; /* rebrand → ameixa escuro (headers auth) */ --legacy-indigo-mid: #1c1730; /* rebrand → ameixa */ /* --- Bootstrap secondary gradient stops (change-password) --- */ --bs-secondary-light: #6c757d; --bs-secondary-dark: #495057; --bs-secondary-light-2: #5a6268; --bs-secondary-dark-2: #343a40; /* --- Alert info/danger tema claro (change-password feedback) --- */ --alert-light-info-bg: #d1ecf1; --alert-light-info-bg-2: #bee5eb; --alert-light-info-text: #0c5460; --alert-light-info-border: #b6d4db; --alert-light-danger-bg: #f8d7da; --alert-light-danger-bg-2: #f5c6cb; --alert-light-danger-text: #721c24; --alert-light-danger-border: #f5c6cb; /* --- Coral (change-password error/danger spotlight) --- */ --color-coral: #ff6b6b; --color-coral-dark: #ee5a24; /* --- Material blue tons darker (user_manager) --- */ --color-material-blue-soft: #0288D1; --color-material-blue-deep: #01579B; /* --- Bootstrap puro (estoque_chips badges) --- */ --bs-cyan-info: #0dcaf0; --bs-green-success: #198754; --bs-red-danger: #dc3545; --color-red-vivid: #e3262f; --color-purple-vivid: #660099; /* --- NOC cores (extras quando --noc-* não cobre) --- */ --noc-panel-bg-literal: #0d1321; --noc-cyan-literal: #00d4ff; --noc-text-literal: #c8d6e5; /* --- Cliente chamados (status palette com fundo claro) --- */ --status-amber-vivid: #ffaa00; --status-cyan-vivid: #00d4ff; --status-violet-vivid: #a855f7; --status-green-vivid: #00ff88; /* --- Strength meter (first-login.css) --- */ --color-orange-bs: #fd7e14; /* --- Tabela em tema claro (estoque, listagens com fundo claro) --- */ --table-light-bg: rgba(255, 255, 255, 0.95); --table-light-text: #1a1a1a; --table-light-text-strong: #111111; --table-light-text-muted: #555555; --table-light-text-muted-2: #dce1e8; --table-light-head-bg: linear-gradient(90deg, #E8F5E9, #C8E6C9); --table-light-row-border: rgba(0, 0, 0, 0.08); } /* Bootstrap .tooltip — Bootstrap 5.3 re-declara --bs-tooltip-* dentro de .tooltip{} (color = var(--bs-body-bg), bg = var(--bs-emphasis-color)). No nosso tema isso resulta em texto escuro sobre fundo escuro (invisível). Sobrescrevemos no mesmo seletor para vencer por ordem de cascata. Tema-agnostic: sempre alto contraste. `body .tooltip` (0,1,1) vence `.tooltip` (0,1,0) Bootstrap. */ body .tooltip { --bs-tooltip-color: var(--text-inverse); --bs-tooltip-bg: rgba(15, 23, 42, 0.95); --bs-tooltip-opacity: 1; --bs-tooltip-border-radius: var(--radius-md, 8px); --bs-tooltip-font-size: var(--text-sm, 0.8rem); --bs-tooltip-padding-x: var(--space-md, 1rem); --bs-tooltip-padding-y: var(--space-sm, 0.5rem); } [data-theme="light"] { /* ============================================================ Tema CLARO — inversão completa dos tokens do dark. Mantém: - cores da marca (--color-primary, --color-success, etc.) - palette-* (gradientes de status são iguais) - --bs-* derivados: herdam automaticamente via var() - tipografia, espaçamento, raios, transições, z-index Inverte: - fundos (escuro → claro) - textos (claro → escuro) - bordas (rgba branco → rgba preto) - glassmorphism (vidro escuro → vidro claro) - sombras (preto forte → preto suave) - gradientes de card / form ============================================================ */ /* --- Backgrounds: invertidos para fundo claro (tom lavanda p/ casar com magenta) --- */ --bg-body-start: #f6f4f9; --bg-body-end: #ece8f2; --bg-surface: rgba(255, 255, 255, 0.98); --bg-elevated: rgba(250, 248, 252, 0.98); --bg-card-start: rgba(255, 255, 255, 0.96); --bg-card-end: rgba(248, 245, 251, 0.96); --bg-card-alt: rgba(249, 247, 252, 0.7); --bg-chart-card: rgba(250, 248, 252, 0.7); --bg-hover: rgba(224, 38, 143, 0.07); --bg-primary-subtle: rgba(224, 38, 143, 0.10); --bg-hover-light: rgba(23, 19, 31, 0.04); --bg-input: rgba(255, 255, 255, 0.96); --bg-input-disabled: rgba(241, 238, 246, 0.7); --bg-table-head: rgba(245, 242, 250, 0.95); --bg-modal-start: #ffffff; --bg-modal-end: #faf8fc; --bg-modal-check: #cbc6d4; --bg-switch-off: #cbc6d4; --bg-scrollbar-track: rgba(23, 19, 31, 0.06); --bg-scrollbar-thumb: rgba(224, 38, 143, 0.4); --bg-scrollbar-thumb-hover: rgba(224, 38, 143, 0.6); /* --- Texto: claro → escuro --- */ --text-primary: #0f172a; --text-secondary: #475569; --text-muted: #64748b; --text-muted-alt: #475569; --text-inverse: #ffffff; /* mantém branco — usado em botões coloridos */ --text-heading: #0f172a; --text-empty: #94a3b8; --text-sidebar-section: #837b91; /* --text-charcoal permanece #212529 (correto em ambos os temas) */ /* --- Texto cinza (legado): invertido para legibilidade em fundo claro --- */ --text-gray-1: #475569; --text-gray-2: #334155; --text-gray-3: #1e293b; --text-gray-4: #64748b; --text-gray-5: #64748b; --text-gray-6: #334155; /* --- Slate (cool gray) — para overlays e contraste em tema claro --- */ --bg-slate-800: #f1f5f9; --bg-slate-700: #e2e8f0; --bg-slate-600: #cbd5e1; --bg-slate-500: #94a3b8; --bg-slate-300: #64748b; --bg-slate-200: #475569; --text-slate-100: #1e293b; --text-slate-50: #0f172a; /* --- Bordas: rgba branco → rgba escuro --- */ --border-light: rgba(23, 19, 31, 0.06); --border-medium: rgba(23, 19, 31, 0.12); --border-strong: rgba(224, 38, 143, 0.32); --border-strong-hover: rgba(224, 38, 143, 0.6); --border-accent: rgba(224, 38, 143, 0.4); --border-navbar: rgba(224, 38, 143, 0.4); --border-hamburger: rgba(23, 19, 31, 0.22); --border-table: rgba(224, 38, 143, 0.25); --border-modal: rgba(224, 38, 143, 0.3); --border-faint: rgba(23, 19, 31, 0.08); /* --- Glassmorphism: vidro escuro → vidro claro --- */ --glass-bg: rgba(255, 255, 255, 0.55); --glass-bg-strong: rgba(255, 255, 255, 0.92); --glass-border: rgba(15, 23, 42, 0.06); --glass-border-strong: rgba(15, 23, 42, 0.12); --glass-shadow: 0 8px 32px rgba(23, 19, 31, 0.08); --glass-shadow-hover: 0 4px 15px rgba(224, 38, 143, 0.25); /* --- Dash-glass (cards de status no dashboard): fundo claro --- */ --dash-glass-bg: rgba(15, 23, 42, 0.04); --dash-glass-bg-soft: rgba(15, 23, 42, 0.02); --dash-glass-border: rgba(15, 23, 42, 0.1); --dash-glass-border-strong: rgba(15, 23, 42, 0.18); --dash-glass-shadow: 0 8px 32px rgba(15, 23, 42, 0.08); --dash-glass-shadow-hover: 0 12px 40px rgba(15, 23, 42, 0.14); /* --- Sombras: preto forte → preto suave --- */ --shadow-sm: 0 4px 16px rgba(15, 23, 42, 0.06); --shadow-md: 0 8px 32px rgba(15, 23, 42, 0.08); --shadow-lg: 0 4px 20px rgba(15, 23, 42, 0.12); --shadow-sidebar: 8px 0 30px rgba(15, 23, 42, 0.15); --shadow-sidebar-inverse: -8px 0 30px rgba(15, 23, 42, 0.15); --shadow-text-heading: 0 2px 4px rgba(23, 19, 31, 0.08); --shadow-focus: 0 0 0 0.2rem rgba(224, 38, 143, 0.2); /* --- RGB triplets de card: escuro → branco/claro (para gradients via rgba) --- */ --card-dark-rgb-start: 255, 255, 255; --card-dark-rgb-end: 241, 245, 249; /* --- Gradientes de card: escuros → claros (re-derivados dos novos rgb) --- */ --gradient-card-strong: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(241, 245, 249, 0.95)); --gradient-card-elevated: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(241, 245, 249, 0.98)); /* --- Gradientes de form-control: escuros → claros --- */ --bg-form-control-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 252, 0.9)); --bg-form-control-gradient-soft: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(248, 250, 252, 0.7)); --bg-form-control-focus: linear-gradient(135deg, rgba(224, 38, 143, 0.08), rgba(224, 38, 143, 0.04)); --bg-readonly-overlay: rgba(23, 19, 31, 0.04); /* --- Navbar/overlay: dark indigo → branco com sombra --- */ --overlay-scrim: rgba(15, 23, 42, 0.4); --navbar-gradient-start: rgba(255, 255, 255, 0.95); --navbar-gradient-end: rgba(248, 250, 252, 0.95); --placeholder-opacity: rgba(15, 23, 42, 0.35); /* --- Bootstrap .table: cor invertida (fundo claro padrão) --- */ --bs-table-color: #1e293b; --bs-table-bg: transparent; --bs-table-border-color: rgba(15, 23, 42, 0.08); --bs-table-striped-color: #1e293b; --bs-table-striped-bg: rgba(15, 23, 42, 0.02); --bs-table-hover-color: #1e293b; --bs-table-hover-bg: rgba(224, 38, 143, 0.06); /* --- Status vivid (cliente_chamados stats): escurecidos p/ contraste WCAG AA sobre card claro. Mantêm a identidade de matiz; os vivos originais só têm contraste suficiente sobre fundo escuro. --- */ --status-amber-vivid: #b45309; --status-cyan-vivid: #0e7490; --status-violet-vivid: #7c3aed; --status-green-vivid: #15803d; }