/* ========================================================================== ERTEL — Design Tokens Fonte única de verdade visual. Nenhuma cor/espaçamento deve ser hardcoded em componentes — sempre referenciar uma variável daqui. TEMAS — o sistema suporta múltiplas paletas, trocáveis em Configurações → Tema. O tema ativo define um atributo `data-theme="..."` no (ver core/app.js, aplicado o mais cedo possível no boot pra não piscar o tema errado antes de trocar). `:root` sozinho = tema padrão (Escuro ERTEL), pra funcionar mesmo antes do JS aplicar o atributo. Em TODO tema, o SIGNIFICADO da cor é o mesmo: crítico é sempre da família vermelho, atenção sempre laranja/âmbar, normal sempre verde — só os tons mudam pra combinar com a paleta. Isso é regra fixa, nunca muda entre temas. `--ertel-chart-1` a `--ertel-chart-8` — paleta usada pelos gráficos (barra, rosca, linha com várias séries), lida em tempo real pelo chart-wrapper.js. Cada tema define a própria, coordenada com o resto da paleta — sem isso, os gráficos ficavam sempre na mesma cor não importa qual tema fosse escolhido. ========================================================================== */ :root, [data-theme="escuro-ertel"] { /* -- Cor: base neutra ---------------------------------------------------- */ --ertel-ink: #F1F3F9; --ertel-ink-soft: #B9C0D1; --ertel-muted: #838CA3; --ertel-canvas: #0B0E17; --ertel-surface: #151A28; --ertel-surface-alt: #1B2131; --ertel-border: rgba(255, 255, 255, 0.08); --ertel-border-strong: rgba(255, 255, 255, 0.16); --ertel-border-form: #4C5872; /* -- Cor: marca / acento -------------------------------------------------- */ --ertel-primary: #4C7CFF; --ertel-primary-hover: #6E97FF; --ertel-primary-soft: rgba(76, 124, 255, 0.16); /* -- Cor: sistema de criticidade ------------------------------------------ */ --ertel-crit-a: #EF4444; --ertel-crit-a-bg: rgba(239, 68, 68, 0.14); --ertel-crit-b: #E8791E; --ertel-crit-b-bg: rgba(232, 121, 30, 0.14); --ertel-crit-c: #22C55E; --ertel-crit-c-bg: rgba(34, 197, 94, 0.14); --ertel-success: #22C55E; --ertel-warning: #E8791E; --ertel-danger: #EF4444; --ertel-info: #4C7CFF; --ertel-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4); --ertel-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45); --ertel-shadow-lg: 0 10px 28px rgba(0, 0, 0, 0.55); --ertel-chart-1: #3987E5; --ertel-chart-2: #D95926; --ertel-chart-3: #199E70; --ertel-chart-4: #9085E9; --ertel-chart-5: #C98500; --ertel-chart-6: #D55181; --ertel-chart-7: #008300; --ertel-chart-8: #E66767; } /* -- Tema: Escuro Laranja — mesmo princípio, acento principal vira laranja -- */ [data-theme="escuro-laranja"] { --ertel-ink: #F5F1EC; --ertel-ink-soft: #C9BFB2; --ertel-muted: #93877A; --ertel-canvas: #120D08; --ertel-surface: #201810; --ertel-surface-alt: #281E14; --ertel-border: rgba(255, 255, 255, 0.08); --ertel-border-strong: rgba(255, 255, 255, 0.16); --ertel-border-form: #6B5A44; --ertel-primary: #F2924A; --ertel-primary-hover: #FFAD6E; --ertel-primary-soft: rgba(242, 146, 74, 0.18); --ertel-crit-a: #EF4444; --ertel-crit-a-bg: rgba(239, 68, 68, 0.14); --ertel-crit-b: #F59E0B; --ertel-crit-b-bg: rgba(245, 158, 11, 0.14); --ertel-crit-c: #22C55E; --ertel-crit-c-bg: rgba(34, 197, 94, 0.14); --ertel-success: #22C55E; --ertel-warning: #F59E0B; --ertel-danger: #EF4444; --ertel-info: #F2924A; --ertel-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4); --ertel-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45); --ertel-shadow-lg: 0 10px 28px rgba(0, 0, 0, 0.55); --ertel-chart-1: #D95926; --ertel-chart-2: #199E70; --ertel-chart-3: #3987E5; --ertel-chart-4: #C98500; --ertel-chart-5: #D55181; --ertel-chart-6: #008300; --ertel-chart-7: #9085E9; --ertel-chart-8: #E66767; } /* -- Tema: Escuro Verde-Água (teal) ---------------------------------------- */ [data-theme="escuro-teal"] { --ertel-ink: #EBF5F3; --ertel-ink-soft: #AFC7C2; --ertel-muted: #79948E; --ertel-canvas: #081312; --ertel-surface: #10201E; --ertel-surface-alt: #142826; --ertel-border: rgba(255, 255, 255, 0.08); --ertel-border-strong: rgba(255, 255, 255, 0.16); --ertel-border-form: #3E6862; --ertel-primary: #2DD4BF; --ertel-primary-hover: #5EEAD4; --ertel-primary-soft: rgba(45, 212, 191, 0.16); --ertel-crit-a: #F87171; --ertel-crit-a-bg: rgba(248, 113, 113, 0.14); --ertel-crit-b: #E8791E; --ertel-crit-b-bg: rgba(232, 121, 30, 0.14); --ertel-crit-c: #4ADE80; --ertel-crit-c-bg: rgba(74, 222, 128, 0.14); --ertel-success: #4ADE80; --ertel-warning: #E8791E; --ertel-danger: #F87171; --ertel-info: #2DD4BF; --ertel-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4); --ertel-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45); --ertel-shadow-lg: 0 10px 28px rgba(0, 0, 0, 0.55); --ertel-chart-1: #199E70; --ertel-chart-2: #D95926; --ertel-chart-3: #3987E5; --ertel-chart-4: #C98500; --ertel-chart-5: #D55181; --ertel-chart-6: #008300; --ertel-chart-7: #9085E9; --ertel-chart-8: #E66767; } /* -- Tema: Escuro Violeta --------------------------------------------------- */ [data-theme="escuro-violeta"] { --ertel-ink: #F2F0FA; --ertel-ink-soft: #C2B9DB; --ertel-muted: #8A81A8; --ertel-canvas: #100B1C; --ertel-surface: #1B1530; --ertel-surface-alt: #221A3C; --ertel-border: rgba(255, 255, 255, 0.08); --ertel-border-strong: rgba(255, 255, 255, 0.16); --ertel-border-form: #5B4E80; --ertel-primary: #A78BFA; --ertel-primary-hover: #C4B0FF; --ertel-primary-soft: rgba(167, 139, 250, 0.18); --ertel-crit-a: #F472B6; --ertel-crit-a-bg: rgba(244, 114, 182, 0.14); --ertel-crit-b: #E8791E; --ertel-crit-b-bg: rgba(232, 121, 30, 0.14); --ertel-crit-c: #34D399; --ertel-crit-c-bg: rgba(52, 211, 153, 0.14); --ertel-success: #34D399; --ertel-warning: #E8791E; --ertel-danger: #F472B6; --ertel-info: #A78BFA; --ertel-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4); --ertel-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45); --ertel-shadow-lg: 0 10px 28px rgba(0, 0, 0, 0.55); --ertel-chart-1: #9085E9; --ertel-chart-2: #D95926; --ertel-chart-3: #199E70; --ertel-chart-4: #3987E5; --ertel-chart-5: #C98500; --ertel-chart-6: #D55181; --ertel-chart-7: #008300; --ertel-chart-8: #E66767; } /* -- Tema: Oceano Atlântico — inspirado em paleta marítima (navy + teal + azul-céu) -- */ [data-theme="escuro-oceano"] { --ertel-ink: #EAF4F7; --ertel-ink-soft: #B8CCD6; --ertel-muted: #7C93A0; --ertel-canvas: #0A1420; --ertel-surface: #142234; --ertel-surface-alt: #1A2B40; --ertel-border: rgba(255, 255, 255, 0.08); --ertel-border-strong: rgba(255, 255, 255, 0.16); --ertel-border-form: #3D5670; --ertel-primary: #0EA5E9; --ertel-primary-hover: #38BDF8; --ertel-primary-soft: rgba(14, 165, 233, 0.16); --ertel-crit-a: #F87171; --ertel-crit-a-bg: rgba(248, 113, 113, 0.14); --ertel-crit-b: #E8791E; --ertel-crit-b-bg: rgba(232, 121, 30, 0.14); --ertel-crit-c: #2DD4BF; --ertel-crit-c-bg: rgba(45, 212, 191, 0.14); --ertel-success: #2DD4BF; --ertel-warning: #E8791E; --ertel-danger: #F87171; --ertel-info: #0EA5E9; --ertel-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4); --ertel-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45); --ertel-shadow-lg: 0 10px 28px rgba(0, 0, 0, 0.55); --ertel-chart-1: #3987E5; --ertel-chart-2: #199E70; --ertel-chart-3: #D95926; --ertel-chart-4: #9085E9; --ertel-chart-5: #C98500; --ertel-chart-6: #D55181; --ertel-chart-7: #008300; --ertel-chart-8: #E66767; } /* -- Tema: Terracota — inspirado em paleta neutra quente (navy + creme + terracota) -- */ [data-theme="escuro-terracota"] { --ertel-ink: #F5EFE6; --ertel-ink-soft: #D6C7B4; --ertel-muted: #9C8B76; --ertel-canvas: #14100C; --ertel-surface: #221C16; --ertel-surface-alt: #2A231C; --ertel-border: rgba(255, 255, 255, 0.08); --ertel-border-strong: rgba(255, 255, 255, 0.16); --ertel-border-form: #5C4C3A; --ertel-primary: #D97757; --ertel-primary-hover: #E8967A; --ertel-primary-soft: rgba(217, 119, 87, 0.18); --ertel-crit-a: #EF4444; --ertel-crit-a-bg: rgba(239, 68, 68, 0.14); --ertel-crit-b: #E8791E; --ertel-crit-b-bg: rgba(232, 121, 30, 0.14); --ertel-crit-c: #8CAB8C; --ertel-crit-c-bg: rgba(140, 171, 140, 0.16); --ertel-success: #8CAB8C; --ertel-warning: #E8791E; --ertel-danger: #EF4444; --ertel-info: #D97757; --ertel-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4); --ertel-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45); --ertel-shadow-lg: 0 10px 28px rgba(0, 0, 0, 0.55); --ertel-chart-1: #D95926; --ertel-chart-2: #9085E9; --ertel-chart-3: #199E70; --ertel-chart-4: #3987E5; --ertel-chart-5: #C98500; --ertel-chart-6: #D55181; --ertel-chart-7: #008300; --ertel-chart-8: #E66767; } /* -- Tema: Cavalheiro — inspirado em paleta navy + verde-limão + branco --------------- */ [data-theme="escuro-cavalheiro"] { --ertel-ink: #EEF2F5; --ertel-ink-soft: #B4C1CC; --ertel-muted: #7C8998; --ertel-canvas: #0C1420; --ertel-surface: #16202E; --ertel-surface-alt: #1C2836; --ertel-border: rgba(255, 255, 255, 0.08); --ertel-border-strong: rgba(255, 255, 255, 0.16); --ertel-border-form: #3E4E5E; --ertel-primary: #A3D93B; --ertel-primary-hover: #BCEA5E; --ertel-primary-soft: rgba(163, 217, 59, 0.18); --ertel-crit-a: #EF4444; --ertel-crit-a-bg: rgba(239, 68, 68, 0.14); --ertel-crit-b: #E8791E; --ertel-crit-b-bg: rgba(232, 121, 30, 0.14); --ertel-crit-c: #4ADE80; --ertel-crit-c-bg: rgba(74, 222, 128, 0.14); --ertel-success: #4ADE80; --ertel-warning: #E8791E; --ertel-danger: #EF4444; --ertel-info: #A3D93B; --ertel-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4); --ertel-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45); --ertel-shadow-lg: 0 10px 28px rgba(0, 0, 0, 0.55); --ertel-chart-1: #008300; --ertel-chart-2: #D55181; --ertel-chart-3: #C98500; --ertel-chart-4: #3987E5; --ertel-chart-5: #D95926; --ertel-chart-6: #199E70; --ertel-chart-7: #9085E9; --ertel-chart-8: #E66767; } /* -- Tema: Claro Profissional (tema original, luz do dia) ------------------- Ajustado (2026-09-05) a pedido do usuário: fundo em branco puro (#FFFFFF) + texto quase preto (#10141A) dava um contraste de ~19:1 — acima do necessário pra leitura (WCAG recomenda 7:1 pra AAA) e na prática ofuscante numa tela usada por muito tempo. Suavizado pra fundo levemente "off-white" (nunca #FFFFFF puro) e texto num cinza- chumbo escuro (nunca preto puro) — contraste continua alto (~15:1, folgado acima do mínimo de acessibilidade), só sem o brilho/ofuscação do branco-no-máximo contra preto-no-máximo. */ [data-theme="claro"] { --ertel-ink: #1C212B; --ertel-ink-soft: #454C58; --ertel-muted: #6B7280; --ertel-canvas: #E9EBEF; --ertel-surface: #FBFBFA; --ertel-surface-alt: #F3F4F3; --ertel-border: #DFE2E7; --ertel-border-strong: #C4C9D2; --ertel-border-form: #7C88A3; --ertel-primary: #2954E5; --ertel-primary-hover: #1F3FBF; --ertel-primary-soft: #EAEFFE; --ertel-crit-a: #DC2626; --ertel-crit-a-bg: #FDECEC; --ertel-crit-b: #EA580C; --ertel-crit-b-bg: #FDF1E7; --ertel-crit-c: #16A34A; --ertel-crit-c-bg: #EAF7EF; --ertel-success: #16A34A; --ertel-warning: #EA580C; --ertel-danger: #DC2626; --ertel-info: #2954E5; --ertel-shadow-sm: 0 1px 2px rgba(16, 20, 26, 0.06); --ertel-shadow-md: 0 2px 8px rgba(16, 20, 26, 0.08); --ertel-shadow-lg: 0 8px 24px rgba(16, 20, 26, 0.12); --ertel-chart-1: #2A78D6; --ertel-chart-2: #EB6834; --ertel-chart-3: #4A3AA7; --ertel-chart-4: #1BAF7A; --ertel-chart-5: #008300; --ertel-chart-6: #E87BA4; --ertel-chart-7: #EDA100; --ertel-chart-8: #E34948; } /* -- Tema: Claro Oceano — 2ª opção de fundo claro (pedido do usuário, 2026-09-06: só existia 1 tema claro contra 7 escuros). Mesmo princípio do "Claro Profissional" acima (nunca #FFFFFF puro, nunca preto puro) — aqui com um tom de fundo levemente azulado e acento em azul profundo, pareando com a identidade do "Oceano Atlântico" escuro. Danger/warning/ success reaproveitam EXATAMENTE os tons já validados no Claro Profissional (regra fixa do arquivo: crítico=vermelho, atenção=laranja, normal=verde, sempre) — só canvas/superfície/borda/acento mudam. */ [data-theme="claro-oceano"] { --ertel-ink: #16222C; --ertel-ink-soft: #3E5568; --ertel-muted: #66798A; --ertel-canvas: #E3ECF1; --ertel-surface: #F6FAFC; --ertel-surface-alt: #EAF2F6; --ertel-border: #D6E3EA; --ertel-border-strong: #BBD0DA; --ertel-border-form: #5D7A8C; --ertel-primary: #0284C7; --ertel-primary-hover: #026AA2; --ertel-primary-soft: #DCEFFA; --ertel-crit-a: #DC2626; --ertel-crit-a-bg: #FDECEC; --ertel-crit-b: #EA580C; --ertel-crit-b-bg: #FDF1E7; --ertel-crit-c: #16A34A; --ertel-crit-c-bg: #EAF7EF; --ertel-success: #16A34A; --ertel-warning: #EA580C; --ertel-danger: #DC2626; --ertel-info: #0284C7; --ertel-shadow-sm: 0 1px 2px rgba(16, 20, 26, 0.06); --ertel-shadow-md: 0 2px 8px rgba(16, 20, 26, 0.08); --ertel-shadow-lg: 0 8px 24px rgba(16, 20, 26, 0.12); --ertel-chart-1: #2A78D6; --ertel-chart-2: #1BAF7A; --ertel-chart-3: #008300; --ertel-chart-4: #E87BA4; --ertel-chart-5: #EDA100; --ertel-chart-6: #E34948; --ertel-chart-7: #4A3AA7; --ertel-chart-8: #EB6834; } /* -- Tema: Claro Terracota — 3ª opção de fundo claro, tom quente (creme) pareando com a identidade do "Terracota" escuro. Mesma regra de sempre: nunca fundo branco puro, nunca texto preto puro, danger/warning idênticos ao Claro Profissional (vermelho/laranja fixos). O verde de "normal" aqui pende pro tom floresta (mais quente que o verde-esmeralda do Claro Profissional/Oceano) só pra combinar com a paleta quente — continua inequivocamente da família verde, não muda o SIGNIFICADO. */ [data-theme="claro-terracota"] { --ertel-ink: #2B211A; --ertel-ink-soft: #5C4C3E; --ertel-muted: #8A7565; --ertel-canvas: #F0E7DA; --ertel-surface: #FBF6EE; --ertel-surface-alt: #F5EBDC; --ertel-border: #E3D5C2; --ertel-border-strong: #D2BEA3; --ertel-border-form: #8C7357; --ertel-primary: #B75C3D; --ertel-primary-hover: #9C4B30; --ertel-primary-soft: #F5E2D8; --ertel-crit-a: #DC2626; --ertel-crit-a-bg: #FDECEC; --ertel-crit-b: #EA580C; --ertel-crit-b-bg: #FDF1E7; --ertel-crit-c: #3F7A4A; --ertel-crit-c-bg: #E8F0E6; --ertel-success: #3F7A4A; --ertel-warning: #EA580C; --ertel-danger: #DC2626; --ertel-info: #B75C3D; --ertel-shadow-sm: 0 1px 2px rgba(26, 20, 16, 0.07); --ertel-shadow-md: 0 2px 8px rgba(26, 20, 16, 0.09); --ertel-shadow-lg: 0 8px 24px rgba(26, 20, 16, 0.14); --ertel-chart-1: #EB6834; --ertel-chart-2: #2A78D6; --ertel-chart-3: #1BAF7A; --ertel-chart-4: #4A3AA7; --ertel-chart-5: #E87BA4; --ertel-chart-6: #008300; --ertel-chart-7: #EDA100; --ertel-chart-8: #E34948; } :root { /* -- Tipografia ----------------------------------------------------------- Inter para UI/leitura. IBM Plex Mono reservado a dados técnicos (TAGs, códigos, números de série) — reforça a leitura "de instrumento" sem transformar a interface inteira em texto monoespaçado. */ --ertel-font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --ertel-font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace; --ertel-text-xs: 0.75rem; --ertel-text-sm: 0.8125rem; --ertel-text-base: 0.9375rem; --ertel-text-lg: 1.125rem; --ertel-text-xl: 1.5rem; --ertel-text-2xl: 1.875rem; --ertel-weight-regular: 400; --ertel-weight-medium: 500; --ertel-weight-semibold: 600; --ertel-weight-bold: 700; /* -- Espaçamento (escala 4px) -------------------------------------------- */ --ertel-space-1: 4px; --ertel-space-2: 8px; --ertel-space-3: 12px; --ertel-space-4: 16px; --ertel-space-5: 20px; --ertel-space-6: 24px; --ertel-space-8: 32px; --ertel-space-10: 40px; --ertel-space-12: 48px; /* -- Raio -------------------------------------------------------------- */ --ertel-radius-sm: 6px; --ertel-radius-md: 8px; --ertel-radius-lg: 12px; /* -- Layout / shell ------------------------------------------------------ */ --ertel-sidebar-width: 248px; --ertel-sidebar-width-collapsed: 72px; --ertel-topbar-height: 60px; /* -- Transições ------------------------------------------------------------ */ --ertel-transition-fast: 120ms ease; --ertel-transition-base: 200ms ease; }