/* * — * ================================================================ — * CSS VARIABLES MASTER v5.0 - SISTEMA UNIFICADO DE VARIAVEIS — * ================================================================ — * — * @description Arquivo centralizado com TODAS as variaveis CSS do ERP — * @version 5.0.0 — * @date 2026-02-01 — * @author ERP.DOTCOMPANY — * — * IMPORTANTE: — * - Este arquivo consolida variaveis de theme-system.css e theme-styles.css — * - Mantem compatibilidade total com codigo existente — * - Adiciona novas variaveis para padronizacao futura — * — * USO: — * - Importe ANTES de outros arquivos CSS — * - Use var(--nome-variavel) em novos estilos — * — * ================================================================ */

/* 1. PALETA DE CORES COMPLETA (Light Mode) — Sistema de 50-900 inspirado em Tailwind */

:root {
  /* ────────────────────────────────────────────────────────────
     IDENTIFICADOR DO TEMA ATIVO
     Usado para detecção via CSS/JS e extensibilidade
     ──────────────────────────────────────────────────────────── */
  --theme-name: 'verde';
  --theme-display-name: 'Verde Premium';
  --theme-icon: 'bi-tree-fill';

  /* ────────────────────────────────────────────────────────────
     LARGURA DA SIDEBAR — FONTE UNICA DA VERDADE (2026-07-28)
     Motivo: o numero "280px"/"80px" vivia repetido em 3 lugares
     (sidebar.html, tablet-responsive.css e as classes Tailwind do
     <main> em base.html). Em 1024px o tablet-responsive colapsava a
     sidebar para 80px enquanto o max-width do main continuava
     calc(100vw - 280px) -> 200px de ZONA MORTA a direita, com o
     cluster de acoes do header (busca/IA/notificacoes/tema/MENU DO
     USUARIO) desenhado fora da area clicavel. Todo consumidor DEVE
     usar estes tokens; nunca repetir o literal.
     ──────────────────────────────────────────────────────────── */
  --erp-sidebar-w: 280px;
  --erp-sidebar-w-collapsed: 80px;

  /* ────────────────────────────────────────────────────────────
     VERDE PREMIUM (DotCompany Brand)
     Paleta unificada com o site institucional
     ──────────────────────────────────────────────────────────── */
  --color-primary-50: #E8F5F1;
  --color-primary-100: #C5E6DB;
  --color-primary-200: #9ED4C5;
  --color-primary-300: #77C2AF;
  --color-primary-400: #4FAF99;
  --color-primary-500: #1a6b52;
  --color-primary-600: #0f4c3a;
  --color-primary-700: #0c3d2f;
  --color-primary-800: #092e24;
  --color-primary-900: #061f19;
  --color-primary-950: #041510;
  --color-primary-rgb: 15, 76, 58;

  /* Alias para compatibilidade */
  --color-primary: var(--color-primary-600);
  --color-primary-hover: var(--color-primary-700);

  /* ────────────────────────────────────────────────────────────
     VERDE (Success/Emerald)
     ──────────────────────────────────────────────────────────── */
  --color-success-50: #ECFDF5;
  --color-success-100: #D1FAE5;
  --color-success-200: #A7F3D0;
  --color-success-300: #6EE7B7;
  --color-success-400: #34D399;
  --color-success-500: #10B981;
  --color-success-600: #059669;
  --color-success-700: #047857;
  --color-success-800: #065F46;
  --color-success-900: #064E3B;

  /* Alias */
  --color-success: var(--color-success-500);
  --color-success-bg: rgba(16, 185, 129, 0.1);

  /* ────────────────────────────────────────────────────────────
     AMARELO/AMBER (Warning)
     ──────────────────────────────────────────────────────────── */
  --color-warning-50: #FFFBEB;
  --color-warning-100: #FEF3C7;
  --color-warning-200: #FDE68A;
  --color-warning-300: #FCD34D;
  --color-warning-400: #FBBF24;
  --color-warning-500: #F59E0B;
  --color-warning-600: #D97706;
  --color-warning-700: #B45309;
  --color-warning-800: #92400E;
  --color-warning-900: #78350F;

  /* Alias */
  --color-warning: var(--color-warning-500);
  --color-warning-bg: rgba(245, 158, 11, 0.1);
  /* Aliases legacy (uso historico em templates ONG) — apontam para shades reais */
  --color-warning-light: var(--color-warning-100);
  --color-warning-dark: var(--color-warning-700);

  /* ────────────────────────────────────────────────────────────
     INDIGO LEGACY (Tailwind raw — usado em templates ONG criados
     antes da migracao para tokens primary/accent semanticos).
     Mantido como alias para nao regredir paleta visual.
     ──────────────────────────────────────────────────────────── */
  --color-indigo: #6366f1;
  --color-indigo-light: #e0e7ff;
  --color-indigo-dark: #4f46e5;
  --color-indigo-500: #6366f1;
  --color-indigo-600: #4f46e5;
  --color-indigo-700: #4338CA;

  /* PINK LEGACY (idem — categoria "Meninas" em aluno/list etc) */
  --color-pink: #ec4899;
  --color-pink-light: #fce7f3;
  --color-pink-dark: #db2777;

  /* ────────────────────────────────────────────────────────────
     VERMELHO (Error/Danger)
     ──────────────────────────────────────────────────────────── */
  --color-error-50: #FEF2F2;
  --color-error-100: #FEE2E2;
  --color-error-200: #FECACA;
  --color-error-300: #FCA5A5;
  --color-error-400: #F87171;
  --color-error-500: #EF4444;
  --color-error-600: #DC2626;
  --color-error-700: #B91C1C;
  --color-error-800: #991B1B;
  --color-error-900: #7F1D1D;

  /* Alias */
  --color-error: var(--color-error-500);
  --color-danger: var(--color-error-500);
  --color-error-bg: rgba(239, 68, 68, 0.1);

  /* ────────────────────────────────────────────────────────────
     AZUL INFO
     ──────────────────────────────────────────────────────────── */
  --color-info-50: #EFF6FF;
  --color-info-100: #DBEAFE;
  --color-info-200: #BFDBFE;
  --color-info-300: #93C5FD;
  --color-info-400: #60A5FA;
  --color-info-500: #3B82F6;
  --color-info-600: #2563EB;
  --color-info-700: #1D4ED8;
  --color-info-800: #1E40AF;
  --color-info-900: #1E3A8A;

  /* Alias */
  --color-info: var(--color-info-500);
  --color-info-bg: rgba(59, 130, 246, 0.1);

  /* ────────────────────────────────────────────────────────────
     ROXO/PURPLE (Secundario)
     ──────────────────────────────────────────────────────────── */
  --color-purple-50: #FAF5FF;
  --color-purple-100: #F3E8FF;
  --color-purple-200: #E9D5FF;
  --color-purple-300: #D8B4FE;
  --color-purple-400: #C084FC;
  --color-purple-500: #A855F7;
  --color-purple-600: #9333EA;
  --color-purple-700: #7C3AED;
  --color-purple-800: #6B21A8;
  --color-purple-900: #581C87;

  /* ────────────────────────────────────────────────────────────
     CYAN/TEAL
     ──────────────────────────────────────────────────────────── */
  --color-cyan-50: #ECFEFF;
  --color-cyan-100: #CFFAFE;
  --color-cyan-200: #A5F3FC;
  --color-cyan-300: #67E8F9;
  --color-cyan-400: #22D3EE;
  --color-cyan-500: #06B6D4;
  --color-cyan-600: #0891B2;
  --color-cyan-700: #0E7490;
  --color-cyan-800: #155E75;
  --color-cyan-900: #164E63;
  --color-cyan-950: #083344;

  /* ────────────────────────────────────────────────────────────
     DOURADO/GOLD (Accent Premium - DotCompany Brand)
     Cor de destaque para CTAs, badges premium, highlights
     ──────────────────────────────────────────────────────────── */
  --color-gold-50: #FDF8E8;
  --color-gold-100: #F9EBC5;
  --color-gold-200: #F5DEA2;
  --color-gold-300: #EBCD6E;
  --color-gold-400: #E0BC4A;
  --color-gold-500: #d4a825;
  --color-gold-600: #b8922a;
  --color-gold-700: #9a7a23;
  --color-gold-800: #7c621c;
  --color-gold-900: #5e4a15;
  --color-gold-rgb: 212, 168, 37;

  /* Alias */
  --color-accent: var(--color-gold-500);
  /* --color-accent-rgb: alias do gold-rgb (usado em ~89 var(--color-accent-rgb, fallback)).
     Resolve por tema via lazy var() — herda o --color-gold-rgb do tema ativo. 2026-05-28 */
  --color-accent-rgb: var(--color-gold-rgb);
  --color-secondary: var(--color-primary-500);

  /* --color-accent-ink: o dourado da marca quando ele e' TEXTO sobre superficie
     CLARA. Nao e' um dourado novo — e' o valor do --color-gold-800 do proprio
     ramo DotCompany, escolhido porque a identidade e' a FAMILIA, nao um hex.
     Existe porque o gold-500 sobre branco mede 2,23:1 e a AA de texto exige
     4,5 (medido no navegador, demo 327, /configuracoes/planos, 2026-08-01:
     "A PARTIR DE" 2,19 · "ou consulte nosso time comercial" 2,21 · "Consultar"
     2,21 · preco 2,23). Nao confundir:
       --color-accent      -> o dourado como MARCA/fundo/borda/icone (gold-500)
       --text-on-accent    -> o texto QUANDO o accent e' o fundo
       --color-accent-ink  -> o accent QUANDO ele e' o texto, em fundo claro
     No ESCURO o problema se inverte (o gold-500 sobre a surface escura mede
     7,95), entao o bloco .dark devolve o dourado original — nao ha nada para
     consertar la. */
  --color-accent-ink: #7c621c; /* lint-skip-U1: definicao de TOKEN — o literal aqui E o objetivo da U1 */

  /* --color-accent-ink-on-saturated: o dourado da marca quando ele e' TEXTO
     sobre as BARRAS DE CHROME (rodape/cabecalho), que sao pintadas com a cor
     da paleta e ficam num tom MEDIO — nem claro nem escuro.
     E' o ESPELHO do --color-accent-ink: la o fundo e' claro e o ouro precisa
     escurecer; aqui o fundo e' medio-saturado e ele precisa CLAREAR.
     Existe porque o gold-500 sobre a barra do rodape mede 2,29 (moda) a 3,76
     (verde/claro) — abaixo da AA de 4,5 de texto normal. Medido no navegador
     na demo 327 (/configuracoes/planos, 10 paletas x claro/escuro = 20
     combinacoes, fundo lido por PIXEL, 2026-08-02): com este tom o pior caso
     dos 20 sobe para 4,64 (moda/claro) e o melhor para 16,90.
     Valor unico de proposito (nao ha bloco .dark abaixo): no escuro a barra
     fica quase preta e este tom mede 16,9 — redefinir por modo so criaria a
     armadilha de um modo herdar o valor do outro (foi o que quebrou o
     cabecalho das paletas malva/oliva/nevoa/taupe/moda).
     Nao confundir:
       --color-accent                  -> ouro como MARCA/fundo/borda/icone
       --text-on-accent                -> o texto QUANDO o ouro e' o fundo
       --color-accent-ink              -> ouro como TEXTO em fundo CLARO
       --color-accent-ink-on-saturated -> ouro como TEXTO na barra de chrome */
  --color-accent-ink-on-saturated: #FDF4DA; /* lint-skip-U1: definicao de TOKEN — o literal aqui E o objetivo da U1 */

  /* ────────────────────────────────────────────────────────────
     ORANGE
     ──────────────────────────────────────────────────────────── */
  --color-orange-50: #FFF7ED;
  --color-orange-100: #FFEDD5;
  --color-orange-200: #FED7AA;
  --color-orange-300: #FDBA74;
  --color-orange-400: #FB923C;
  --color-orange-500: #F97316;
  --color-orange-600: #EA580C;
  --color-orange-700: #C2410C;
  --color-orange-800: #9A3412;
  --color-orange-900: #7C2D12;

  /* ────────────────────────────────────────────────────────────
     PINK
     ──────────────────────────────────────────────────────────── */
  --color-pink-50: #FDF2F8;
  --color-pink-100: #FCE7F3;
  --color-pink-200: #FBCFE8;
  --color-pink-300: #F9A8D4;
  --color-pink-400: #F472B6;
  --color-pink-500: #EC4899;
  --color-pink-600: #DB2777;
  --color-pink-700: #BE185D;
  --color-pink-800: #9D174D;
  --color-pink-900: #831843;

  /* ────────────────────────────────────────────────────────────
     NEUTROS (Gray Scale)
     ──────────────────────────────────────────────────────────── */
  --color-neutral-50: #F9FAFB;
  --color-neutral-100: #F3F4F6;
  --color-neutral-200: #E5E7EB;
  --color-neutral-300: #D1D5DB;
  --color-neutral-400: #9CA3AF;
  --color-neutral-500: #6B7280;
  --color-neutral-600: #4B5563;
  --color-neutral-700: #374151;
  --color-neutral-800: #1F2937;
  --color-neutral-900: #111827;
  --color-neutral-950: #030712;

  /* 2. CORES ESPECIAIS */

  /* Gradientes Padrao (usados) */
  --gradient-primary: linear-gradient(135deg, #0f4c3a 0%, #1a6b52 100%);
  --gradient-accent: linear-gradient(135deg, #d4a825 0%, #b8922a 100%);
  --gradient-success: linear-gradient(135deg, #10B981 0%, #059669 100%);
  --gradient-warning: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
  --gradient-info: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
  --gradient-dark: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);

  /* 3. SUPERFICIES E BACKGROUNDS */

  --bg-page: #F4F6FB;
  --bg-surface: #FFFFFF;
  --bg-surface-elevated: #FFFFFF;
  --bg-surface-secondary: #F9FAFB;
  /* SCROLL-FADE DE SUPERFICIE (declarado 2026-07-29) — cor das scroll-shadows
     que `.erp-modal-body` (base-modals.css) e as listas roladas pintam nas
     bordas para dizer "tem mais conteudo". TEM de ser um token DEDICADO, nao
     `--bg-surface`, por causa da cascata: `--bg-surface` e' redefinido por CADA
     um dos 9 temas em `html.theme-<nome>` (especificidade 0,1,1), que GANHA de
     `.dark` (0,1,0). No estado `dark` + tema claro — que existe de verdade,
     porque `componentes/header_mobile.html:1122` e `base_public.html:111` fazem
     `classList.toggle('dark')` SOZINHO, sem `theme-dark` — `--bg-surface`
     voltava #FFFFFF enquanto `.dark .erp-modal-body` continuava casando:
     duas faixas BRANCAS de 40px no topo e no rodape de TODO modal escuro com
     rolagem (medido no Chromium: fade rgb(255,255,255), lum 1.000).
     Como nenhum tema declara ESTE nome, o par `:root` (aqui) + `.dark` (mais
     tarde no arquivo, mesma especificidade) resolve certo em QUALQUER
     combinacao de classes. `var(x, fallback)` nao salvava: o fallback so vale
     quando a variavel NAO EXISTE, nunca quando ela tem o valor errado. */
  --modal-scroll-fade: #FFFFFF; /* lint-skip-U1: definicao de TOKEN — o literal aqui E o objetivo da U1 */
  /* FUNDOS RECUADOS (declarados em 2026-07-26 — antes eram TOKENS FANTASMA:
     106 usos em 48 arquivos de 18 modulos caiam no fallback literal, escrito
     para o tema claro. Cor literal NAO muda no dark, mas o texto por cima vem
     de --text-primary/--text-secondary que MUDA -> claro-sobre-claro (medido:
     1.05:1 em /otica/lentes-contato/matriz no dark). Ja documentados em
     docs/referencias/theme-premium.md sec 2 — a omissao foi acidental.
     Semantica dos 106 usos existentes (NAO reinterpretar):
       --bg-subtle -> fundo suave de bloco/thead/zebra/KPI (1 passo do surface)
       --bg-muted  -> fundo apagado/desabilitado/trilho de barra (2 passos)
     Em tema claro os dois sao MAIS ESCUROS que o surface branco; no dark sao
     MAIS ESCUROS que o surface escuro (recuado = mais fundo, nunca cinza claro).
     Valores por tema mantem >=4.5:1 com --text-primary e --text-secondary. */
  --bg-subtle: #F1F4F9; /* lint-skip-U1: definicao de TOKEN — o literal aqui E o objetivo da U1 */
  --bg-muted: #EBF0F6; /* lint-skip-U1: definicao de TOKEN — o literal aqui E o objetivo da U1 */
  --bg-overlay: rgba(0, 0, 0, 0.5);
  --bg-hover: rgba(0, 0, 0, 0.04);

  /* Alias para compatibilidade */
  --background: var(--bg-page);
  --surface: var(--bg-surface);

  /* ============================================================
     --bg-card / --border-color — TOKENS FANTASMA, agora reais (2026-07-29)
     ------------------------------------------------------------
     Centenas de lugares do ERP consomem `--bg-card` e `--border-color` com um
     fallback claro embutido — SO no CSS do chat sao 65 usos. Mas esses dois
     tokens NUNCA foram definidos em NENHUM dos 12 temas: as unicas ocorrencias
     no repo estavam dentro de comentario. Resultado medido no navegador
     (producao, tema `dark`):
     `getComputedStyle(document.documentElement).getPropertyValue('--bg-card')`
     voltava VAZIO, o fallback CLARO vencia, e o componente ficava com fundo
     BRANCO no tema escuro — com `--text-primary` quase branco escrito em cima.
     Contraste medido no cabecalho do painel do chat: 1.1 (AA exige 4.5).
     Era isso que o dono via como "nao tem tema escuro de verdade".

     Definir AQUI, no `:root`, resolve os 12 temas de uma vez: a substituicao de
     custom property e PREGUICOSA — `--bg-card` guarda o token-stream
     `var(--bg-surface)` e so resolve no elemento que o usa, ja dentro do tema
     ativo. Logo `html.theme-dark`, que redefine `--bg-surface` para a superficie
     escura, recebe automaticamente o card escuro, sem repetir nada em cada bloco
     de tema (e sem risco de um tema NOVO nascer esquecido).
     No tema CLARO nada muda na pratica: `--bg-surface` ja e o mesmo branco do
     fallback e `--border-default` e um cinza de borda equivalente.
     Guard: tests/unit/test_tokens_fantasma_bg_card.py
     ============================================================ */
  --bg-card: var(--bg-surface);
  --border-color: var(--border-default);

  /* 4. TEXTOS */

  --text-primary: #263B4A;
  --text-secondary: #546E7A;
  --text-muted: #59707C;
  --text-disabled: #B0BEC5;
  --text-inverse: #FFFFFF;
  --text-link: var(--color-primary-500);
  --text-link-hover: var(--color-primary-600);

  /* Alias para compatibilidade */
  --text: var(--text-primary);

  /* 5. BORDAS */

  --border-light: #EFF2F7;
  --border-default: #E0E7ED;
  --border-strong: #CFD8DC;
  --border-focus: var(--color-primary-500);

  /* Alias */
  --border: var(--border-default);

  /* 6. SOMBRAS */

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.03);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-default: 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.15);

  /* Alias */
  --shadow: var(--shadow-default);

  /* 7. TIPOGRAFIA (familias de fonte usadas via aliases) */

  --font-sans: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: Poppins, system-ui, -apple-system, sans-serif;
  --font-mono: "Fira Code", "JetBrains Mono", Consolas, Monaco, "Courier New", monospace;

  /* 8. ESPACAMENTO (usados via aliases --spacing-xs/sm/md/lg/xl/2xl) */

  --spacing-1: 0.25rem;     /* 4px - usado via --spacing-xs */
  --spacing-2: 0.5rem;      /* 8px - usado via --spacing-sm */
  --spacing-4: 1rem;        /* 16px - usado via --spacing-md */
  --spacing-6: 1.5rem;      /* 24px - usado via --spacing-lg */
  --spacing-8: 2rem;        /* 32px - usado via --spacing-xl */
  --spacing-12: 3rem;       /* 48px - usado via --spacing-2xl */

  /* 9. BORDER RADIUS */

  --radius-sm: 4px;
  --radius-default: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Alias */
  --radius: var(--radius-default);

  /* 10. TRANSICOES (usadas em templates e CSS) */

  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Duracoes e Easing (usados via aliases) */
  --duration-150: 150ms;
  --duration-200: 200ms;
  --duration-300: 300ms;
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* 11. MENU/SIDEBAR (Verde Premium DotCompany) */

  --menu-bg: #0f4c3a;
  --menu-text: #FFFFFF;
  --menu-icon: rgba(255, 255, 255, 0.7);
  --menu-hover: rgba(212, 168, 37, 0.15);
  --menu-active: rgba(212, 168, 37, 0.25);

  /* 12. CHART.JS COLORS (usadas via JS getPropertyValue) — Paleta verde/dourado premium */

  --chart-text: #263B4A;
  --chart-grid: rgba(0, 0, 0, 0.1);
  --chart-border: #E0E7ED;
  --chart-primary: #0f4c3a;
  --chart-secondary: #1a6b52;
  --chart-accent: #d4a825;
  --chart-success: #10B981;
  --chart-danger: #EF4444;
  --chart-warning: #F59E0B;
  --chart-info: #06B6D4;
  --chart-cyan: #06B6D4;
  --chart-purple: #8B5CF6;
  --chart-pink: #EC4899;
  --chart-orange: #F97316;

  /* STATUS SEMANTICO (novo 2026-04-17) - para Alpine :class bindings — Migracao de bg-green-500/text-red-500 hardcoded para tokens */
  --status-success: #10B981;
  --status-success-hover: #059669;
  --status-warning: #F59E0B;
  --status-warning-hover: #D97706;
  --status-error: #EF4444;
  --status-error-hover: #DC2626;
  --status-info: #3B82F6;
  --status-info-hover: #2563EB;
  --status-neutral: #6B7280;
  --status-neutral-hover: #4B5563;

  /* BADGES SEMANTICOS (novo 2026-04-17) - bg/text/border por variante — Usados pela macro Jinja badge_status em components/_badges.html — Valores para LIGHT mode. Dark override em html.theme-dark abaixo. */
  --badge-success-bg: #D1FAE5;
  --badge-success-text: #065F46;
  --badge-success-border: #A7F3D0;
  --badge-warning-bg: #FEF3C7;
  --badge-warning-text: #92400E;
  --badge-warning-border: #FDE68A;
  --badge-error-bg: #FEE2E2;
  --badge-error-text: #991B1B;
  --badge-error-border: #FECACA;
  --badge-info-bg: #DBEAFE;
  --badge-info-text: #1E40AF;
  --badge-info-border: #BFDBFE;
  --badge-neutral-bg: #F3F4F6;
  --badge-neutral-text: #374151;
  --badge-neutral-border: #E5E7EB;

  /* TEXTO SOBRE FUNDO SATURADO (Onda 1, 2026-07-11) — ADITIVO — Texto legivel sobre bg vivo/saturado do tema (--card-grad-*, — gradientes e solidos escuros). Par textual do --icon-on-saturated: — #ffffff em todos os 10 temas (bg saturados por tema sao escuros, — branco mantem AA). Overrides explicitos per-tema no final. */
  --text-on-saturated: #ffffff;

  /* TEXTO SOBRE SUPERFICIE ACCENT (2026-07-28) — ADITIVO
     O accent dos 11 temas e' CLARO (luminancia relativa >= 0.30: dourado,
     champanhe no dark, cyan, rosa, laranja, bronze...). Logo,
     --text-on-saturated (branco) NAO serve quando o accent e' usado como
     FUNDO — no dark o par "cinza-claro sobre champanhe" media 1.33:1. Texto
     ESCURO e o unico que fecha >= 4.5:1 em TODOS os temas (pior caso ~7.2:1).
     Par de --color-accent / --color-gold-600 quando eles sao BACKGROUND
     (.badge-premium, .bg-premium). NAO confundir com --text-on-saturated
     (fundo escuro/vivo) nem com --icon-on-primary (accent como COR). */
  --text-on-accent: #1a1a1a; /* lint-skip-U1: definicao de TOKEN — o literal aqui E o objetivo da U1 */

  /* ICONES — TOKENS SEMANTICOS DE CONTRASTE (U36, 2026-05-01) — Sistema "container declara tom, icone se adapta". — 5 tokens cobrem 100% dos casos. Overrides per-tema no final. — Ver: docs/referencias/icon-contrast-system.md */
  --icon-on-saturated: #ffffff;                              /* gradientes/solidos vivos */
  --icon-on-tinted:    var(--color-primary-700);             /* bg translucido / shade -50 */
  --icon-on-surface:   var(--text-primary);                  /* card branco / cinza claro */
  --icon-on-page:      var(--text-secondary);                /* fundo da pagina */
  --icon-on-primary:   var(--color-accent, #d4a825);         /* dourado brand DotCompany */

  --icon-glow-saturated: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
  --icon-glow-tinted:    none;

  /* TEXTO SEMANTICO THEME-AWARE (Onda 3 / LOT-0, 2026-07-12) — Fix-raiz do ESCURO-NO-ESCURO (classe C1): os shades — --color-{success,error,warning,info}-700 sao endpoint de — gradiente/borda e NUNCA foram remapeados no .dark — usados como — COR DE TEXTO ficam escuro-sobre-escuro (ilegivel). Estes 4 tokens — dedicados dao a cor de TEXTO legivel por tema: — :root / temas claros  -> tom escuro (~ -700) legivel sobre surface clara — .dark / html.theme-dark -> tom CLAREADO (~ -300) com contraste >=4.5:1 — sobre --bg-surface escura (#121A16). — NAO repointar consumidores aqui (isso e a Rodada 2) — so DEFINIR. */
  --semantic-text-success: var(--color-success-700);   /* #047857 legivel no claro */
  --semantic-text-danger:  var(--color-error-700);     /* #B91C1C */
  --semantic-text-warning: var(--color-warning-700);   /* #B45309 */
  --semantic-text-info:    var(--color-info-700);      /* #1D4ED8 */
}

/* @property — type-safety + transitions suaves no theme switch. — Baseline 2024 (todos os browsers modernos). Fallback abaixo via @supports. */
@property --icon-on-current-bg {
  syntax: '<color>';
  initial-value: currentColor;
  inherits: true;
}
@property --icon-current-glow {
  syntax: '*';
  initial-value: none;
  inherits: true;
}

/* DARK MODE - Sobrescreve variaveis */

.dark,
html.theme-dark {
  /* Identificador do tema */
  --theme-name: 'dark';
  --theme-display-name: 'Escuro';
  --theme-icon: 'bi-moon-stars-fill';

  /* Cores Primarias - Paleta completa para dark mode
     50-400: Tons CLAROS para texto/accents legíveis em fundo escuro
     500-950: Tons ESCUROS para backgrounds com texto branco (contraste WCAG ✓)
     ──────────────────────────────────────────────────────────────── */
  --color-primary-50: #E8F5F1;
  --color-primary-100: #C5E6DB;
  --color-primary-200: #9ED4C5;
  --color-primary-300: #77C2AF;
  --color-primary-400: #4FAF99;
  --color-primary-500: #2E8066;
  --color-primary-600: #1a6b52;
  --color-primary-700: #0f4c3a;
  --color-primary-800: #092e24;
  --color-primary-900: #061f19;
  --color-primary-950: #041510;
  --color-primary: #34D27E;
  --color-primary-hover: #5BE08F;
  --color-primary-rgb: 52, 210, 126;

  /* Accent CHAMPANHE (dark) — dourado suavizado/dessaturado, so guarnicao (BRIEF 5.4) */
  --color-gold-50: #FDF8E8;
  --color-gold-100: #F9EBC5;
  --color-gold-200: #F5DEA2;
  --color-gold-300: #EBCD6E;
  --color-gold-400: #EBD7A0;
  --color-gold-500: #E3C77A;
  --color-gold-600: #C9A24B;
  --color-gold-700: #9A7A23;
  --color-gold-800: #7C621C;
  --color-gold-900: #5E4A15;
  --color-gold-rgb: 227, 199, 122;
  --color-accent: #E3C77A;
  /* No escuro o dourado ORIGINAL ja e' o legivel: o gold-500 do tema claro sobre
     as superficies do dark mede 6,69 (gray-800) a 8,61 (quase preto) — medido no
     navegador, demo 327, 2026-08-01. Escurecer aqui seria a regressao (o tom do
     claro cairia para 2,57 sobre a surface do dark). */
  --color-accent-ink: #d4a825; /* lint-skip-U1: definicao de TOKEN — o literal aqui E o objetivo da U1 */

  /* Status (dark) — warning SEPARADO do accent (laranja-suave, nao amarelo-ouro) */
  --color-success: #34D27E;
  --color-success-bg: rgba(16, 185, 129, 0.15);
  --color-warning: #FBBF77;
  --color-warning-bg: rgba(245, 158, 11, 0.15);
  --color-error: #FCA5A5;
  --color-danger: #FCA5A5;
  --color-error-bg: rgba(239, 68, 68, 0.15);
  --color-info: #7FB0FF;
  --color-info-bg: rgba(59, 130, 246, 0.15);

  /* Superficies — preto TINGIDO de verde, nunca #0A0A0A (halacao/smear OLED) */
  --bg-page: #0A0F0D;
  --bg-surface: #121A16;
  --bg-surface-elevated: #18221D;
  --bg-surface-secondary: #0E1411;
  /* par escuro de --modal-scroll-fade (ver a nota longa no :root). Este bloco e'
     `.dark, html.theme-dark`: como NENHUM tema claro declara este nome, o
     `.dark` sozinho (mobile) tambem resolve escuro. */
  --modal-scroll-fade: #121A16; /* lint-skip-U1: definicao de TOKEN — o literal aqui E o objetivo da U1 */
  /* Fundos recuados no dark: MAIS ESCUROS que --bg-surface, preto tingido de
     verde (nunca cinza claro). --bg-subtle repete --bg-surface-secondary, que e
     exatamente o valor que bootstrap-compat.css (.dark .progress, L1195) ja
     usava como fallback esperando este token existir. */
  --bg-subtle: #0E1411; /* lint-skip-U1: definicao de TOKEN — o literal aqui E o objetivo da U1 */
  --bg-muted: #0A0F0D; /* lint-skip-U1: definicao de TOKEN — o literal aqui E o objetivo da U1 */
  --bg-overlay: rgba(0, 0, 0, 0.8);
  --bg-hover: rgba(52, 210, 126, 0.06);

  /* Alias */
  --background: var(--bg-page);
  --surface: var(--bg-surface);

  /* Textos — off-white (acalma halacao); link/foco seguem a MARCA (verde), nao roxo */
  --text-primary: #E8EDEA;
  --text-secondary: #A7B2AB;
  --text-muted: #828D85;
  --text-disabled: #52605A;
  --text-link: #34D27E;
  --text-link-hover: #5BE08F;

  /* Alias */
  --text: var(--text-primary);

  /* Bordas hairline */
  --border-light: #161D19;
  --border-default: #1E2722;
  --border-strong: #2A352E;
  --border-focus: #34D27E;

  /* Alias */
  --border: var(--border-default);

  /* Sombras dark — elevacao por borda+highlight (sombra preta some no escuro) */
  --shadow-sm: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 4px 12px -6px rgba(0, 0, 0, 0.6);
  --shadow-default: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 8px 22px -10px rgba(0, 0, 0, 0.65);
  --shadow-md: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 10px 28px -10px rgba(0, 0, 0, 0.7);
  --shadow-lg: 0 16px 44px -14px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-xl: 0 24px 60px -16px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.06);

  /* Alias */
  --shadow: var(--shadow-default);

  /* Menu (Dark mode com verde on-brand) */
  --menu-bg: #0C1F18;
  --menu-text: #E8EDEA;
  --menu-icon: #9ED4C5;
  --menu-hover: rgba(52, 210, 126, 0.14);
  --menu-active: rgba(52, 210, 126, 0.22);

  /* Gradientes */
  --gradient-primary: linear-gradient(135deg, #34D27E 0%, #16a34a 100%);
  --gradient-accent: linear-gradient(135deg, #EBD7A0 0%, #E3C77A 100%);
  --gradient-success: linear-gradient(135deg, #6EE7B7 0%, #10B981 100%);
  /* Gradientes semanticos ajustados para contraste em dark mode (fix 2026-04-17) */
  --gradient-warning: linear-gradient(135deg, #FBBF77 0%, #D97706 100%);
  --gradient-info: linear-gradient(135deg, #7FB0FF 0%, #2563EB 100%);
  --gradient-dark: linear-gradient(135deg, #18221D 0%, #121A16 100%);

  /* Chart.js — texto claro, grid sutil, info != ciano-neon estridente */
  --chart-text: #A7B2AB;
  --chart-grid: rgba(255, 255, 255, 0.08);
  --chart-border: #1E2722;
  --chart-primary: #34D27E;
  --chart-secondary: #5BE08F;
  --chart-accent: #E3C77A;
  --chart-success: #34D27E;
  --chart-danger: #FCA5A5;
  --chart-warning: #FBBF77;
  --chart-info: #7FB0FF;
  --chart-cyan: #00D9FF;
  --chart-purple: #A78BFA;
  --chart-pink: #F472B6;
  --chart-orange: #FB923C;

  /* Badges dark — alto contraste, sem amarelo cru (warning separado do accent) */
  --badge-success-bg: rgba(52, 210, 126, 0.14);
  --badge-success-text: #5BE08F;
  --badge-success-border: rgba(52, 210, 126, 0.32);
  --badge-warning-bg: rgba(251, 191, 119, 0.14);
  --badge-warning-text: #FBBF77;
  --badge-warning-border: rgba(251, 191, 119, 0.32);
  --badge-error-bg: rgba(252, 165, 165, 0.14);
  --badge-error-text: #FCA5A5;
  --badge-error-border: rgba(252, 165, 165, 0.32);
  --badge-info-bg: rgba(127, 176, 255, 0.14);
  --badge-info-text: #7FB0FF;
  --badge-info-border: rgba(127, 176, 255, 0.32);
  --badge-neutral-bg: rgba(168, 178, 171, 0.16);
  --badge-neutral-text: #A7B2AB;
  --badge-neutral-border: rgba(168, 178, 171, 0.30);

  /* Status semantico - cores mantem (semantico), hover ajusta */
  --status-success-hover: #34D399;
  --status-warning-hover: #FBBF24;
  --status-error-hover: #F87171;
  --status-info-hover: #60A5FA;
  --status-neutral-hover: #9CA3AF;

  /* Texto semantico theme-aware (Onda 3 / LOT-0) — versao CLAREADA (~-300).
     Contraste medido >=4.5:1 sobre --bg-surface (#121A16) e --bg-page (#0A0F0D). */
  --semantic-text-success: #6EE7B7;   /* success-300 */
  --semantic-text-danger:  #FCA5A5;   /* error-300 (mesmo tom ja usado em --color-error dark) */
  --semantic-text-warning: #FCD34D;   /* warning-300 */
  --semantic-text-info:    #93C5FD;   /* info-300 */
}

/* CLASSES UTILITARIAS BASEADAS NAS VARIAVEIS */

/* Cores de texto */
.text-primary-var { color: var(--color-primary); }
.text-success-var { color: var(--color-success); }
.text-warning-var { color: var(--color-warning); }
.text-error-var { color: var(--color-error); }
.text-info-var { color: var(--color-info); }

/* Backgrounds */
.bg-page-var { background-color: var(--bg-page); }
.bg-surface-var { background-color: var(--icon-on-saturated, #ffffff); }
.bg-primary-var { background-color: var(--color-primary); }
.bg-success-var { background-color: var(--color-success); }
.bg-warning-var { background-color: var(--color-warning); }
.bg-error-var { background-color: var(--color-error); }

/* Sombras */
.shadow-xs-var { box-shadow: var(--shadow-xs); }
.shadow-sm-var { box-shadow: var(--shadow-sm); }
.shadow-var { box-shadow: var(--shadow-default); }
.shadow-md-var { box-shadow: var(--shadow-md); }
.shadow-lg-var { box-shadow: var(--shadow-lg); }
.shadow-xl-var { box-shadow: var(--shadow-xl); }

/* Border Radius */
.rounded-sm-var { border-radius: var(--radius-sm); }
.rounded-var { border-radius: var(--radius-default); }
.rounded-md-var { border-radius: var(--radius-md); }
.rounded-lg-var { border-radius: var(--radius-lg); }
.rounded-xl-var { border-radius: var(--radius-xl); }
.rounded-full-var { border-radius: var(--radius-full); }

/* Transicoes */
.transition-fast-var { transition: all var(--transition-fast); }
.transition-var { transition: all var(--transition-base); }
.transition-slow-var { transition: all var(--transition-slow); }

/* CLASSES ACCENT (Cor de destaque que muda com o tema) — Verde: dourado | Azul: cyan | Roxo: pink | Bordô: dourado */

/* Text Accent */
.text-accent-50 { color: var(--color-gold-50); }
.text-accent-100 { color: var(--color-gold-100); }
.text-accent-200 { color: var(--color-gold-200); }
.text-accent-300 { color: var(--color-gold-300); }
.text-accent-400 { color: var(--color-gold-400); }
.text-accent-500 { color: var(--color-accent); }
.text-accent-600 { color: var(--color-gold-600); }
.text-accent-700 { color: var(--color-gold-700); }
.text-accent-800 { color: var(--color-gold-800); }
.text-accent-900 { color: var(--color-gold-900); }
.text-accent { color: var(--color-accent); }

/* O dourado como TEXTO em superficie clara (WCAG 2.2 AA, criterio 1.4.3).
   O prefixo `html` (0,1,1) e' de proposito: `tailwind-compiled.css` carrega
   DEPOIS deste arquivo no bundle, entao uma utilitaria (0,1,0) empatada
   perderia por ORDEM se alguem deixasse as duas classes na mesma tag. Sem
   !important — especificidade basta e continua sobrescrevivel na tela. */
html .text-accent-ink { color: var(--color-accent-ink, #7c621c); } /* lint-skip-U1: fallback do token, exatamente o que a U1 pede */

/* Background Accent */
.bg-accent-50 { background-color: var(--color-gold-50); }
.bg-accent-100 { background-color: var(--color-gold-100); }
.bg-accent-200 { background-color: var(--color-gold-200); }
.bg-accent-300 { background-color: var(--color-gold-300); }
.bg-accent-400 { background-color: var(--color-gold-400); }
.bg-accent-500 { background-color: var(--color-accent); }
.bg-accent-600 { background-color: var(--color-gold-600); }
.bg-accent-700 { background-color: var(--color-gold-700); }
.bg-accent-800 { background-color: var(--color-gold-800); }
.bg-accent-900 { background-color: var(--color-gold-900); }
.bg-accent { background-color: var(--color-accent); }

/* Border Accent */
.border-accent-50 { border-color: var(--color-gold-50); }
.border-accent-100 { border-color: var(--color-gold-100); }
.border-accent-200 { border-color: var(--color-gold-200); }
.border-accent-300 { border-color: var(--color-gold-300); }
.border-accent-400 { border-color: var(--color-gold-400); }
.border-accent-500 { border-color: var(--color-accent); }
.border-accent-600 { border-color: var(--color-gold-600); }
.border-accent-700 { border-color: var(--color-gold-700); }
.border-accent-800 { border-color: var(--color-gold-800); }
.border-accent-900 { border-color: var(--color-gold-900); }
.border-accent { border-color: var(--color-accent); }

/* Ring Accent */
.ring-accent-100 { --tw-ring-color: var(--color-gold-100); }
.ring-accent-200 { --tw-ring-color: var(--color-gold-200); }
.ring-accent-300 { --tw-ring-color: var(--color-gold-300); }
.ring-accent-400 { --tw-ring-color: var(--color-gold-400); }
.ring-accent-500 { --tw-ring-color: var(--color-accent); }
.ring-accent-600 { --tw-ring-color: var(--color-gold-600); }
.ring-accent { --tw-ring-color: var(--color-accent); }

/* Gradientes Accent (from/via/to) */
.from-accent-400 { --tw-gradient-from: var(--color-gold-400) var(--tw-gradient-from-position); }
.from-accent-500 { --tw-gradient-from: var(--color-accent) var(--tw-gradient-from-position); }
.from-accent-600 { --tw-gradient-from: var(--color-gold-600) var(--tw-gradient-from-position); }
.via-accent-500 { --tw-gradient-via: var(--color-accent) var(--tw-gradient-via-position); }
.to-accent-500 { --tw-gradient-to: var(--color-accent) var(--tw-gradient-to-position); }
.to-accent-600 { --tw-gradient-to: var(--color-gold-600) var(--tw-gradient-to-position); }
.to-accent-700 { --tw-gradient-to: var(--color-gold-700) var(--tw-gradient-to-position); }

/* Shadow Accent (com opacidade) */
.shadow-accent-500\/10 { --tw-shadow-color: rgb(var(--color-gold-rgb) / 0.1); --tw-shadow: var(--tw-shadow-colored); }
.shadow-accent-500\/20 { --tw-shadow-color: rgb(var(--color-gold-rgb) / 0.2); --tw-shadow: var(--tw-shadow-colored); }
.shadow-accent-500\/30 { --tw-shadow-color: rgb(var(--color-gold-rgb) / 0.3); --tw-shadow: var(--tw-shadow-colored); }
.shadow-accent-500\/40 { --tw-shadow-color: rgb(var(--color-gold-rgb) / 0.4); --tw-shadow: var(--tw-shadow-colored); }
.shadow-accent-500\/50 { --tw-shadow-color: rgb(var(--color-gold-rgb) / 0.5); --tw-shadow: var(--tw-shadow-colored); }

/* ALIASES DE COMPATIBILIDADE — Garantem que codigo existente continue funcionando */

:root {
  /* ────────────────────────────────────────────────────────────
     Aliases para theme-styles.css (--primary, --background, etc.)
     ──────────────────────────────────────────────────────────── */
  --primary: var(--color-primary);
  --primary-hover: var(--color-primary-hover);
  --primary-rgb: var(--color-primary-rgb);
  --secondary: var(--color-secondary);
  --accent: var(--color-accent);
  --background: var(--bg-page);
  --surface: var(--bg-surface);
  --text: var(--text-primary);
  --text-secondary: var(--text-secondary);
  --text-muted: var(--text-muted);
  --border: var(--border-default);
  --shadow: var(--shadow-default);
  --shadow-lg: var(--shadow-lg);
  --success: var(--color-success);
  --warning: var(--color-warning);
  --error: var(--color-error);
  --danger: var(--color-error);
  --info: var(--color-info);

  /* ────────────────────────────────────────────────────────────
     Aliases para theme-system.css (--theme-*)
     ──────────────────────────────────────────────────────────── */
  --theme-primary-rgb: var(--color-primary-rgb);
  --theme-background: var(--bg-page);
  --theme-surface: var(--bg-surface);
  --theme-surface-elevated: var(--bg-surface-elevated);
  --theme-text-primary: var(--text-primary);
  --theme-text-secondary: var(--text-secondary);
  --theme-text-muted: var(--text-muted);
  --theme-border: var(--border-default);
  --theme-border-strong: var(--border-strong);
  --theme-shadow: var(--shadow-default);
  --theme-shadow-lg: var(--shadow-lg);

  /* ────────────────────────────────────────────────────────────
     Aliases para transicoes (diferentes nomes usados)
     ──────────────────────────────────────────────────────────── */
  --transition-normal: var(--transition-base);

  /* ────────────────────────────────────────────────────────────
     Aliases para border radius (--theme-radius-*)
     ──────────────────────────────────────────────────────────── */
  --theme-radius: var(--radius-default);
  --theme-radius-md: var(--radius-md);
  --theme-radius-lg: var(--radius-lg);

  /* ────────────────────────────────────────────────────────────
     Aliases para tipografia
     ──────────────────────────────────────────────────────────── */

  /* ────────────────────────────────────────────────────────────
     Aliases para espacamento (dashboard-campanha.css)
     ──────────────────────────────────────────────────────────── */
  --spacing-xs: var(--spacing-1);
  --spacing-sm: var(--spacing-2);
  --spacing-md: var(--spacing-4);
  --spacing-lg: var(--spacing-6);
  --spacing-xl: var(--spacing-8);

  /* ────────────────────────────────────────────────────────────
     VARIAVEIS DE IMPRESSAO (print_standards.css)
     ──────────────────────────────────────────────────────────── */
  --print-primary: #0f4c3a;
  --print-secondary: #6B7280;
  --print-success: #10B981;
  --print-warning: #F59E0B;
  --print-danger: #EF4444;
  --print-bg-light: #F9FAFB;
  --print-bg-highlight: #FEF3C7;
  --print-border: #E5E7EB;
  --print-border-dark: #9CA3AF;
  --print-space-xs: 0.125rem;
  --print-space-sm: 0.25rem;
  --print-space-md: 0.5rem;
  --print-space-lg: 1rem;
  --print-space-xl: 1.5rem;
  --print-space-2xl: 2rem;
  --print-font-xs: 0.625rem;
  --print-font-sm: 0.75rem;
  --print-font-md: 0.875rem;
  --print-font-base: 1rem;
  --print-font-lg: 1.125rem;
  --print-font-2xl: 1.5rem;
  --print-font-4xl: 2.25rem;
  --print-font-main: var(--font-sans);
  --print-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* ────────────────────────────────────────────────────────────
     VARIAVEIS DO MODULO FROTA (frota/frota.css)
     ──────────────────────────────────────────────────────────── */
  --frota-primary: #0f4c3a;
  --frota-secondary: #6B7280;
  --frota-success: #10B981;
  --frota-warning: #F59E0B;
  --frota-danger: #EF4444;
  --frota-info: #3B82F6;
  --frota-light: #F3F4F6;
  --frota-dark: #1F2937;
  --frota-border: #E5E7EB;
  --frota-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);

  /* ────────────────────────────────────────────────────────────
     VARIAVEIS GPU BOOST (gpu-boost.css)
     ──────────────────────────────────────────────────────────── */
  --gpu-duration-fast: 150ms;
  --gpu-duration-base: 200ms;
  --gpu-ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* ────────────────────────────────────────────────────────────
     VARIAVEIS WHATSAPP (dashboard-campanha.css)
     ──────────────────────────────────────────────────────────── */
  --whatsapp-green: #25D366;
  --whatsapp-dark: #128C7E;

  /* ────────────────────────────────────────────────────────────
     VARIAVEIS DE SOMBRA ADICIONAIS (dashboard-campanha.css)
     ──────────────────────────────────────────────────────────── */
  --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.08);

  /* ────────────────────────────────────────────────────────────
     VARIAVEIS DE ICONES (bootstrap-icons-premium.css)
     ──────────────────────────────────────────────────────────── */
  /* Tamanhos de icones por contexto */
  --icon-size: 1rem;
  --icon-size-global: 1rem;
  --icon-size-menu: 1.25rem;
  --icon-size-submenu: 1rem;
  --icon-size-header: 1.5rem;
  --icon-size-button: 1rem;
  --card-icon-size: 1.25rem;
  --form-icon-size: 1rem;
  --table-icon-size: 1rem;
  --table-action-icon-size: 1.125rem;
  --modal-icon-size: 1.5rem;
  --modal-header-icon-size: 1.25rem;

  /* Cores de icones */
  --icon-color: var(--text-primary);
  --icon-color-menu: var(--text-secondary);
  --icon-color-hover: var(--color-primary);
  --icon-color-primary: var(--color-primary);
  --icon-color-secondary: var(--color-secondary);
  --icon-color-success: var(--color-success);
  --icon-color-danger: var(--color-error);
  --icon-color-warning: var(--color-warning);
  --icon-color-info: var(--color-info);
  --card-icon-color: var(--text-secondary);
  --form-icon-color: var(--text-muted);

  /* Propriedades de icones */
  --icon-opacity: 1;
  --form-icon-opacity: 0.7;
  --icon-transition: all 0.2s ease;

  /* ────────────────────────────────────────────────────────────
     VARIAVEIS HOME PAGE (home_page/index.html)
     ──────────────────────────────────────────────────────────── */
  --dark: #1a1a1a;
  --light: #F9FAFB;
  --gray: #6B7280;
  --light-gray: #E5E7EB;
  --gradient: linear-gradient(135deg, #0f4c3a 0%, #1a6b52 100%);
}

/* Dark mode - aliases tambem precisam ser atualizados */
.dark,
html.theme-dark {
  --primary: var(--color-primary);
  --primary-hover: var(--color-primary-hover);
  --background: var(--bg-page);
  --surface: var(--bg-surface);
  --text: var(--text-primary);
  --border: var(--border-default);
  --shadow: var(--shadow-default);
  --success: var(--color-success);
  --warning: var(--color-warning);
  --error: var(--color-error);
  --danger: var(--color-error);
  --info: var(--color-info);

  /* Theme aliases em dark mode */
  --theme-background: var(--bg-page);
  --theme-surface: var(--bg-surface);
  --theme-text-primary: var(--text-primary);
  --theme-border: var(--border-default);
  --theme-shadow: var(--shadow-default);

  /* Frota em dark mode */
  --frota-primary: #4FAF99;
  --frota-light: #27272A;
  --frota-dark: #F9FAFB;
  --frota-border: #3F3F46;
  --frota-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);

  /* Sombras em dark mode */
  --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.2);

  /* Icones em dark mode */
  --card-icon-color: var(--text-secondary);
  --form-icon-color: var(--text-muted);

  /* Home page em dark mode */
  --dark: #F9FAFB;
  --light: #18181B;
  --gray: #9CA3AF;
  --light-gray: #3F3F46;
  --gradient: linear-gradient(135deg, #34D27E 0%, #16a34a 100%);
}

/* AZUL PREMIUM - theme-light — Tema claro profissional com azul Material Design + Cyan accent — Formula: AZUL (#1976D2) + CYAN (#00B4D8) = Premium Moderno */

html.theme-light {
  /* Identificador do tema */
  --theme-name: 'azul';
  --theme-display-name: 'Azul Premium';
  --theme-icon: 'bi-droplet-fill';

  /* ────────────────────────────────────────────────────────────
     AZUL MATERIAL (Primary) - Paleta completa
     ──────────────────────────────────────────────────────────── */
  --color-primary-50: #E3F2FD;
  --color-primary-100: #BBDEFB;
  --color-primary-200: #90CAF9;
  --color-primary-300: #64B5F6;
  --color-primary-400: #42A5F5;
  --color-primary-500: #2196F3;
  --color-primary-600: #1976D2;
  --color-primary-700: #1565C0;
  --color-primary-800: #0D47A1;
  --color-primary-900: #0A3D91;
  --color-primary-950: #072D6B;
  --color-primary-rgb: 25, 118, 210;

  /* Alias para compatibilidade */
  --color-primary: #1976D2;
  --color-primary-hover: #1565C0;

  /* ────────────────────────────────────────────────────────────
     CYAN (Accent - equivalente ao Dourado no Verde Premium)
     ──────────────────────────────────────────────────────────── */
  --color-accent: #00B4D8;
  --color-secondary: #0288D1;

  /* Mapeamento gold → cyan para classes accent funcionarem */
  --color-gold-50: #ECFEFF;
  --color-gold-100: #CFFAFE;
  --color-gold-200: #A5F3FC;
  --color-gold-300: #67E8F9;
  --color-gold-400: #22D3EE;
  --color-gold-500: #00B4D8;
  --color-gold-600: #0891B2;
  --color-gold-700: #0E7490;
  --color-gold-800: #155E75;
  --color-gold-900: #164E63;
  --color-gold-rgb: 0, 180, 216;

  /* ────────────────────────────────────────────────────────────
     SUPERFICIES (Backgrounds CLAROS - Azul Premium)
     ──────────────────────────────────────────────────────────── */
  --bg-page: #F0F4FA;
  --bg-surface: #FFFFFF;
  --bg-surface-elevated: #FFFFFF;
  /* Fundos recuados (azul) — ver bloco :root para a semantica */
  --bg-subtle: #EDF2F8; /* lint-skip-U1: definicao de TOKEN — o literal aqui E o objetivo da U1 */
  --bg-muted: #E4EAF2; /* lint-skip-U1: definicao de TOKEN — o literal aqui E o objetivo da U1 */
  --bg-overlay: rgba(0, 0, 0, 0.5);
  --bg-hover: rgba(25, 118, 210, 0.06);

  /* Alias */
  --background: var(--bg-page);
  --surface: var(--bg-surface);

  /* ────────────────────────────────────────────────────────────
     TEXTOS (Escuros para fundo claro!)
     ──────────────────────────────────────────────────────────── */
  --text-primary: #1E293B;
  --text-secondary: #475569;
  --text-muted: #5A6A78;
  --text-disabled: #94A3B8;
  --text-inverse: #FFFFFF;
  --text-link: #1976D2;
  --text-link-hover: #1565C0;

  /* Alias */
  --text: var(--text-primary);

  /* ────────────────────────────────────────────────────────────
     BORDAS (Azuladas suaves para fundo claro)
     ──────────────────────────────────────────────────────────── */
  --border-light: #E2E8F0;
  --border-default: #CBD5E1;
  --border-strong: #94A3B8;
  --border-focus: #1976D2;

  /* Alias */
  --border: var(--border-default);

  /* ────────────────────────────────────────────────────────────
     SOMBRAS (suaves para fundo claro)
     ──────────────────────────────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-default: 0 2px 6px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.15);
  --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.06);

  /* Alias */
  --shadow: var(--shadow-default);

  /* ────────────────────────────────────────────────────────────
     MENU/SIDEBAR (Azul escuro profissional)
     ──────────────────────────────────────────────────────────── */
  --menu-bg: #1565C0;
  --menu-text: #FFFFFF;
  --menu-icon: rgba(255, 255, 255, 0.85);
  --menu-hover: rgba(255, 255, 255, 0.12);
  --menu-active: rgba(255, 255, 255, 0.2);

  /* ────────────────────────────────────────────────────────────
     GRADIENTES
     ──────────────────────────────────────────────────────────── */
  --gradient-primary: linear-gradient(135deg, #1976D2 0%, #1565C0 100%);
  --gradient-accent: linear-gradient(135deg, #00B4D8 0%, #0288D1 100%);
  --gradient-success: linear-gradient(135deg, #10B981 0%, #059669 100%);

  /* ────────────────────────────────────────────────────────────
     CHART.JS (texto escuro para fundo claro)
     ──────────────────────────────────────────────────────────── */
  --chart-text: #1E293B;
  --chart-grid: rgba(0, 0, 0, 0.08);
  --chart-border: #CBD5E1;
  --chart-primary: #1976D2;
  --chart-secondary: #42A5F5;
  --chart-accent: #00B4D8;
  --chart-success: #10B981;
  --chart-danger: #EF4444;
  --chart-warning: #F59E0B;
  --chart-info: #06B6D4;
  --chart-cyan: #06B6D4;
  --chart-purple: #8B5CF6;
  --chart-pink: #EC4899;
  --chart-orange: #F97316;

  /* ────────────────────────────────────────────────────────────
     ALIASES GLOBAIS
     ──────────────────────────────────────────────────────────── */
  --primary: var(--color-primary);
  --primary-hover: var(--color-primary-hover);
  --primary-rgb: var(--color-primary-rgb);
  --secondary: var(--color-secondary);
  --accent: var(--color-accent);

  /* Theme aliases */
  --theme-primary-rgb: var(--color-primary-rgb);
  --theme-background: var(--bg-page);
  --theme-surface: var(--bg-surface);
  --theme-text-primary: var(--text-primary);
  --theme-border: var(--border-default);
  --theme-shadow: var(--shadow-default);

  /* Frota */
  --frota-primary: #1976D2;
  --frota-light: #F0F4FA;
  --frota-dark: #0D47A1;
  --frota-border: #CBD5E1;
  --frota-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.06);

  /* Home page */
  --dark: #1E293B;
  --light: #F0F4FA;
  --gray: #64748B;
  --light-gray: #E2E8F0;
  --gradient: linear-gradient(135deg, #1976D2 0%, #1565C0 100%);
}

/* ROXO PREMIUM - theme-roxo — Tema criativo/luxo com violeta profundo + accent pink — Formula: VIOLETA (#6D28D9) + PINK (#F472B6) = Premium Criativo */

html.theme-roxo {
  /* Identificador do tema */
  --theme-name: 'roxo';
  --theme-display-name: 'Roxo Premium';
  --theme-icon: 'bi-gem';

  /* ────────────────────────────────────────────────────────────
     VIOLETA (Primary) - Paleta completa
     ──────────────────────────────────────────────────────────── */
  --color-primary-50: #F5F3FF;
  --color-primary-100: #EDE9FE;
  --color-primary-200: #DDD6FE;
  --color-primary-300: #C4B5FD;
  --color-primary-400: #A78BFA;
  --color-primary-500: #8B5CF6;
  --color-primary-600: #7C3AED;
  --color-primary-700: #6D28D9;
  --color-primary-800: #5B21B6;
  --color-primary-900: #4C1D95;
  --color-primary-950: #2E1065;
  --color-primary-rgb: 109, 40, 217;

  /* Alias para compatibilidade */
  --color-primary: #6D28D9;
  --color-primary-hover: #5B21B6;

  /* ────────────────────────────────────────────────────────────
     PINK (Accent - equivalente ao Dourado no Verde Premium)
     ──────────────────────────────────────────────────────────── */
  --color-accent: #F472B6;
  --color-secondary: #8B5CF6;

  /* Mapeamento gold → pink para classes accent funcionarem */
  --color-gold-50: #FDF2F8;
  --color-gold-100: #FCE7F3;
  --color-gold-200: #FBCFE8;
  --color-gold-300: #F9A8D4;
  --color-gold-400: #F472B6;
  --color-gold-500: #F472B6;
  --color-gold-600: #EC4899;
  --color-gold-700: #DB2777;
  --color-gold-800: #BE185D;
  --color-gold-900: #9D174D;
  --color-gold-rgb: 244, 114, 182;

  /* ────────────────────────────────────────────────────────────
     SUPERFICIES (Backgrounds CLAROS - Roxo Premium)
     ──────────────────────────────────────────────────────────── */
  --bg-page: #F5F3FF;
  --bg-surface: #FFFFFF;
  --bg-surface-elevated: #FFFFFF;
  /* Fundos recuados (roxo) — ver bloco :root para a semantica */
  --bg-subtle: #F2F0FC; /* lint-skip-U1: definicao de TOKEN — o literal aqui E o objetivo da U1 */
  --bg-muted: #EAE7F8; /* lint-skip-U1: definicao de TOKEN — o literal aqui E o objetivo da U1 */
  --bg-overlay: rgba(0, 0, 0, 0.5);
  --bg-hover: rgba(109, 40, 217, 0.06);

  /* Alias */
  --background: var(--bg-page);
  --surface: var(--bg-surface);

  /* ────────────────────────────────────────────────────────────
     TEXTOS (Escuros para fundo claro!)
     ──────────────────────────────────────────────────────────── */
  --text-primary: #1E1B2E;
  --text-secondary: #4A4568;
  --text-muted: #6B6390;
  --text-disabled: #9B95B5;
  --text-inverse: #FFFFFF;
  --text-link: #6D28D9;
  --text-link-hover: #5B21B6;

  /* Alias */
  --text: var(--text-primary);

  /* ────────────────────────────────────────────────────────────
     BORDAS (Violeta suaves para fundo claro)
     ──────────────────────────────────────────────────────────── */
  --border-light: #E9E5F5;
  --border-default: #D4CEE8;
  --border-strong: #A8A0C4;
  --border-focus: #7C3AED;

  /* Alias */
  --border: var(--border-default);

  /* ────────────────────────────────────────────────────────────
     SOMBRAS (suaves para fundo claro)
     ──────────────────────────────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(109, 40, 217, 0.04);
  --shadow-sm: 0 1px 3px rgba(109, 40, 217, 0.06);
  --shadow-default: 0 2px 6px rgba(109, 40, 217, 0.08);
  --shadow-md: 0 4px 12px rgba(109, 40, 217, 0.1);
  --shadow-lg: 0 10px 30px rgba(109, 40, 217, 0.12);
  --shadow-xl: 0 20px 50px rgba(109, 40, 217, 0.15);
  --shadow-soft: 0 2px 8px rgba(109, 40, 217, 0.06);

  /* Alias */
  --shadow: var(--shadow-default);

  /* ────────────────────────────────────────────────────────────
     MENU/SIDEBAR (Violeta escuro profissional)
     ──────────────────────────────────────────────────────────── */
  --menu-bg: #5B21B6;
  --menu-text: #FFFFFF;
  --menu-icon: rgba(255, 255, 255, 0.85);
  --menu-hover: rgba(244, 114, 182, 0.18);
  --menu-active: rgba(244, 114, 182, 0.28);

  /* ────────────────────────────────────────────────────────────
     GRADIENTES
     ──────────────────────────────────────────────────────────── */
  --gradient-primary: linear-gradient(135deg, #7C3AED 0%, #5B21B6 100%);
  --gradient-accent: linear-gradient(135deg, #F472B6 0%, #EC4899 100%);
  --gradient-success: linear-gradient(135deg, #10B981 0%, #059669 100%);

  /* ────────────────────────────────────────────────────────────
     CHART.JS (texto escuro para fundo claro)
     ──────────────────────────────────────────────────────────── */
  --chart-text: #1E1B2E;
  --chart-grid: rgba(109, 40, 217, 0.08);
  --chart-border: #D4CEE8;
  --chart-primary: #7C3AED;
  --chart-secondary: #A78BFA;
  --chart-accent: #F472B6;
  --chart-success: #10B981;
  --chart-danger: #EF4444;
  --chart-warning: #F59E0B;
  --chart-info: #06B6D4;
  --chart-cyan: #06B6D4;
  --chart-purple: #6D28D9;
  --chart-pink: #EC4899;
  --chart-orange: #F97316;

  /* ────────────────────────────────────────────────────────────
     ALIASES GLOBAIS
     ──────────────────────────────────────────────────────────── */
  --primary: var(--color-primary);
  --primary-hover: var(--color-primary-hover);
  --primary-rgb: var(--color-primary-rgb);
  --secondary: var(--color-secondary);
  --accent: var(--color-accent);

  /* Theme aliases */
  --theme-primary-rgb: var(--color-primary-rgb);
  --theme-background: var(--bg-page);
  --theme-surface: var(--bg-surface);
  --theme-text-primary: var(--text-primary);
  --theme-border: var(--border-default);
  --theme-shadow: var(--shadow-default);

  /* Frota */
  --frota-primary: #7C3AED;
  --frota-light: #F5F3FF;
  --frota-dark: #4C1D95;
  --frota-border: #D4CEE8;
  --frota-shadow: 0 4px 6px -1px rgba(109, 40, 217, 0.06);

  /* Home page */
  --dark: #1E1B2E;
  --light: #F5F3FF;
  --gray: #6B6390;
  --light-gray: #E9E5F5;
  --gradient: linear-gradient(135deg, #7C3AED 0%, #5B21B6 100%);
}

/* BORDÔ PREMIUM - theme-bordo — Tema quente/sofisticado com bordô profundo + accent dourado — Formula: BORDÔ (#9F1239) + DOURADO (#D4A825) = Premium Sofisticado */

html.theme-bordo {
  /* Identificador do tema */
  --theme-name: 'bordo';
  --theme-display-name: 'Bordô Premium';
  --theme-icon: 'bi-fire';

  /* ────────────────────────────────────────────────────────────
     BORDÔ / ROSE (Primary) - Paleta completa
     ──────────────────────────────────────────────────────────── */
  --color-primary-50: #FFF1F2;
  --color-primary-100: #FFE4E6;
  --color-primary-200: #FECDD3;
  --color-primary-300: #FDA4AF;
  --color-primary-400: #FB7185;
  --color-primary-500: #F43F5E;
  --color-primary-600: #E11D48;
  --color-primary-700: #BE123C;
  --color-primary-800: #9F1239;
  --color-primary-900: #881337;
  --color-primary-950: #4C0519;
  --color-primary-rgb: 159, 18, 57;

  /* Alias para compatibilidade */
  --color-primary: #9F1239;
  --color-primary-hover: #881337;

  /* ────────────────────────────────────────────────────────────
     DOURADO (Accent - mesma identidade premium do Verde)
     ──────────────────────────────────────────────────────────── */
  --color-accent: #D4A825;
  --color-secondary: #E11D48;

  /* Mapeamento gold (mesmo dourado do tema Verde) */
  --color-gold-50: #FDF8E8;
  --color-gold-100: #F9EBC5;
  --color-gold-200: #F5DEA2;
  --color-gold-300: #EBCD6E;
  --color-gold-400: #E0BC4A;
  --color-gold-500: #D4A825;
  --color-gold-600: #B8922A;
  --color-gold-700: #9A7A23;
  --color-gold-800: #7C621C;
  --color-gold-900: #5E4A15;
  --color-gold-rgb: 212, 168, 37;

  /* ────────────────────────────────────────────────────────────
     SUPERFICIES (Backgrounds CLAROS - Bordô Premium)
     ──────────────────────────────────────────────────────────── */
  --bg-page: #FFF1F2;
  --bg-surface: #FFFFFF;
  --bg-surface-elevated: #FFFFFF;
  /* Fundos recuados (bordo) — ver bloco :root para a semantica */
  --bg-subtle: #FDEEF0; /* lint-skip-U1: definicao de TOKEN — o literal aqui E o objetivo da U1 */
  --bg-muted: #F6E2E6; /* lint-skip-U1: definicao de TOKEN — o literal aqui E o objetivo da U1 */
  --bg-overlay: rgba(0, 0, 0, 0.5);
  --bg-hover: rgba(159, 18, 57, 0.06);

  /* Alias */
  --background: var(--bg-page);
  --surface: var(--bg-surface);

  /* ────────────────────────────────────────────────────────────
     TEXTOS (Escuros para fundo claro!)
     ──────────────────────────────────────────────────────────── */
  --text-primary: #2D1320;
  --text-secondary: #5C3A4A;
  --text-muted: #7A5568;
  --text-disabled: #A88B9A;
  --text-inverse: #FFFFFF;
  --text-link: #9F1239;
  --text-link-hover: #881337;

  /* Alias */
  --text: var(--text-primary);

  /* ────────────────────────────────────────────────────────────
     BORDAS (Rose suaves para fundo claro)
     ──────────────────────────────────────────────────────────── */
  --border-light: #F5E0E4;
  --border-default: #E8C8CF;
  --border-strong: #C4A0AA;
  --border-focus: #E11D48;

  /* Alias */
  --border: var(--border-default);

  /* ────────────────────────────────────────────────────────────
     SOMBRAS (suaves para fundo claro)
     ──────────────────────────────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(159, 18, 57, 0.04);
  --shadow-sm: 0 1px 3px rgba(159, 18, 57, 0.06);
  --shadow-default: 0 2px 6px rgba(159, 18, 57, 0.08);
  --shadow-md: 0 4px 12px rgba(159, 18, 57, 0.1);
  --shadow-lg: 0 10px 30px rgba(159, 18, 57, 0.12);
  --shadow-xl: 0 20px 50px rgba(159, 18, 57, 0.15);
  --shadow-soft: 0 2px 8px rgba(159, 18, 57, 0.06);

  /* Alias */
  --shadow: var(--shadow-default);

  /* ────────────────────────────────────────────────────────────
     MENU/SIDEBAR (Bordô escuro profissional)
     ──────────────────────────────────────────────────────────── */
  --menu-bg: #881337;
  --menu-text: #FFFFFF;
  --menu-icon: rgba(255, 255, 255, 0.85);
  --menu-hover: rgba(212, 168, 37, 0.18);
  --menu-active: rgba(212, 168, 37, 0.28);

  /* ────────────────────────────────────────────────────────────
     GRADIENTES
     ──────────────────────────────────────────────────────────── */
  --gradient-primary: linear-gradient(135deg, #9F1239 0%, #881337 100%);
  --gradient-accent: linear-gradient(135deg, #D4A825 0%, #B8921F 100%);
  --gradient-success: linear-gradient(135deg, #10B981 0%, #059669 100%);

  /* ────────────────────────────────────────────────────────────
     CHART.JS (texto escuro para fundo claro)
     ──────────────────────────────────────────────────────────── */
  --chart-text: #2D1320;
  --chart-grid: rgba(159, 18, 57, 0.08);
  --chart-border: #E8C8CF;
  --chart-primary: #9F1239;
  --chart-secondary: #E11D48;
  --chart-accent: #D4A825;
  --chart-success: #10B981;
  --chart-danger: #EF4444;
  --chart-warning: #F59E0B;
  --chart-info: #06B6D4;
  --chart-cyan: #06B6D4;
  --chart-purple: #8B5CF6;
  --chart-pink: #EC4899;
  --chart-orange: #F97316;

  /* ────────────────────────────────────────────────────────────
     ALIASES GLOBAIS
     ──────────────────────────────────────────────────────────── */
  --primary: var(--color-primary);
  --primary-hover: var(--color-primary-hover);
  --primary-rgb: var(--color-primary-rgb);
  --secondary: var(--color-secondary);
  --accent: var(--color-accent);

  /* Theme aliases */
  --theme-primary-rgb: var(--color-primary-rgb);
  --theme-background: var(--bg-page);
  --theme-surface: var(--bg-surface);
  --theme-text-primary: var(--text-primary);
  --theme-border: var(--border-default);
  --theme-shadow: var(--shadow-default);

  /* Frota */
  --frota-primary: #9F1239;
  --frota-light: #FFF1F2;
  --frota-dark: #4C0519;
  --frota-border: #E8C8CF;
  --frota-shadow: 0 4px 6px -1px rgba(159, 18, 57, 0.06);

  /* Home page */
  --dark: #2D1320;
  --light: #FFF1F2;
  --gray: #7A5568;
  --light-gray: #F5E0E4;
  --gradient: linear-gradient(135deg, #9F1239 0%, #881337 100%);
}

/* MALVA PREMIUM - theme-malva — Tema sofisticado com mauve profundo + accent dourado — Formula: MALVA (#635768) + DOURADO (#E0BC4A) = Premium Sofisticado */

html.theme-malva {
  /* Identificador do tema */
  --theme-name: 'malva';
  --theme-display-name: 'Malva Premium';
  --theme-icon: 'bi-flower2';

  /* ────────────────────────────────────────────────────────────
     MAUVE (Primary) - Paleta completa
     ──────────────────────────────────────────────────────────── */
  --color-primary-50: #fbfafb;
  --color-primary-100: #f4f1f4;
  --color-primary-200: #e7e2e7;
  --color-primary-300: #d5ced5;
  --color-primary-400: #a89ea8;
  --color-primary-500: #7e6f82;
  --color-primary-600: #635768;
  --color-primary-700: #514658;
  --color-primary-800: #38303e;
  --color-primary-900: #2c262f;
  --color-primary-950: #1c191e;
  --color-primary-rgb: 99, 87, 104;

  /* Alias para compatibilidade */
  --color-primary: #635768;
  --color-primary-hover: #514658;

  /* ────────────────────────────────────────────────────────────
     DOURADO (Accent - mesma identidade premium)
     ──────────────────────────────────────────────────────────── */
  --color-accent: #E0BC4A;
  --color-secondary: #7e6f82;

  /* Mapeamento gold (mesmo dourado do tema Verde) */
  --color-gold-50: #FDF8E8;
  --color-gold-100: #F9EBC5;
  --color-gold-200: #F5DEA2;
  --color-gold-300: #EBCD6E;
  --color-gold-400: #E0BC4A;
  --color-gold-500: #D4A825;
  --color-gold-600: #B8922A;
  --color-gold-700: #9A7A23;
  --color-gold-800: #7C621C;
  --color-gold-900: #5E4A15;
  --color-gold-rgb: 212, 168, 37;

  /* ────────────────────────────────────────────────────────────
     SUPERFICIES (Backgrounds CLAROS - Malva Premium)
     ──────────────────────────────────────────────────────────── */
  --bg-page: #fbfafb;
  --bg-surface: #FFFFFF;
  --bg-surface-elevated: #FFFFFF;
  /* Fundos recuados (malva) — ver bloco :root para a semantica */
  --bg-subtle: #F7F5F8; /* lint-skip-U1: definicao de TOKEN — o literal aqui E o objetivo da U1 */
  --bg-muted: #F1EDF2; /* lint-skip-U1: definicao de TOKEN — o literal aqui E o objetivo da U1 */
  --bg-overlay: rgba(0, 0, 0, 0.5);
  --bg-hover: rgba(99, 87, 104, 0.06);

  /* Alias */
  --background: var(--bg-page);
  --surface: var(--bg-surface);

  /* ────────────────────────────────────────────────────────────
     TEXTOS (Escuros para fundo claro!)
     ──────────────────────────────────────────────────────────── */
  --text-primary: #2c262f;
  --text-secondary: #514658;
  --text-muted: #7e6f82;
  --text-disabled: #a89ea8;
  --text-inverse: #FFFFFF;
  --text-link: #635768;
  --text-link-hover: #514658;

  /* Alias */
  --text: var(--text-primary);

  /* ────────────────────────────────────────────────────────────
     BORDAS (Mauve suaves para fundo claro)
     ──────────────────────────────────────────────────────────── */
  --border-light: #e7e2e7;
  --border-default: #d5ced5;
  --border-strong: #a89ea8;
  --border-focus: #635768;

  /* Alias */
  --border: var(--border-default);

  /* ────────────────────────────────────────────────────────────
     SOMBRAS (suaves para fundo claro)
     ──────────────────────────────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(99, 87, 104, 0.04);
  --shadow-sm: 0 1px 3px rgba(99, 87, 104, 0.06);
  --shadow-default: 0 2px 6px rgba(99, 87, 104, 0.08);
  --shadow-md: 0 4px 12px rgba(99, 87, 104, 0.1);
  --shadow-lg: 0 10px 30px rgba(99, 87, 104, 0.12);
  --shadow-xl: 0 20px 50px rgba(99, 87, 104, 0.15);
  --shadow-soft: 0 2px 8px rgba(99, 87, 104, 0.06);

  /* Alias */
  --shadow: var(--shadow-default);

  /* ────────────────────────────────────────────────────────────
     MENU/SIDEBAR (Malva escuro profissional)
     ──────────────────────────────────────────────────────────── */
  --menu-bg: #514658;
  --menu-text: #FFFFFF;
  --menu-icon: rgba(255, 255, 255, 0.85);
  --menu-hover: rgba(224, 188, 74, 0.18);
  --menu-active: rgba(224, 188, 74, 0.28);

  /* ────────────────────────────────────────────────────────────
     GRADIENTES
     ──────────────────────────────────────────────────────────── */
  --gradient-primary: linear-gradient(135deg, #635768 0%, #514658 100%);
  --gradient-accent: linear-gradient(135deg, #E0BC4A 0%, #D4A825 100%);
  --gradient-success: linear-gradient(135deg, #10B981 0%, #059669 100%);

  /* ────────────────────────────────────────────────────────────
     CHART.JS (texto escuro para fundo claro)
     ──────────────────────────────────────────────────────────── */
  --chart-text: #2c262f;
  --chart-grid: rgba(99, 87, 104, 0.08);
  --chart-border: #d5ced5;
  --chart-primary: #635768;
  --chart-secondary: #a89ea8;
  --chart-accent: #E0BC4A;
  --chart-success: #10B981;
  --chart-danger: #EF4444;
  --chart-warning: #F59E0B;
  --chart-info: #06B6D4;
  --chart-cyan: #06B6D4;
  --chart-purple: #8B5CF6;
  --chart-pink: #EC4899;
  --chart-orange: #F97316;

  /* ────────────────────────────────────────────────────────────
     ALIASES GLOBAIS
     ──────────────────────────────────────────────────────────── */
  --primary: var(--color-primary);
  --primary-hover: var(--color-primary-hover);
  --primary-rgb: var(--color-primary-rgb);
  --secondary: var(--color-secondary);
  --accent: var(--color-accent);

  /* Theme aliases */
  --theme-primary-rgb: var(--color-primary-rgb);
  --theme-background: var(--bg-page);
  --theme-surface: var(--bg-surface);
  --theme-text-primary: var(--text-primary);
  --theme-border: var(--border-default);
  --theme-shadow: var(--shadow-default);

  /* Frota */
  --frota-primary: #635768;
  --frota-light: #fbfafb;
  --frota-dark: #2c262f;
  --frota-border: #d5ced5;
  --frota-shadow: 0 4px 6px -1px rgba(99, 87, 104, 0.06);

  /* Home page */
  --dark: #2c262f;
  --light: #fbfafb;
  --gray: #7e6f82;
  --light-gray: #e7e2e7;
  --gradient: linear-gradient(135deg, #635768 0%, #514658 100%);
}

/* OLIVA PREMIUM - theme-oliva — Tema natural/orgânico com oliva profundo + accent laranja — Formula: OLIVA (#636656) + LARANJA (#F97316) = Premium Natural */

html.theme-oliva {
  /* Identificador do tema */
  --theme-name: 'oliva';
  --theme-display-name: 'Oliva Premium';
  --theme-icon: 'bi-flower3';

  /* ────────────────────────────────────────────────────────────
     OLIVE (Primary) - Paleta completa
     ──────────────────────────────────────────────────────────── */
  --color-primary-50: #fcfcfa;
  --color-primary-100: #f4f4f0;
  --color-primary-200: #e6e6df;
  --color-primary-300: #d2d3c9;
  --color-primary-400: #a8aa99;
  --color-primary-500: #7e816d;
  --color-primary-600: #636656;
  --color-primary-700: #525548;
  --color-primary-800: #3a3c32;
  --color-primary-900: #2e3028;
  --color-primary-950: #1d1e1a;
  --color-primary-rgb: 99, 102, 86;

  /* Alias para compatibilidade */
  --color-primary: #636656;
  --color-primary-hover: #525548;

  /* ────────────────────────────────────────────────────────────
     LARANJA (Accent - identidade vibrante natural)
     ──────────────────────────────────────────────────────────── */
  --color-accent: #F97316;
  --color-secondary: #7e816d;
  /* warning != accent (BRIEF principio 7): laranja e o ACCENT; warning vira ambar-ouro distinto */
  --color-warning: #CA8A04;

  /* Mapeamento gold (laranja para tema Oliva) */
  --color-gold-50: #FFF7ED;
  --color-gold-100: #FFEDD5;
  --color-gold-200: #FED7AA;
  --color-gold-300: #FDBA74;
  --color-gold-400: #FB923C;
  --color-gold-500: #F97316;
  --color-gold-600: #EA580C;
  --color-gold-700: #C2410C;
  --color-gold-800: #9A3412;
  --color-gold-900: #7C2D12;
  --color-gold-rgb: 249, 115, 22;

  /* ────────────────────────────────────────────────────────────
     SUPERFICIES (Backgrounds CLAROS - Oliva Premium)
     ──────────────────────────────────────────────────────────── */
  --bg-page: #fcfcfa;
  --bg-surface: #FFFFFF;
  --bg-surface-elevated: #FFFFFF;
  /* Fundos recuados (oliva) — ver bloco :root para a semantica */
  --bg-subtle: #F7F7F2; /* lint-skip-U1: definicao de TOKEN — o literal aqui E o objetivo da U1 */
  --bg-muted: #EFEFE8; /* lint-skip-U1: definicao de TOKEN — o literal aqui E o objetivo da U1 */
  --bg-overlay: rgba(0, 0, 0, 0.5);
  --bg-hover: rgba(99, 102, 86, 0.06);

  /* Alias */
  --background: var(--bg-page);
  --surface: var(--bg-surface);

  /* ────────────────────────────────────────────────────────────
     TEXTOS (Escuros para fundo claro!)
     ──────────────────────────────────────────────────────────── */
  --text-primary: #2e3028;
  --text-secondary: #525548;
  --text-muted: #5C5F50;
  --text-disabled: #a8aa99;
  --text-inverse: #FFFFFF;
  --text-link: #636656;
  --text-link-hover: #525548;

  /* Alias */
  --text: var(--text-primary);

  /* ────────────────────────────────────────────────────────────
     BORDAS (Olive suaves para fundo claro)
     ──────────────────────────────────────────────────────────── */
  --border-light: #e6e6df;
  --border-default: #d2d3c9;
  --border-strong: #a8aa99;
  --border-focus: #636656;

  /* Alias */
  --border: var(--border-default);

  /* ────────────────────────────────────────────────────────────
     SOMBRAS (suaves para fundo claro)
     ──────────────────────────────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(99, 102, 86, 0.04);
  --shadow-sm: 0 1px 3px rgba(99, 102, 86, 0.06);
  --shadow-default: 0 2px 6px rgba(99, 102, 86, 0.08);
  --shadow-md: 0 4px 12px rgba(99, 102, 86, 0.1);
  --shadow-lg: 0 10px 30px rgba(99, 102, 86, 0.12);
  --shadow-xl: 0 20px 50px rgba(99, 102, 86, 0.15);
  --shadow-soft: 0 2px 8px rgba(99, 102, 86, 0.06);

  /* Alias */
  --shadow: var(--shadow-default);

  /* ────────────────────────────────────────────────────────────
     MENU/SIDEBAR (Oliva escuro profissional)
     ──────────────────────────────────────────────────────────── */
  --menu-bg: #525548;
  --menu-text: #FFFFFF;
  --menu-icon: rgba(255, 255, 255, 0.85);
  --menu-hover: rgba(249, 115, 22, 0.18);
  --menu-active: rgba(249, 115, 22, 0.28);

  /* ────────────────────────────────────────────────────────────
     GRADIENTES
     ──────────────────────────────────────────────────────────── */
  --gradient-primary: linear-gradient(135deg, #636656 0%, #525548 100%);
  --gradient-accent: linear-gradient(135deg, #F97316 0%, #EA580C 100%);
  --gradient-success: linear-gradient(135deg, #10B981 0%, #059669 100%);

  /* ────────────────────────────────────────────────────────────
     CHART.JS (texto escuro para fundo claro)
     ──────────────────────────────────────────────────────────── */
  --chart-text: #2e3028;
  --chart-grid: rgba(99, 102, 86, 0.08);
  --chart-border: #d2d3c9;
  --chart-primary: #636656;
  --chart-secondary: #a8aa99;
  --chart-accent: #F97316;
  --chart-success: #10B981;
  --chart-danger: #EF4444;
  --chart-warning: #CA8A04;
  --chart-info: #06B6D4;
  --chart-cyan: #06B6D4;
  --chart-purple: #8B5CF6;
  --chart-pink: #EC4899;
  --chart-orange: #F97316;

  /* ────────────────────────────────────────────────────────────
     ALIASES GLOBAIS
     ──────────────────────────────────────────────────────────── */
  --primary: var(--color-primary);
  --primary-hover: var(--color-primary-hover);
  --primary-rgb: var(--color-primary-rgb);
  --secondary: var(--color-secondary);
  --accent: var(--color-accent);

  /* Theme aliases */
  --theme-primary-rgb: var(--color-primary-rgb);
  --theme-background: var(--bg-page);
  --theme-surface: var(--bg-surface);
  --theme-text-primary: var(--text-primary);
  --theme-border: var(--border-default);
  --theme-shadow: var(--shadow-default);

  /* Frota */
  --frota-primary: #636656;
  --frota-light: #fcfcfa;
  --frota-dark: #2e3028;
  --frota-border: #d2d3c9;
  --frota-shadow: 0 4px 6px -1px rgba(99, 102, 86, 0.06);

  /* Home page */
  --dark: #2e3028;
  --light: #fcfcfa;
  --gray: #7e816d;
  --light-gray: #e6e6df;
  --gradient: linear-gradient(135deg, #636656 0%, #525548 100%);
}

/* NÉVOA PREMIUM - theme-nevoa — Tema sereno/calmo com névoa azulada + accent ciano — Formula: NÉVOA (#59696f) + CIANO (#06B6D4) = Premium Sereno */

html.theme-nevoa {
  /* Identificador do tema */
  --theme-name: 'nevoa';
  --theme-display-name: 'Névoa Premium';
  --theme-icon: 'bi-cloud-fog2-fill';

  /* ────────────────────────────────────────────────────────────
     MIST (Primary) - Paleta completa
     ──────────────────────────────────────────────────────────── */
  --color-primary-50: #fafcfc;
  --color-primary-100: #f0f4f4;
  --color-primary-200: #e1e7e9;
  --color-primary-300: #cdd6da;
  --color-primary-400: #9eadb3;
  --color-primary-500: #708389;
  --color-primary-600: #59696f;
  --color-primary-700: #49585e;
  --color-primary-800: #343f43;
  --color-primary-900: #293234;
  --color-primary-950: #1b2123;
  --color-primary-rgb: 89, 105, 111;

  /* Alias para compatibilidade */
  --color-primary: #59696f;
  --color-primary-hover: #49585e;

  /* ────────────────────────────────────────────────────────────
     CIANO (Accent - identidade fresca e moderna)
     ──────────────────────────────────────────────────────────── */
  --color-accent: #06B6D4;
  --color-secondary: #708389;

  /* Mapeamento gold (ciano para tema Névoa) */
  --color-gold-50: #ECFEFF;
  --color-gold-100: #CFFAFE;
  --color-gold-200: #A5F3FC;
  --color-gold-300: #67E8F9;
  --color-gold-400: #22D3EE;
  --color-gold-500: #06B6D4;
  --color-gold-600: #0891B2;
  --color-gold-700: #0E7490;
  --color-gold-800: #155E75;
  --color-gold-900: #164E63;
  --color-gold-rgb: 6, 182, 212;

  /* ────────────────────────────────────────────────────────────
     SUPERFICIES (Backgrounds CLAROS - Névoa Premium)
     ──────────────────────────────────────────────────────────── */
  --bg-page: #fafcfc;
  --bg-surface: #FFFFFF;
  --bg-surface-elevated: #FFFFFF;
  /* Fundos recuados (nevoa) — ver bloco :root para a semantica */
  --bg-subtle: #F3F7F8; /* lint-skip-U1: definicao de TOKEN — o literal aqui E o objetivo da U1 */
  --bg-muted: #E9EFF1; /* lint-skip-U1: definicao de TOKEN — o literal aqui E o objetivo da U1 */
  --bg-overlay: rgba(0, 0, 0, 0.5);
  --bg-hover: rgba(89, 105, 111, 0.06);

  /* Alias */
  --background: var(--bg-page);
  --surface: var(--bg-surface);

  /* ────────────────────────────────────────────────────────────
     TEXTOS (Escuros para fundo claro!)
     ──────────────────────────────────────────────────────────── */
  --text-primary: #293234;
  --text-secondary: #49585e;
  --text-muted: #5A696F;
  --text-disabled: #9eadb3;
  --text-inverse: #FFFFFF;
  --text-link: #59696f;
  --text-link-hover: #49585e;

  /* Alias */
  --text: var(--text-primary);

  /* ────────────────────────────────────────────────────────────
     BORDAS (Mist suaves para fundo claro)
     ──────────────────────────────────────────────────────────── */
  --border-light: #e1e7e9;
  --border-default: #cdd6da;
  --border-strong: #9eadb3;
  --border-focus: #59696f;

  /* Alias */
  --border: var(--border-default);

  /* ────────────────────────────────────────────────────────────
     SOMBRAS (suaves para fundo claro)
     ──────────────────────────────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(89, 105, 111, 0.04);
  --shadow-sm: 0 1px 3px rgba(89, 105, 111, 0.06);
  --shadow-default: 0 2px 6px rgba(89, 105, 111, 0.08);
  --shadow-md: 0 4px 12px rgba(89, 105, 111, 0.1);
  --shadow-lg: 0 10px 30px rgba(89, 105, 111, 0.12);
  --shadow-xl: 0 20px 50px rgba(89, 105, 111, 0.15);
  --shadow-soft: 0 2px 8px rgba(89, 105, 111, 0.06);

  /* Alias */
  --shadow: var(--shadow-default);

  /* ────────────────────────────────────────────────────────────
     MENU/SIDEBAR (Névoa escuro profissional)
     ──────────────────────────────────────────────────────────── */
  --menu-bg: #49585e;
  --menu-text: #FFFFFF;
  --menu-icon: rgba(255, 255, 255, 0.85);
  --menu-hover: rgba(6, 182, 212, 0.18);
  --menu-active: rgba(6, 182, 212, 0.28);

  /* ────────────────────────────────────────────────────────────
     GRADIENTES
     ──────────────────────────────────────────────────────────── */
  --gradient-primary: linear-gradient(135deg, #59696f 0%, #49585e 100%);
  --gradient-accent: linear-gradient(135deg, #06B6D4 0%, #0891B2 100%);
  --gradient-success: linear-gradient(135deg, #10B981 0%, #059669 100%);

  /* ────────────────────────────────────────────────────────────
     CHART.JS (texto escuro para fundo claro)
     ──────────────────────────────────────────────────────────── */
  --chart-text: #293234;
  --chart-grid: rgba(89, 105, 111, 0.08);
  --chart-border: #cdd6da;
  --chart-primary: #59696f;
  --chart-secondary: #9eadb3;
  --chart-accent: #06B6D4;
  --chart-success: #10B981;
  --chart-danger: #EF4444;
  --chart-warning: #F59E0B;
  --chart-info: #06B6D4;
  --chart-cyan: #06B6D4;
  --chart-purple: #8B5CF6;
  --chart-pink: #EC4899;
  --chart-orange: #F97316;

  /* ────────────────────────────────────────────────────────────
     ALIASES GLOBAIS
     ──────────────────────────────────────────────────────────── */
  --primary: var(--color-primary);
  --primary-hover: var(--color-primary-hover);
  --primary-rgb: var(--color-primary-rgb);
  --secondary: var(--color-secondary);
  --accent: var(--color-accent);

  /* Theme aliases */
  --theme-primary-rgb: var(--color-primary-rgb);
  --theme-background: var(--bg-page);
  --theme-surface: var(--bg-surface);
  --theme-text-primary: var(--text-primary);
  --theme-border: var(--border-default);
  --theme-shadow: var(--shadow-default);

  /* Frota */
  --frota-primary: #59696f;
  --frota-light: #fafcfc;
  --frota-dark: #293234;
  --frota-border: #cdd6da;
  --frota-shadow: 0 4px 6px -1px rgba(89, 105, 111, 0.06);

  /* Home page */
  --dark: #293234;
  --light: #fafcfc;
  --gray: #708389;
  --light-gray: #e1e7e9;
  --gradient: linear-gradient(135deg, #59696f 0%, #49585e 100%);
}

/* TAUPE PREMIUM - theme-taupe — Tema terroso/elegante com taupe profundo + accent dourado — Formula: TAUPE (#675c58) + DOURADO (#D4A825) = Premium Terroso */

html.theme-taupe {
  /* Identificador do tema */
  --theme-name: 'taupe';
  --theme-display-name: 'Taupe Premium';
  --theme-icon: 'bi-feather';

  /* ────────────────────────────────────────────────────────────
     TAUPE (Primary) - Paleta completa
     ──────────────────────────────────────────────────────────── */
  --color-primary-50: #fcfbfa;
  --color-primary-100: #f4f2f1;
  --color-primary-200: #e7e3e1;
  --color-primary-300: #d6d0cc;
  --color-primary-400: #aba29c;
  --color-primary-500: #817571;
  --color-primary-600: #675c58;
  --color-primary-700: #564b48;
  --color-primary-800: #3e3533;
  --color-primary-900: #312a28;
  --color-primary-950: #201c1b;
  --color-primary-rgb: 103, 92, 88;

  /* Alias para compatibilidade */
  --color-primary: #675c58;
  --color-primary-hover: #564b48;

  /* ────────────────────────────────────────────────────────────
     DOURADO (Accent - mesma identidade premium)
     ──────────────────────────────────────────────────────────── */
  --color-accent: #D4A825;
  --color-secondary: #817571;

  /* Mapeamento gold (mesmo dourado do tema Verde) */
  --color-gold-50: #FDF8E8;
  --color-gold-100: #F9EBC5;
  --color-gold-200: #F5DEA2;
  --color-gold-300: #EBCD6E;
  --color-gold-400: #E0BC4A;
  --color-gold-500: #D4A825;
  --color-gold-600: #B8922A;
  --color-gold-700: #9A7A23;
  --color-gold-800: #7C621C;
  --color-gold-900: #5E4A15;
  --color-gold-rgb: 212, 168, 37;

  /* ────────────────────────────────────────────────────────────
     SUPERFICIES (Backgrounds CLAROS - Taupe Premium)
     ──────────────────────────────────────────────────────────── */
  --bg-page: #fcfbfa;
  --bg-surface: #FFFFFF;
  --bg-surface-elevated: #FFFFFF;
  /* Fundos recuados (taupe) — ver bloco :root para a semantica */
  --bg-subtle: #F7F5F4; /* lint-skip-U1: definicao de TOKEN — o literal aqui E o objetivo da U1 */
  --bg-muted: #F0ECEA; /* lint-skip-U1: definicao de TOKEN — o literal aqui E o objetivo da U1 */
  --bg-overlay: rgba(0, 0, 0, 0.5);
  --bg-hover: rgba(103, 92, 88, 0.06);

  /* Alias */
  --background: var(--bg-page);
  --surface: var(--bg-surface);

  /* ────────────────────────────────────────────────────────────
     TEXTOS (Escuros para fundo claro!)
     ──────────────────────────────────────────────────────────── */
  --text-primary: #312a28;
  --text-secondary: #564b48;
  --text-muted: #645A55;
  --text-disabled: #aba29c;
  --text-inverse: #FFFFFF;
  --text-link: #675c58;
  --text-link-hover: #564b48;

  /* Alias */
  --text: var(--text-primary);

  /* ────────────────────────────────────────────────────────────
     BORDAS (Taupe suaves para fundo claro)
     ──────────────────────────────────────────────────────────── */
  --border-light: #e7e3e1;
  --border-default: #d6d0cc;
  --border-strong: #aba29c;
  --border-focus: #675c58;

  /* Alias */
  --border: var(--border-default);

  /* ────────────────────────────────────────────────────────────
     SOMBRAS (suaves para fundo claro)
     ──────────────────────────────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(103, 92, 88, 0.04);
  --shadow-sm: 0 1px 3px rgba(103, 92, 88, 0.06);
  --shadow-default: 0 2px 6px rgba(103, 92, 88, 0.08);
  --shadow-md: 0 4px 12px rgba(103, 92, 88, 0.1);
  --shadow-lg: 0 10px 30px rgba(103, 92, 88, 0.12);
  --shadow-xl: 0 20px 50px rgba(103, 92, 88, 0.15);
  --shadow-soft: 0 2px 8px rgba(103, 92, 88, 0.06);

  /* Alias */
  --shadow: var(--shadow-default);

  /* ────────────────────────────────────────────────────────────
     MENU/SIDEBAR (Taupe escuro profissional)
     ──────────────────────────────────────────────────────────── */
  --menu-bg: #564b48;
  --menu-text: #FFFFFF;
  --menu-icon: rgba(255, 255, 255, 0.85);
  --menu-hover: rgba(212, 168, 37, 0.18);
  --menu-active: rgba(212, 168, 37, 0.28);

  /* ────────────────────────────────────────────────────────────
     GRADIENTES
     ──────────────────────────────────────────────────────────── */
  --gradient-primary: linear-gradient(135deg, #675c58 0%, #564b48 100%);
  --gradient-accent: linear-gradient(135deg, #D4A825 0%, #B8922A 100%);
  --gradient-success: linear-gradient(135deg, #10B981 0%, #059669 100%);

  /* ────────────────────────────────────────────────────────────
     CHART.JS (texto escuro para fundo claro)
     ──────────────────────────────────────────────────────────── */
  --chart-text: #312a28;
  --chart-grid: rgba(103, 92, 88, 0.08);
  --chart-border: #d6d0cc;
  --chart-primary: #675c58;
  --chart-secondary: #aba29c;
  --chart-accent: #D4A825;
  --chart-success: #10B981;
  --chart-danger: #EF4444;
  --chart-warning: #F59E0B;
  --chart-info: #06B6D4;
  --chart-cyan: #06B6D4;
  --chart-purple: #8B5CF6;
  --chart-pink: #EC4899;
  --chart-orange: #F97316;

  /* ────────────────────────────────────────────────────────────
     ALIASES GLOBAIS
     ──────────────────────────────────────────────────────────── */
  --primary: var(--color-primary);
  --primary-hover: var(--color-primary-hover);
  --primary-rgb: var(--color-primary-rgb);
  --secondary: var(--color-secondary);
  --accent: var(--color-accent);

  /* Theme aliases */
  --theme-primary-rgb: var(--color-primary-rgb);
  --theme-background: var(--bg-page);
  --theme-surface: var(--bg-surface);
  --theme-text-primary: var(--text-primary);
  --theme-border: var(--border-default);
  --theme-shadow: var(--shadow-default);

  /* Frota */
  --frota-primary: #675c58;
  --frota-light: #fcfbfa;
  --frota-dark: #312a28;
  --frota-border: #d6d0cc;
  --frota-shadow: 0 4px 6px -1px rgba(103, 92, 88, 0.06);

  /* Home page */
  --dark: #312a28;
  --light: #fcfbfa;
  --gray: #817571;
  --light-gray: #e7e3e1;
  --gradient: linear-gradient(135deg, #675c58 0%, #564b48 100%);
}


/* MODA PREMIUM - theme-moda — Tema terroso/elegante com moda profundo + accent dourado — Formula: MODA (#db2777) + DOURADO (#D4A825) = Premium Terroso */

html.theme-moda {
  /* Identificador do tema */
  --theme-name: 'moda';
  --theme-display-name: 'Moda Premium';
  --theme-icon: 'bi-bag-heart';

  /* ────────────────────────────────────────────────────────────
     MODA (Primary) - Paleta completa
     ──────────────────────────────────────────────────────────── */
  --color-primary-50: #fdf2f8;
  --color-primary-100: #fce7f3;
  --color-primary-200: #fbcfe8;
  --color-primary-300: #f9a8d4;
  --color-primary-400: #f472b6;
  --color-primary-500: #ec4899;
  --color-primary-600: #db2777;
  --color-primary-700: #be185d;
  --color-primary-800: #9d174d;
  --color-primary-900: #831843;
  --color-primary-950: #500724;
  --color-primary-rgb: 219, 39, 119;

  /* Alias para compatibilidade */
  --color-primary: #db2777;
  --color-primary-hover: #be185d;

  /* ────────────────────────────────────────────────────────────
     DOURADO (Accent - mesma identidade premium)
     ──────────────────────────────────────────────────────────── */
  --color-accent: #D4A825;
  --color-secondary: #ec4899;

  /* Mapeamento gold (mesmo dourado do tema Verde) */
  --color-gold-50: #FDF8E8;
  --color-gold-100: #F9EBC5;
  --color-gold-200: #F5DEA2;
  --color-gold-300: #EBCD6E;
  --color-gold-400: #E0BC4A;
  --color-gold-500: #D4A825;
  --color-gold-600: #B8922A;
  --color-gold-700: #9A7A23;
  --color-gold-800: #7C621C;
  --color-gold-900: #5E4A15;
  --color-gold-rgb: 212, 168, 37;

  /* ────────────────────────────────────────────────────────────
     SUPERFICIES (Backgrounds CLAROS - Moda Premium)
     ──────────────────────────────────────────────────────────── */
  --bg-page: #fdf2f8;
  --bg-surface: #FFFFFF;
  --bg-surface-elevated: #FFFFFF;
  /* Fundos recuados (moda) — ver bloco :root para a semantica */
  --bg-subtle: #FCEFF6; /* lint-skip-U1: definicao de TOKEN — o literal aqui E o objetivo da U1 */
  --bg-muted: #F9E3EF; /* lint-skip-U1: definicao de TOKEN — o literal aqui E o objetivo da U1 */
  --bg-overlay: rgba(0, 0, 0, 0.5);
  --bg-hover: rgba(219, 39, 119, 0.06);

  /* Alias */
  --background: var(--bg-page);
  --surface: var(--bg-surface);

  /* ────────────────────────────────────────────────────────────
     TEXTOS (Escuros para fundo claro!)
     ──────────────────────────────────────────────────────────── */
  --text-primary: #831843;
  --text-secondary: #be185d;
  --text-muted: #91576f;
  --text-disabled: #f472b6;
  --text-inverse: #FFFFFF;
  --text-link: #db2777;
  --text-link-hover: #be185d;

  /* Alias */
  --text: var(--text-primary);

  /* ────────────────────────────────────────────────────────────
     BORDAS (Moda suaves para fundo claro)
     ──────────────────────────────────────────────────────────── */
  --border-light: #fbcfe8;
  --border-default: #f9a8d4;
  --border-strong: #f472b6;
  --border-focus: #db2777;

  /* Alias */
  --border: var(--border-default);

  /* ────────────────────────────────────────────────────────────
     SOMBRAS (suaves para fundo claro)
     ──────────────────────────────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(219, 39, 119, 0.04);
  --shadow-sm: 0 1px 3px rgba(219, 39, 119, 0.06);
  --shadow-default: 0 2px 6px rgba(219, 39, 119, 0.08);
  --shadow-md: 0 4px 12px rgba(219, 39, 119, 0.1);
  --shadow-lg: 0 10px 30px rgba(219, 39, 119, 0.12);
  --shadow-xl: 0 20px 50px rgba(219, 39, 119, 0.15);
  --shadow-soft: 0 2px 8px rgba(219, 39, 119, 0.06);

  /* Alias */
  --shadow: var(--shadow-default);

  /* ────────────────────────────────────────────────────────────
     MENU/SIDEBAR (Moda escuro profissional)
     ──────────────────────────────────────────────────────────── */
  /* Vinho profundo (900/950) no menu — mais elegante que pink vivo p/ sidebar */
  --menu-bg: #831843;
  --menu-text: #FFFFFF;
  --menu-icon: rgba(255, 255, 255, 0.85);
  --menu-hover: rgba(212, 168, 37, 0.18);
  --menu-active: rgba(212, 168, 37, 0.28);

  /* ────────────────────────────────────────────────────────────
     GRADIENTES
     ──────────────────────────────────────────────────────────── */
  --gradient-primary: linear-gradient(135deg, #db2777 0%, #be185d 100%);
  --gradient-accent: linear-gradient(135deg, #D4A825 0%, #B8922A 100%);
  --gradient-success: linear-gradient(135deg, #10B981 0%, #059669 100%);

  /* ────────────────────────────────────────────────────────────
     CHART.JS (texto escuro para fundo claro)
     ──────────────────────────────────────────────────────────── */
  --chart-text: #831843;
  --chart-grid: rgba(219, 39, 119, 0.08);
  --chart-border: #f9a8d4;
  --chart-primary: #db2777;
  --chart-secondary: #f472b6;
  --chart-accent: #D4A825;
  --chart-success: #10B981;
  --chart-danger: #EF4444;
  --chart-warning: #F59E0B;
  --chart-info: #06B6D4;
  --chart-cyan: #06B6D4;
  --chart-purple: #8B5CF6;
  --chart-pink: #EC4899;
  --chart-orange: #F97316;

  /* ────────────────────────────────────────────────────────────
     ALIASES GLOBAIS
     ──────────────────────────────────────────────────────────── */
  --primary: var(--color-primary);
  --primary-hover: var(--color-primary-hover);
  --primary-rgb: var(--color-primary-rgb);
  --secondary: var(--color-secondary);
  --accent: var(--color-accent);

  /* Theme aliases */
  --theme-primary-rgb: var(--color-primary-rgb);
  --theme-background: var(--bg-page);
  --theme-surface: var(--bg-surface);
  --theme-text-primary: var(--text-primary);
  --theme-border: var(--border-default);
  --theme-shadow: var(--shadow-default);

  /* Frota */
  --frota-primary: #db2777;
  --frota-light: #fdf2f8;
  --frota-dark: #831843;
  --frota-border: #f9a8d4;
  --frota-shadow: 0 4px 6px -1px rgba(219, 39, 119, 0.06);

  /* Home page */
  --dark: #831843;
  --light: #fdf2f8;
  --gray: #ec4899;
  --light-gray: #fbcfe8;
  --gradient: linear-gradient(135deg, #db2777 0%, #be185d 100%);
}

/* CLARO — theme-claro (NOVO 2026-05-29) — Modo claro neutro da marca DotCompany: branco limpo + VERDE de marca. — Dourado SO como guarnicao (selo/badge), nunca como estado/texto. — Warning ambar SEPARADO do accent (BRIEF principio 7). — Par natural do Escuro no eixo Sistema/Claro/Escuro. */

html.theme-claro {
  --theme-name: 'claro';
  --theme-display-name: 'Claro';
  --theme-icon: 'bi-sun-fill';

  /* VERDE de marca (Primary) — mesma escala da marca DotCompany */
  --color-primary-50: #E8F5F1;
  --color-primary-100: #C5E6DB;
  --color-primary-200: #9ED4C5;
  --color-primary-300: #77C2AF;
  --color-primary-400: #4FAF99;
  --color-primary-500: #1a6b52;
  --color-primary-600: #0f4c3a;
  --color-primary-700: #0c3d2f;
  --color-primary-800: #092e24;
  --color-primary-900: #061f19;
  --color-primary-950: #041510;
  --color-primary-rgb: 15, 76, 58;
  --color-primary: #0f4c3a;
  --color-primary-hover: #0c3d2f;

  /* DOURADO (Accent) — guarnicao; -600 p/ melhor legibilidade que o -500 */
  --color-accent: #B8922A;
  --color-secondary: #1a6b52;
  --color-gold-50: #FDF8E8;
  --color-gold-100: #F9EBC5;
  --color-gold-200: #F5DEA2;
  --color-gold-300: #EBCD6E;
  --color-gold-400: #E0BC4A;
  --color-gold-500: #d4a825;
  --color-gold-600: #b8922a;
  --color-gold-700: #9a7a23;
  --color-gold-800: #7c621c;
  --color-gold-900: #5e4a15;
  --color-gold-rgb: 212, 168, 37;

  /* Warning SEPARADO do accent dourado (ambar-700, legivel como texto) */
  --color-warning: #B45309;

  /* Superficies — branco limpo (off-white levissimo, neutro com leve verde) */
  --bg-page: #F7F9F8;
  --bg-surface: #FFFFFF;
  --bg-surface-elevated: #FFFFFF;
  --bg-surface-secondary: #F2F5F3;
  /* Fundos recuados (claro) — ver bloco :root para a semantica */
  --bg-subtle: #F2F5F3; /* lint-skip-U1: definicao de TOKEN — o literal aqui E o objetivo da U1 */
  --bg-muted: #E9EEEB; /* lint-skip-U1: definicao de TOKEN — o literal aqui E o objetivo da U1 */
  --bg-overlay: rgba(0, 0, 0, 0.5);
  --bg-hover: rgba(15, 76, 58, 0.05);
  --background: var(--bg-page);
  --surface: var(--bg-surface);

  /* Textos — grafite neutro com leve tom verde, muted >=4.5:1 */
  --text-primary: #1B2520;
  --text-secondary: #4A554F;
  --text-muted: #5E6B64;
  --text-disabled: #9AA8A0;
  --text-inverse: #FFFFFF;
  --text-link: #1a6b52;
  --text-link-hover: #0f4c3a;
  --text: var(--text-primary);

  /* Bordas neutras */
  --border-light: #EEF1EF;
  --border-default: #DCE3DF;
  --border-strong: #C2CCC6;
  --border-focus: #0f4c3a;
  --border: var(--border-default);

  /* Sombras suaves neutras */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-default: 0 2px 6px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.15);
  --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow: var(--shadow-default);

  /* Menu — verde de marca, hover/active claros (sem ouro permanente) */
  --menu-bg: #0f4c3a;
  --menu-text: #FFFFFF;
  --menu-icon: rgba(255, 255, 255, 0.82);
  --menu-hover: rgba(255, 255, 255, 0.12);
  --menu-active: rgba(255, 255, 255, 0.20);

  /* Gradientes */
  --gradient-primary: linear-gradient(135deg, #0f4c3a 0%, #1a6b52 100%);
  --gradient-accent: linear-gradient(135deg, #d4a825 0%, #b8922a 100%);
  --gradient-success: linear-gradient(135deg, #10B981 0%, #059669 100%);

  /* Chart.js — texto escuro para fundo claro */
  --chart-text: #1B2520;
  --chart-grid: rgba(0, 0, 0, 0.08);
  --chart-border: #DCE3DF;
  --chart-primary: #0f4c3a;
  --chart-secondary: #1a6b52;
  --chart-accent: #b8922a;
  --chart-success: #10B981;
  --chart-danger: #EF4444;
  --chart-warning: #B45309;
  --chart-info: #06B6D4;
  --chart-cyan: #06B6D4;
  --chart-purple: #8B5CF6;
  --chart-pink: #EC4899;
  --chart-orange: #F97316;

  /* Aliases globais */
  --primary: var(--color-primary);
  --primary-hover: var(--color-primary-hover);
  --primary-rgb: var(--color-primary-rgb);
  --secondary: var(--color-secondary);
  --accent: var(--color-accent);
  --theme-primary-rgb: var(--color-primary-rgb);
  --theme-background: var(--bg-page);
  --theme-surface: var(--bg-surface);
  --theme-text-primary: var(--text-primary);
  --theme-border: var(--border-default);
  --theme-shadow: var(--shadow-default);

  /* Frota */
  --frota-primary: #0f4c3a;
  --frota-light: #F7F9F8;
  --frota-dark: #061f19;
  --frota-border: #DCE3DF;
  --frota-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.06);

  /* Home page */
  --dark: #1B2520;
  --light: #F7F9F8;
  --gray: #5E6B64;
  --light-gray: #EEF1EF;
  --gradient: linear-gradient(135deg, #0f4c3a 0%, #1a6b52 100%);
}

/* TRANSIÇÕES GLOBAIS PARA MUDANÇA DE TEMA — Ativadas quando a classe .theme-transitioning está presente. — Isso evita transições indesejadas durante carregamento inicial. */

/* Classe ativada pelo theme-system.js durante mudança de tema */
html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
  transition:
    background-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
    color 200ms cubic-bezier(0.4, 0, 0.2, 1),
    fill 200ms cubic-bezier(0.4, 0, 0.2, 1),
    stroke 200ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Exceção para elementos que não devem ter transição (performance) */
html.theme-transitioning canvas,
html.theme-transitioning video,
html.theme-transitioning iframe,
html.theme-transitioning img {
  transition: none !important;
}

/* Respeitar preferência de movimento reduzido */
@media (prefers-reduced-motion: reduce) {
  html.theme-transitioning,
  html.theme-transitioning *,
  html.theme-transitioning *::before,
  html.theme-transitioning *::after {
    transition: none !important;
  }
}

/* ICONES — OVERRIDES PER-TEMA (U36, 2026-05-01) — Cobre todos os 9 temas explicitamente. — --icon-on-saturated permanece #ffffff em todos (branco sobre vivo). — --icon-on-tinted e --icon-on-primary variam por tema. — --icon-on-surface segue --text-primary do tema (auto). — --text-on-saturated (Onda 1, 2026-07-11): texto sobre bg saturado do — tema — #ffffff em TODOS (como --icon-on-saturated): os bg saturados — reais por tema (--card-grad-*, base-themes.css) sao ESCUROS em todos — os 10 temas, incl. dark (slate #1e293b+), entao branco mantem AA. — NAO usar sobre --color-primary cru no dark (#34D27E claro). */

html.theme-light {
  --icon-on-tinted:  var(--color-info-700, #1565C0);
  --icon-on-primary: var(--color-info-50,  #E3F2FD);
  --text-on-saturated: #ffffff;
}

.dark,
html.theme-dark {
  --icon-on-tinted:  var(--color-primary-200);
  --icon-on-primary: var(--color-gold-400, #EBD7A0);
  --text-on-saturated: #ffffff; /* card-grad-* do dark sao ESCUROS (slate) — branco AA; primary cru #34D27E NAO e bg valido p/ este token */
}

html.theme-roxo {
  --icon-on-tinted:  var(--color-purple-200, #E9D5FF);
  --icon-on-primary: var(--color-purple-100, #F3E8FF);
  --text-on-saturated: #ffffff;
}

html.theme-bordo {
  --icon-on-tinted:  var(--color-pink-200, #FBCFE8);
  --icon-on-primary: var(--color-pink-100, #FCE7F3);
  --text-on-saturated: #ffffff;
}

html.theme-malva {
  --icon-on-tinted:  var(--color-neutral-200, #E5E7EB);
  --icon-on-primary: var(--color-neutral-100, #F3F4F6);
  --text-on-saturated: #ffffff;
}

html.theme-oliva {
  --icon-on-tinted:  #BEF264;
  --icon-on-primary: #ECFCCB;
  --text-on-saturated: #ffffff;
}

html.theme-nevoa {
  --icon-on-tinted:  #B0BEC5;
  --icon-on-primary: #ECEFF1;
  --text-on-saturated: #ffffff;
}

html.theme-taupe {
  --icon-on-tinted:  #D7CCC8;
  --icon-on-primary: #EFEBE9;
  --text-on-saturated: #ffffff;
}


html.theme-moda {
  --icon-on-tinted:  #fbcfe8;
  --icon-on-primary: #fce7f3;
  --text-on-saturated: #ffffff;
}

html.theme-claro {
  --icon-on-tinted:  var(--color-primary-700, #0c3d2f);
  --icon-on-primary: var(--color-gold-300, #EBCD6E);
  --text-on-saturated: #ffffff;
}

/* ================================================================
   MODO ESCURO x PALETA — DOIS EIXOS (2026-07-30)
   ================================================================
   PROBLEMA QUE ISTO RESOLVE: os 12 temas eram mutuamente exclusivos. Escolher
   "Escuro" APAGAVA "Roxo" — nao existia "roxo escuro", so "verde escuro" (o
   bloco `.dark, html.theme-dark` tem paleta verde propria).

   COMO FUNCIONA AGORA: o <html> carrega os DOIS eixos ao mesmo tempo —
   `data-palette="roxo" data-mode="escuro"` + as classes antigas
   (`theme-roxo theme-dark dark`, que centenas de regras `.dark ...` exigem).
   Como as classes das duas familias estao presentes juntas, o bloco da paleta
   (`html.theme-roxo`, superficies BRANCAS) tambem casa — por isso o bloco
   abaixo REASSERTA todos os tokens de superficie/texto/borda. Sem isso volta o
   branco-no-escuro.

   ESPECIFICIDADE (por que 2 atributos e nao 1):
     `html[data-mode="escuro"][data-palette]` = (0,2,1) e ganha de
     `html.theme-roxo` = (0,1,1) do base-themes.css, que carrega DEPOIS deste
     arquivo (base.html: _css-variables L1406, base-themes L1942) e redeclara
     --primary, --menu-N e --elev-N (escrito SEM barra-asterisco de proposito:
     um `*` seguido de `/` FECHA este comentario e o resto dele vira CSS —
     foi exatamente esse o bug de 30/07). Com 1 atributo daria empate e o base-themes
     venceria por ordem de carga.

   ANTI-DUPLICACAO: nada de 200 linhas por tema. Cada paleta declara so ~16
   SEEDS (--erp-dark-*) e o mapeamento seed -> token do design system vive uma
   unica vez aqui. var() resolve por valor computado, nao por ordem de
   declaracao, entao o seed pode ser sobrescrito depois sem problema.

   CONTRASTE E O ACEITE, NAO OPINIAO: tests/unit/test_tema_paleta_e_modo.py le
   estes valores do CSS e calcula o ratio WCAG real de --text-primary sobre
   --bg-surface e --bg-surface-elevated em CADA paleta (exigencia >= 4.5).
   ================================================================ */

html[data-mode="escuro"][data-palette] {
  /* ── SEEDS default = paleta da marca (verde). Cada paleta sobrescreve so estes ── */
  --erp-dark-primary: #34D27E;        /* lint-skip-U1: definicao de TOKEN — o literal aqui E o objetivo da U1 */
  --erp-dark-primary-hover: #5BE08F;  /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-primary-rgb: 52, 210, 126;
  --erp-dark-accent: #E3C77A;         /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-page: #0A0F0D;           /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-surface: #121A16;        /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-surface-elevated: #18221D; /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-sunken: #0E1411;         /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-border-light: #161D19;   /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-border: #1E2722;         /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-border-strong: #2A352E;  /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-menu-bg: #0C1F18;        /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-menu-bg-2: #061F19;      /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-text: #E8EDEA;           /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-text-soft: #A7B2AB;      /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-text-dim: #828D85;       /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-text-faint: #52605A;     /* lint-skip-U1: definicao de TOKEN */

  /* ── SUPERFICIES — preto TINGIDO com o matiz da paleta, nunca cinza neutro
        nem preto puro (halacao/smear em OLED) ── */
  --bg-page: var(--erp-dark-page);
  --bg-surface: var(--erp-dark-surface);
  --bg-surface-elevated: var(--erp-dark-surface-elevated);
  --bg-surface-secondary: var(--erp-dark-sunken);
  --bg-subtle: var(--erp-dark-sunken);
  --bg-muted: var(--erp-dark-page);
  --bg-overlay: rgba(0, 0, 0, 0.8);
  --bg-hover: rgba(var(--erp-dark-primary-rgb), 0.08);
  /* ALIAS aponta para o TOKEN semantico, nunca direto para o seed: e assim que o
     @media print (que zera --bg-page/--text-primary para poupar toner) e o
     prefers-contrast do SO conseguem alcancar tambem os nomes legados. */
  --modal-scroll-fade: var(--bg-surface);
  --surface-secondary: var(--bg-surface-secondary);
  --background: var(--bg-page);
  --surface: var(--bg-surface);
  --theme-background: var(--bg-page);
  --theme-surface: var(--bg-surface);
  --theme-surface-elevated: var(--bg-surface-elevated);

  /* ── TEXTO — off-white levemente tingido da paleta (acalma a halacao) ── */
  --text-primary: var(--erp-dark-text);
  --text-secondary: var(--erp-dark-text-soft);
  --text-muted: var(--erp-dark-text-dim);
  --text-disabled: var(--erp-dark-text-faint);
  --text-inverse: var(--bg-page);
  --text-link: var(--erp-dark-primary);
  --text-link-hover: var(--erp-dark-primary-hover);
  --text: var(--text-primary);
  --theme-text-primary: var(--text-primary);
  --theme-text-secondary: var(--text-secondary);
  --theme-text-muted: var(--text-muted);
  --card-icon-color: var(--text-secondary);
  --form-icon-color: var(--text-muted);

  /* ── BORDAS hairline ── */
  --border-light: var(--erp-dark-border-light);
  --border-default: var(--erp-dark-border);
  --border-strong: var(--erp-dark-border-strong);
  --border-focus: var(--erp-dark-primary);
  --border: var(--border-default);
  --theme-border: var(--border-default);
  --theme-border-strong: var(--border-strong);

  /* ── COR DA PALETA (o ponto da entrega: roxo continua roxo no escuro) ── */
  --color-primary: var(--erp-dark-primary);
  --color-primary-hover: var(--erp-dark-primary-hover);
  --color-primary-rgb: var(--erp-dark-primary-rgb);
  --color-accent: var(--erp-dark-accent);
  --color-secondary: var(--erp-dark-primary-hover);
  --primary: var(--erp-dark-primary);
  --primary-hover: var(--erp-dark-primary-hover);
  --primary-rgb: var(--erp-dark-primary-rgb);
  --secondary: var(--erp-dark-primary-hover);
  --accent: var(--erp-dark-accent);
  --theme-primary-rgb: var(--erp-dark-primary-rgb);

  /* ── STATUS (semantico: NAO muda por paleta — verde e sucesso em todas) ──
        Os fundos saem do PROPRIO token via color-mix (4.7k usos no ERP): assim o
        tint acompanha a cor se ela mudar, em vez de repetir o canal literal. */
  --color-success: #34D27E;   /* lint-skip-U1: definicao de TOKEN */
  --color-success-bg: color-mix(in srgb, var(--color-success) 15%, transparent);
  --color-warning: #FBBF77;   /* lint-skip-U1: definicao de TOKEN */
  --color-warning-bg: color-mix(in srgb, var(--color-warning) 15%, transparent);
  --color-error: #FCA5A5;     /* lint-skip-U1: definicao de TOKEN */
  --color-danger: var(--color-error);
  --color-error-bg: color-mix(in srgb, var(--color-error) 15%, transparent);
  --color-info: #7FB0FF;      /* lint-skip-U1: definicao de TOKEN */
  --color-info-bg: color-mix(in srgb, var(--color-info) 15%, transparent);
  --success: var(--color-success);
  --warning: var(--color-warning);
  --error: var(--color-error);
  --danger: var(--color-error);
  --info: var(--color-info);
  --status-success-hover: #34D399;  /* lint-skip-U1: definicao de TOKEN */
  --status-warning-hover: #FBBF24;  /* lint-skip-U1: definicao de TOKEN */
  --status-error-hover: #F87171;    /* lint-skip-U1: definicao de TOKEN */
  --status-info-hover: #60A5FA;     /* lint-skip-U1: definicao de TOKEN */
  --status-neutral-hover: #9CA3AF;  /* lint-skip-U1: definicao de TOKEN */
  --semantic-text-success: #6EE7B7; /* lint-skip-U1: definicao de TOKEN */
  --semantic-text-danger: #FCA5A5;  /* lint-skip-U1: definicao de TOKEN */
  --semantic-text-warning: #FCD34D; /* lint-skip-U1: definicao de TOKEN */
  --semantic-text-info: #93C5FD;    /* lint-skip-U1: definicao de TOKEN */

  /* ── SOMBRAS — no escuro a sombra preta desaparece: elevacao por
        highlight interno + halo profundo ── */
  --shadow-xs: 0 1px 0 rgba(255, 255, 255, 0.03) inset;
  --shadow-sm: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 4px 12px -6px rgba(0, 0, 0, 0.6);
  --shadow-default: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 8px 22px -10px rgba(0, 0, 0, 0.65);
  --shadow-md: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 10px 28px -10px rgba(0, 0, 0, 0.7);
  --shadow-lg: 0 16px 44px -14px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-xl: 0 24px 60px -16px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.06);
  --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow: var(--shadow-default);
  --theme-shadow: var(--shadow-default);
  --theme-shadow-lg: var(--shadow-lg);
  --elev-hover: 0 4px 12px rgba(var(--erp-dark-primary-rgb), 0.22);
  --elev-active: 0 6px 16px rgba(var(--erp-dark-primary-rgb), 0.28);

  /* ── MENU/SIDEBAR tingido da paleta (base-themes.css redeclara estes por
        paleta com valor CLARO; por isso o seletor de 2 atributos) ── */
  --menu-bg: var(--erp-dark-menu-bg);
  --menu-bg-secondary: var(--erp-dark-menu-bg-2);
  --menu-text: var(--erp-dark-text);
  --menu-text-secondary: var(--erp-dark-text-soft);
  --menu-icon: var(--erp-dark-primary-hover);
  --menu-icon-hover: var(--erp-dark-text);
  --menu-border: rgba(255, 255, 255, 0.10);
  --menu-separator: rgba(255, 255, 255, 0.10);
  --menu-hover: rgba(var(--erp-dark-primary-rgb), 0.14);
  --menu-active: rgba(var(--erp-dark-primary-rgb), 0.22);
  --menu-item-hover: rgba(var(--erp-dark-primary-rgb), 0.14);
  --menu-item-active: rgba(var(--erp-dark-primary-rgb), 0.22);

  /* ── GRADIENTES ── */
  --gradient-primary: linear-gradient(135deg, var(--erp-dark-primary) 0%, var(--erp-dark-primary-hover) 100%);
  --gradient-accent: linear-gradient(135deg, var(--erp-dark-accent) 0%, var(--erp-dark-primary) 100%);
  --gradient-dark: linear-gradient(135deg, var(--erp-dark-surface-elevated) 0%, var(--erp-dark-surface) 100%);
  --gradient: linear-gradient(135deg, var(--erp-dark-menu-bg) 0%, var(--erp-dark-surface-elevated) 100%);

  /* ── CHART.JS (texto claro, grid sutil, serie 1 = cor da paleta) ── */
  --chart-text: var(--text-secondary);
  --chart-grid: rgba(255, 255, 255, 0.08);
  --chart-border: var(--border-default);
  --chart-primary: var(--erp-dark-primary);
  --chart-secondary: var(--erp-dark-primary-hover);
  --chart-accent: var(--erp-dark-accent);
  --chart-success: #34D27E;  /* lint-skip-U1: definicao de TOKEN */
  --chart-danger: #FCA5A5;   /* lint-skip-U1: definicao de TOKEN */
  --chart-warning: #FBBF77;  /* lint-skip-U1: definicao de TOKEN */
  --chart-info: #7FB0FF;     /* lint-skip-U1: definicao de TOKEN */

  /* ── BADGES — texto = o proprio token de status (garante contraste alto),
        fundo/borda = tint do MESMO token, nunca canal literal repetido ── */
  --badge-success-text: #5BE08F;  /* lint-skip-U1: definicao de TOKEN */
  --badge-success-bg: color-mix(in srgb, var(--badge-success-text) 14%, transparent);
  --badge-success-border: color-mix(in srgb, var(--badge-success-text) 32%, transparent);
  --badge-warning-text: var(--color-warning);
  --badge-warning-bg: color-mix(in srgb, var(--color-warning) 14%, transparent);
  --badge-warning-border: color-mix(in srgb, var(--color-warning) 32%, transparent);
  --badge-error-text: var(--color-error);
  --badge-error-bg: color-mix(in srgb, var(--color-error) 14%, transparent);
  --badge-error-border: color-mix(in srgb, var(--color-error) 32%, transparent);
  --badge-info-text: var(--color-info);
  --badge-info-bg: color-mix(in srgb, var(--color-info) 14%, transparent);
  --badge-info-border: color-mix(in srgb, var(--color-info) 32%, transparent);
  --badge-neutral-text: var(--text-secondary);
  --badge-neutral-bg: color-mix(in srgb, var(--text-secondary) 16%, transparent);
  --badge-neutral-border: color-mix(in srgb, var(--text-secondary) 30%, transparent);

  /* ── FROTA + HOME PAGE (nomes legados que muitos modulos consomem) ── */
  --frota-primary: var(--color-primary);
  --frota-light: var(--bg-surface-elevated);
  --frota-dark: var(--text-primary);
  --frota-border: var(--border-strong);
  --frota-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.35);
  --dark: var(--text-primary);
  --light: var(--bg-surface-elevated);
  --gray: var(--text-secondary);
  --light-gray: var(--border-strong);
}

/* ── SEEDS POR PALETA ─────────────────────────────────────────────────────
   Mesma especificidade (0,2,1) do bloco acima e declarados DEPOIS: vencem por
   ordem. Cada bloco troca so o matiz — nenhuma regra de componente e repetida.
   Os valores de texto/superficie de cada paleta passaram pelo calculo WCAG
   (todos >= 13:1 em texto principal, medido no teste). */

html[data-mode="escuro"][data-palette="claro"] {
  /* "Claro" e a paleta verde-neve: no escuro usa o mesmo verde da marca */
  --erp-dark-primary: #34D27E;        /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-primary-hover: #5BE08F;  /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-primary-rgb: 52, 210, 126;
  --erp-dark-accent: #E3C77A;         /* lint-skip-U1: definicao de TOKEN */
}

html[data-mode="escuro"][data-palette="light"] {
  /* Azul Premium escuro — azul-gelo sobre navy petroleo, accent ciano */
  --erp-dark-primary: #7FB4FF;        /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-primary-hover: #A6CBFF;  /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-primary-rgb: 127, 180, 255;
  --erp-dark-accent: #67E8F9;         /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-page: #0A0F16;           /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-surface: #111A28;        /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-surface-elevated: #172233; /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-sunken: #0D1520;         /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-border-light: #151F2E;   /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-border: #1D2839;         /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-border-strong: #2A3548;  /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-menu-bg: #0C1A2E;        /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-menu-bg-2: #08121F;      /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-text: #E6ECF5;           /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-text-soft: #A3B0C2;      /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-text-dim: #7F8B9C;       /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-text-faint: #4F5A6B;     /* lint-skip-U1: definicao de TOKEN */
}

html[data-mode="escuro"][data-palette="roxo"] {
  /* Roxo Premium escuro — violeta claro sobre ametista noturna, accent rosa */
  --erp-dark-primary: #C4B5FD;        /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-primary-hover: #DDD6FE;  /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-primary-rgb: 196, 181, 253;
  --erp-dark-accent: #F9A8D4;         /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-page: #0D0A16;           /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-surface: #171226;        /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-surface-elevated: #1E1830; /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-sunken: #120E1E;         /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-border-light: #1B1529;   /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-border: #241C38;         /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-border-strong: #332A47;  /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-menu-bg: #1B1035;        /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-menu-bg-2: #120A26;      /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-text: #EBE8F5;           /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-text-soft: #ADA6C2;      /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-text-dim: #8A82A0;       /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-text-faint: #574F6B;     /* lint-skip-U1: definicao de TOKEN */
}

html[data-mode="escuro"][data-palette="bordo"] {
  /* Bordo Premium escuro — rose claro sobre vinho profundo, accent dourado */
  --erp-dark-primary: #FDA4AF;        /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-primary-hover: #FECDD3;  /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-primary-rgb: 253, 164, 175;
  --erp-dark-accent: #F5D08A;         /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-page: #140A0E;           /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-surface: #221319;        /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-surface-elevated: #2B1920; /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-sunken: #1A0E13;         /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-border-light: #26151C;   /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-border: #33202A;         /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-border-strong: #452C38;  /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-menu-bg: #2A0E1B;        /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-menu-bg-2: #1C0812;      /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-text: #F5E8EA;           /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-text-soft: #C2A7AD;      /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-text-dim: #A0868C;       /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-text-faint: #6B5459;     /* lint-skip-U1: definicao de TOKEN */
}

html[data-mode="escuro"][data-palette="malva"] {
  /* Malva Premium escuro — lilas acinzentado sobre ameixa fosca */
  --erp-dark-primary: #CDBBD6;        /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-primary-hover: #E1D3E8;  /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-primary-rgb: 205, 187, 214;
  --erp-dark-accent: #E3C77A;         /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-page: #100C12;           /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-surface: #1A151D;        /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-surface-elevated: #221C26; /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-sunken: #150F18;         /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-border-light: #1E1822;   /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-border: #28212D;         /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-border-strong: #372E3D;  /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-menu-bg: #241C29;        /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-menu-bg-2: #18121C;      /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-text: #EDE8F0;           /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-text-soft: #B3A9B8;      /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-text-dim: #8F8695;       /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-text-faint: #5C5561;     /* lint-skip-U1: definicao de TOKEN */
}

html[data-mode="escuro"][data-palette="oliva"] {
  /* Oliva Premium escuro — lima sobre musgo profundo, accent laranja suave */
  --erp-dark-primary: #BEF264;        /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-primary-hover: #D9F99D;  /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-primary-rgb: 190, 242, 100;
  --erp-dark-accent: #FBBF77;         /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-page: #0C0E08;           /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-surface: #161A10;        /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-surface-elevated: #1D2216; /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-sunken: #11150B;         /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-border-light: #1A1E13;   /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-border: #242A1B;         /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-border-strong: #333A26;  /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-menu-bg: #1B2110;        /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-menu-bg-2: #12160A;      /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-text: #EAEEE0;           /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-text-soft: #ADB3A0;      /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-text-dim: #8A9080;       /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-text-faint: #575C4D;     /* lint-skip-U1: definicao de TOKEN */
}

html[data-mode="escuro"][data-palette="nevoa"] {
  /* Nevoa Premium escuro — azul-gelo sobre petroleo, accent verde-agua */
  --erp-dark-primary: #8FD4E8;        /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-primary-hover: #B6E4F1;  /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-primary-rgb: 143, 212, 232;
  --erp-dark-accent: #7FD3C4;         /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-page: #080D10;           /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-surface: #101A1E;        /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-surface-elevated: #162227; /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-sunken: #0C1417;         /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-border-light: #141E22;   /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-border: #1C282D;         /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-border-strong: #28363C;  /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-menu-bg: #0E2028;        /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-menu-bg-2: #09161C;      /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-text: #E4EDF0;           /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-text-soft: #A3B2B8;      /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-text-dim: #808E94;       /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-text-faint: #4F5B60;     /* lint-skip-U1: definicao de TOKEN */
}

html[data-mode="escuro"][data-palette="taupe"] {
  /* Taupe Premium escuro — areia sobre castanho fosco, accent dourado */
  --erp-dark-primary: #DCC7B8;        /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-primary-hover: #EBDDD2;  /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-primary-rgb: 220, 199, 184;
  --erp-dark-accent: #E3C77A;         /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-page: #100D0B;           /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-surface: #1A1613;        /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-surface-elevated: #221D19; /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-sunken: #15110E;         /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-border-light: #1E1A16;   /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-border: #282320;         /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-border-strong: #37302B;  /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-menu-bg: #241C16;        /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-menu-bg-2: #191310;      /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-text: #F0EAE4;           /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-text-soft: #B8ADA5;      /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-text-dim: #948A82;       /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-text-faint: #605852;     /* lint-skip-U1: definicao de TOKEN */
}

html[data-mode="escuro"][data-palette="moda"] {
  /* Moda Premium escuro — rosa sobre vinho-ameixa, accent dourado */
  --erp-dark-primary: #F9A8D4;        /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-primary-hover: #FBCFE8;  /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-primary-rgb: 249, 168, 212;
  --erp-dark-accent: #E3C77A;         /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-page: #14090F;           /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-surface: #22121B;        /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-surface-elevated: #2B1823; /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-sunken: #1A0D15;         /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-border-light: #26141F;   /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-border: #331D2B;         /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-border-strong: #452839;  /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-menu-bg: #2C0F20;        /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-menu-bg-2: #1E0916;      /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-text: #F7E9F0;           /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-text-soft: #C9A9B8;      /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-text-dim: #A38795;       /* lint-skip-U1: definicao de TOKEN */
  --erp-dark-text-faint: #6B565F;     /* lint-skip-U1: definicao de TOKEN */
}

/* ── COMPONENTES QUE BASE-THEMES.CSS PINTA DE CLARO COM !important ─────────
   La existe, para CADA paleta, um `html.theme-<paleta> body.erp-base` com
   background lilas/azul/rose CLARO marcado !important (9 blocos). Eles casariam
   tambem no escuro, dando pagina CLARA com card escuro. Como base-themes.css
   carrega DEPOIS, empate de especificidade perderia: por isso 3 "classes"
   (2 atributos + a classe do elemento) contra as 2 de la.
   (Sem citar o valor literal aqui: hex dentro de COMENTARIO tambem viola a U1.) */

html[data-mode="escuro"][data-palette] body.erp-base {
  background-color: var(--bg-page) !important;
  color: var(--text-primary) !important;
}

html[data-mode="escuro"][data-palette] input:focus,
html[data-mode="escuro"][data-palette] select:focus,
html[data-mode="escuro"][data-palette] textarea:focus {
  border-color: var(--border-focus) !important;
  box-shadow: 0 0 0 3px rgba(var(--erp-dark-primary-rgb), 0.22) !important;
}

html[data-mode="escuro"][data-palette] table tbody tr:hover {
  background-color: var(--bg-hover) !important;
}

html[data-mode="escuro"][data-palette] ::-webkit-scrollbar-thumb {
  background: rgba(var(--erp-dark-primary-rgb), 0.28) !important;
}

html[data-mode="escuro"][data-palette] ::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--erp-dark-primary-rgb), 0.45) !important;
}

/* Icone sobre fundo "tingido" (chip de 14% de opacidade) = a cor clara da
   paleta; sobre fundo saturado continua branco (os --card-grad-* sao escuros
   em todas as paletas). */
html[data-mode="escuro"][data-palette] {
  --icon-on-tinted: var(--erp-dark-primary);
  --text-on-saturated: #ffffff;
}

/* EDGE CASES / PREFERENCIAS DO SO (BRIEF sec 10) — 2026-05-29 — Alto contraste, forced-colors (Windows HC) e impressao. — prefers-reduced-motion ja coberto no bloco theme-transitioning. */

/* Alto contraste do SO: reforca texto/bordas no dark.
   `html[data-mode="escuro"][data-palette]` TEM de estar aqui: tem a mesma
   especificidade (0,2,1) do bloco escuro por paleta acima e vem DEPOIS, entao
   ganha por ordem. Sem esta linha o usuario de alto contraste do SO perdia o
   reforco em qualquer paleta escura (o seletor `.dark` sozinho, (0,1,0), perde). */
@media (prefers-contrast: more) {
  html.theme-dark, .dark,
  html[data-mode="escuro"][data-palette] {
    --text-primary: #FFFFFF;
    --text-secondary: #E6ECE9;
    --border-default: #3A463F;
    --border-strong: #4A574F;
  }
}

/* Windows High Contrast / forced-colors: respeitar paleta do sistema no foco */
@media (forced-colors: active) {
  :focus-visible { outline: 2px solid Highlight; }
}

/* Impressao: dark/claro gastam toner — forca tinta clara economica em qualquer tema */
@media print {
  :root,
  html.theme-dark, .dark,
  html.theme-claro,
  /* OBRIGATORIO: sem esta linha uma paleta escura (data-mode=escuro) imprimiria
     pagina/card PRETOS com texto forcado para preto — preto-no-preto no papel e
     toner desperdicado. `:root` e (0,1,0) e NAO alcanca o bloco escuro (0,2,1);
     este seletor tem a mesma especificidade e vem depois no arquivo. */
  html[data-mode="escuro"][data-palette] {
    --bg-page: #FFFFFF;
    --bg-surface: #FFFFFF;
    --bg-surface-elevated: #FFFFFF;
    --bg-surface-secondary: #FFFFFF;
    /* junto com os demais fundos: no papel o fade tem de ser BRANCO em qualquer
       tema, senao o dark imprimiria duas faixas escuras gastando toner. */
    --modal-scroll-fade: #FFFFFF; /* lint-skip-U1: definicao de TOKEN — o literal aqui E o objetivo da U1 */
    /* OBRIGATORIO junto com os demais fundos: sem estas 2 linhas o tema dark
       imprimiria thead/KPI/chip com o fundo recuado ESCURO do dark e o
       --text-primary forcado para preto em cima = preto-no-preto no papel
       (mesma classe do bug que este commit conserta) + toner desperdicado. */
    --bg-subtle: #FFFFFF; /* lint-skip-U1: definicao de TOKEN — o literal aqui E o objetivo da U1 */
    --bg-muted: #F0F0F0; /* lint-skip-U1: definicao de TOKEN — o literal aqui E o objetivo da U1 */
    --text-primary: #000000;
    --text-secondary: #333333;
    --text-muted: #555555;
    --border-default: #CCCCCC;
  }
}

/* GUIA DE EXTENSIBILIDADE - ADICIONANDO NOVOS TEMAS PREMIUM — Para adicionar um novo tema (ex: "ocean"), crie uma nova seção: — html.theme-ocean { — --theme-name: 'ocean'; — --theme-display-name: 'Oceano Profundo'; — --theme-icon: 'bi-tsunami'; — --color-primary: #0077B6; — --color-primary-hover: #023E8A; — ...defina todas as variáveis necessárias... — } — No theme-system.js, registre o novo tema: — ThemeRegistry.register('ocean', { — name: 'Oceano Profundo', — classes: ['theme-ocean'], — icon: { desktop: 'bi bi-tsunami', mobile: 'bi bi-tsunami' } — }); */