/* VARIABLES.CSS — TOKENS DO AMBIENTE GRÁFICO (fonte única) Só definições de variáveis CSS (cores, fontes, tamanhos) dos temas claro e escuro. Regras/utilitários ficam em app.css; hacks de páginas específicas em page-overrides.css. O Live CSS Editor grava as variáveis de tema AQUI. */ /* TEMA CLARO (Padrão) */ .custom-vars, .highlight-panel /* Auto-apply vars to panel if not wrapped */ { /* ----- Definições RGB (R, G, B) ----- */ /* Cores base */ --rgb-panel-bg: 175, 200, 230; /* Cinza/Azul Base (User Defined) */ --rgb-header-bg: 210, 210, 210; /* Cabeçalhos */ --rgb-body-bg: 255, 255, 255; /* Corpo Branco (Destaque interno) */ --rgb-border: 180, 180, 180; /* Borda Padrão */ --rgb-text-sec: 100, 116, 139; /* Texto Secundário */ /* Destaques (Azul) */ --rgb-highlight: 210, 225, 255; /* Azul Primário */ --rgb-highlight-dark: 169, 180, 226; /* Azul Escuro (Bordas Fortes) */ --rgb-highlight-header: 90, 120, 185; /* Azul Primário header */ --rgb-highlight-header-dark: 89, 80, 206; /* Azul Escuro header (Bordas Fortes) */ --rgb-highlight-summary: 50, 70, 115; /* Azul Primário summary */ --rgb-highlight-summary-dark: 89, 80, 206; /* Azul Escuro summary (Bordas Fortes) */ /* Visão Geral (Overview Bar) */ --rgb-overview-bg: 30, 58, 138; /* Blue-900 */ --rgb-overview-text: 255, 255, 255; /* White */ --rgb-overview-accent: 96, 165, 250; /* Blue-400 */ --rgb-overview-muted: 191, 219, 254; /* Blue-200 */ --rgb-overview-sep: 30, 64, 175; /* Blue-800 */ /* ----- Variáveis Semânticas ----- */ --custom-container-bg: rgb(var(--rgb-panel-bg)); --custom-header-bg: rgb(var(--rgb-header-bg)); --custom-body-bg: rgb(var(--rgb-body-bg)); --custom-border: rgb(var(--rgb-border)); --custom-text-secondary: rgb(var(--rgb-text-sec)); /* ----- ESTILOS DE DESTAQUE (Glass/Tint Effect) ----- */ /* Usado no Rodapé e agora nos Painéis Principais */ --custom-highlight-tint: rgba(var(--rgb-highlight), 0.12); /* Fundo Azulado Transparente */ --custom-highlight-header-tint: rgba(var(--rgb-highlight-header), 0.12); /* Fundo Azulado Transparente */ --custom-highlight-summary-tint: rgba(var(--rgb-highlight-summary), 0.12); /* Fundo Azulado Transparente */ --custom-highlight-border: rgb(var(--rgb-highlight-dark)); /* Borda Forte */ --custom-highlight-border-soft: rgba(var(--rgb-highlight-dark), 0.4); /* Borda Suave */ --custom-highlight-summary-border: rgb(var(--rgb-highlight-summary-dark)); /* Borda Forte */ --custom-highlight-summary-border-soft: rgba(var(--rgb-highlight-summary-dark), 0.4); /* Borda Suave */ } /* TEMA ESCURO (Sobrescreve as variáveis acima quando a classe .mud-theme-dark estiver ativa) */ /* Suporte para aninhamento (.mud-theme-dark .custom-vars) e mesma classe (.mud-theme-dark.custom-vars) */ .mud-theme-dark .custom-vars, .mud-theme-dark.custom-vars, [data-theme="dark"] .custom-vars, .mud-theme-dark .highlight-panel, [data-theme="dark"] .highlight-panel { /* ----- Definições RGB Escuras ----- */ --rgb-panel-bg: 45, 45, 55; /* Cinza Médio Escuro */ --rgb-header-bg: 60, 60, 70; /* Cabeçalho mais claro */ --rgb-body-bg: 25, 25, 35; /* Corpo levemente destacado */ --rgb-border: 90, 90, 100; /* Bordas visíveis */ --rgb-text-sec: 210, 230, 250; /* Texto Claro */ /* User Modified Highlight Colors */ --rgb-highlight: 22, 32, 45; --rgb-highlight-dark: 29, 40, 66; --rgb-highlight-header: 10, 15, 30; --rgb-highlight-header-dark: 35, 50, 156; --rgb-highlight-summary: 5, 15, 35; --rgb-highlight-summary-dark: 39, 60, 116; /* Overview Bar - Dark Mode */ --rgb-overview-bg: 30, 35, 60; /* Deep Blue/Grey */ --rgb-overview-text: 220, 220, 230; /* Off-white */ --rgb-overview-accent: 100, 180, 255; /* Bright Blue */ --rgb-overview-muted: 160, 190, 220; /* Muted Blue */ --rgb-overview-sep: 60, 70, 100; /* Lighter Divider */ --custom-container-bg: rgb(var(--rgb-panel-bg)); --custom-header-bg: rgb(var(--rgb-header-bg)); --custom-body-bg: rgb(var(--rgb-body-bg)); --custom-border: rgb(var(--rgb-border)); --custom-text-secondary: rgb(var(--rgb-text-sec)); /* ----- ESTILOS DE DESTAQUE (Recalculados para Dark Mode) ----- */ --custom-highlight-tint: rgba(var(--rgb-highlight), 0.42); --custom-highlight-header-tint: rgba(var(--rgb-highlight-header), 0.42); --custom-highlight-summary-tint: rgba(var(--rgb-highlight-summary), 0.42); --custom-highlight-border: rgb(var(--rgb-highlight-dark)); --custom-highlight-border-soft: rgba(var(--rgb-highlight-dark), 0.24); --custom-highlight-summary-border: rgb(var(--rgb-highlight-summary-dark)); --custom-highlight-summary-border-soft: rgba(var(--rgb-highlight-summary-dark), 0.24); } html[data-theme="light"] { --brand-color: rgba(7, 115, 115, 1); --dashboard-card-bg: rgba(53,53,65,0.7490196078431373); --mud-palette-error: rgb(248, 19, 19); --mud-palette-success: rgba(85,182,121,1); --mud-palette-success-darken: rgba(61,146,92,1); --mud-palette-info: rgba(93,142,199,1); --mud-palette-primary: rgba(126,134,208,1); --mud-palette-surface: rgba(255,255,255,1) !important; --nav-header-bg: rgba(22,79,135,1); --mud-palette-lines-default: rgba(65,72,82,0.12549019607843137); --glass-bg-dark: rgba(45,49,55,0.9490196078431372); --mud-palette-table-lines: rgba(126,134,208,1); } html[data-theme="dark"] { --mud-palette-background: rgba(43, 49, 64, 1); --brand-color: rgba(126,134,208,1); --mud-palette-surface: rgba(51,55,62,1) !important; --dashboard-card-bg: rgba(53,53,65,0.7490196078431373); --mud-palette-error: rgb(245, 134, 134); --mud-palette-success: rgba(85,182,121,1); --mud-palette-success-darken: rgba(61,146,92,1); --mud-palette-info: rgba(93,142,199,1); --mud-palette-primary: rgba(126,134,208,1); --nav-header-bg: rgba(22,79,135,1); --mud-palette-lines-default: rgba(104,114,128,0.4); --glass-bg-dark: rgba(54,58,69,0.9490196078431372); --mud-palette-table-lines: rgba(126,134,208,1); } /* ThemedTitle: tamanhos de fonte pré-programados, disponíveis no menu de variáveis (💡) do campo "Tamanho da Fonte" no Live CSS Editor. */ :root { --title-font-size-xs: 0.7rem; --title-font-size-sm: 0.88rem; --title-font-size-md: 1.25rem; --title-font-size-lg: 1.75rem; --title-font-size-xl: 2.25rem; }