/**
 * ================================================================
 * 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';

  /* ────────────────────────────────────────────────────────────
     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;

  /* ────────────────────────────────────────────────────────────
     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);

  /* ────────────────────────────────────────────────────────────
     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;
  --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);

  /* ================================================================
     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;

  /* ================================================================
     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;
}

/* ================================================================
   @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;

  /* 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;
  --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);
  --glow-brand: 0 0 0 1px rgba(52, 210, 126, 0.35), 0 16px 40px -12px rgba(0, 0, 0, 0.7), 0 0 30px -8px rgba(52, 210, 126, 0.28);

  /* 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%);
  --gradient-danger: linear-gradient(135deg, #F87171 0%, #DC2626 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;
}

/* ================================================================
   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); }

/* 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: var(--color-primary);
  --theme-primary-hover: var(--color-primary-hover);
  --theme-primary-rgb: var(--color-primary-rgb);
  --theme-secondary: var(--color-secondary);
  --theme-accent: var(--color-accent);
  --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-text-disabled: var(--text-disabled);
  --theme-border: var(--border-default);
  --theme-border-light: var(--border-light);
  --theme-border-strong: var(--border-strong);
  --theme-shadow: var(--shadow-default);
  --theme-shadow-sm: var(--shadow-sm);
  --theme-shadow-md: var(--shadow-md);
  --theme-shadow-lg: var(--shadow-lg);
  --theme-shadow-xl: var(--shadow-xl);
  --theme-success: var(--color-success);
  --theme-success-bg: var(--color-success-bg);
  --theme-warning: var(--color-warning);
  --theme-warning-bg: var(--color-warning-bg);
  --theme-error: var(--color-error);
  --theme-error-bg: var(--color-error-bg);
  --theme-info: var(--color-info);
  --theme-info-bg: var(--color-info-bg);
  --theme-menu-bg: var(--menu-bg);
  --theme-menu-text: var(--menu-text);
  --theme-menu-icon: var(--menu-icon);
  --theme-menu-hover: var(--menu-hover);
  --theme-menu-active: var(--menu-active);

  /* ────────────────────────────────────────────────────────────
     Aliases para transicoes (diferentes nomes usados)
     ──────────────────────────────────────────────────────────── */
  --theme-transition-fast: var(--duration-150);
  --theme-transition-base: var(--duration-200);
  --theme-transition-slow: var(--duration-300);
  --theme-transition-ease: var(--ease-in-out);
  --transition-normal: var(--transition-base);

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

  /* ────────────────────────────────────────────────────────────
     Aliases para tipografia
     ──────────────────────────────────────────────────────────── */
  --theme-font-sans: var(--font-sans);
  --theme-font-display: var(--font-display);

  /* ────────────────────────────────────────────────────────────
     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);
  --spacing-2xl: var(--spacing-12);

  /* ────────────────────────────────────────────────────────────
     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;
  --whatsapp-light: #DCF8C6;

  /* ────────────────────────────────────────────────────────────
     VARIAVEIS DE SOMBRA ADICIONAIS (dashboard-campanha.css)
     ──────────────────────────────────────────────────────────── */
  --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.12);
  --shadow-large: 0 8px 24px rgba(0, 0, 0, 0.16);

  /* ────────────────────────────────────────────────────────────
     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-primary: var(--color-primary);
  --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);
  --theme-menu-bg: var(--menu-bg);

  /* 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);
  --shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.25);
  --shadow-large: 0 8px 24px rgba(0, 0, 0, 0.3);

  /* 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;
  --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);
  --shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-large: 0 8px 24px rgba(0, 0, 0, 0.1);

  /* 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: var(--color-primary);
  --theme-primary-hover: var(--color-primary-hover);
  --theme-primary-rgb: var(--color-primary-rgb);
  --theme-secondary: var(--color-secondary);
  --theme-accent: var(--color-accent);
  --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);
  --theme-menu-bg: var(--menu-bg);
  --theme-menu-text: var(--menu-text);
  --theme-menu-icon: var(--menu-icon);
  --theme-menu-hover: var(--menu-hover);
  --theme-menu-active: var(--menu-active);

  /* 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;
  --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);
  --shadow-medium: 0 4px 12px rgba(109, 40, 217, 0.08);
  --shadow-large: 0 8px 24px rgba(109, 40, 217, 0.1);

  /* 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: var(--color-primary);
  --theme-primary-hover: var(--color-primary-hover);
  --theme-primary-rgb: var(--color-primary-rgb);
  --theme-secondary: var(--color-secondary);
  --theme-accent: var(--color-accent);
  --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);
  --theme-menu-bg: var(--menu-bg);
  --theme-menu-text: var(--menu-text);
  --theme-menu-icon: var(--menu-icon);
  --theme-menu-hover: var(--menu-hover);
  --theme-menu-active: var(--menu-active);

  /* 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;
  --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);
  --shadow-medium: 0 4px 12px rgba(159, 18, 57, 0.08);
  --shadow-large: 0 8px 24px rgba(159, 18, 57, 0.1);

  /* 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: var(--color-primary);
  --theme-primary-hover: var(--color-primary-hover);
  --theme-primary-rgb: var(--color-primary-rgb);
  --theme-secondary: var(--color-secondary);
  --theme-accent: var(--color-accent);
  --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);
  --theme-menu-bg: var(--menu-bg);
  --theme-menu-text: var(--menu-text);
  --theme-menu-icon: var(--menu-icon);
  --theme-menu-hover: var(--menu-hover);
  --theme-menu-active: var(--menu-active);

  /* 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;
  --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);
  --shadow-medium: 0 4px 12px rgba(99, 87, 104, 0.08);
  --shadow-large: 0 8px 24px rgba(99, 87, 104, 0.1);

  /* 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: var(--color-primary);
  --theme-primary-hover: var(--color-primary-hover);
  --theme-primary-rgb: var(--color-primary-rgb);
  --theme-secondary: var(--color-secondary);
  --theme-accent: var(--color-accent);
  --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);
  --theme-menu-bg: var(--menu-bg);
  --theme-menu-text: var(--menu-text);
  --theme-menu-icon: var(--menu-icon);
  --theme-menu-hover: var(--menu-hover);
  --theme-menu-active: var(--menu-active);

  /* 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;
  --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);
  --shadow-medium: 0 4px 12px rgba(99, 102, 86, 0.08);
  --shadow-large: 0 8px 24px rgba(99, 102, 86, 0.1);

  /* 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: var(--color-primary);
  --theme-primary-hover: var(--color-primary-hover);
  --theme-primary-rgb: var(--color-primary-rgb);
  --theme-secondary: var(--color-secondary);
  --theme-accent: var(--color-accent);
  --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);
  --theme-menu-bg: var(--menu-bg);
  --theme-menu-text: var(--menu-text);
  --theme-menu-icon: var(--menu-icon);
  --theme-menu-hover: var(--menu-hover);
  --theme-menu-active: var(--menu-active);

  /* 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;
  --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);
  --shadow-medium: 0 4px 12px rgba(89, 105, 111, 0.08);
  --shadow-large: 0 8px 24px rgba(89, 105, 111, 0.1);

  /* 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: var(--color-primary);
  --theme-primary-hover: var(--color-primary-hover);
  --theme-primary-rgb: var(--color-primary-rgb);
  --theme-secondary: var(--color-secondary);
  --theme-accent: var(--color-accent);
  --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);
  --theme-menu-bg: var(--menu-bg);
  --theme-menu-text: var(--menu-text);
  --theme-menu-icon: var(--menu-icon);
  --theme-menu-hover: var(--menu-hover);
  --theme-menu-active: var(--menu-active);

  /* 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;
  --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);
  --shadow-medium: 0 4px 12px rgba(103, 92, 88, 0.08);
  --shadow-large: 0 8px 24px rgba(103, 92, 88, 0.1);

  /* 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: var(--color-primary);
  --theme-primary-hover: var(--color-primary-hover);
  --theme-primary-rgb: var(--color-primary-rgb);
  --theme-secondary: var(--color-secondary);
  --theme-accent: var(--color-accent);
  --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);
  --theme-menu-bg: var(--menu-bg);
  --theme-menu-text: var(--menu-text);
  --theme-menu-icon: var(--menu-icon);
  --theme-menu-hover: var(--menu-hover);
  --theme-menu-active: var(--menu-active);

  /* 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%);
}

/* ================================================================
   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;
  --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-medium: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-large: 0 8px 24px rgba(0, 0, 0, 0.10);
  --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: var(--color-primary);
  --theme-primary-hover: var(--color-primary-hover);
  --theme-primary-rgb: var(--color-primary-rgb);
  --theme-secondary: var(--color-secondary);
  --theme-accent: var(--color-accent);
  --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);
  --theme-menu-bg: var(--menu-bg);
  --theme-menu-text: var(--menu-text);
  --theme-menu-icon: var(--menu-icon);
  --theme-menu-hover: var(--menu-hover);
  --theme-menu-active: var(--menu-active);

  /* 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).
   ================================================================ */

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

.dark,
html.theme-dark {
  --icon-on-tinted:  var(--color-primary-200);
  --icon-on-primary: var(--color-gold-400, #EBD7A0);
}

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

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

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

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

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

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

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

/* ================================================================
   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 */
@media (prefers-contrast: more) {
  html.theme-dark, .dark {
    --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 {
    --bg-page: #FFFFFF;
    --bg-surface: #FFFFFF;
    --bg-surface-elevated: #FFFFFF;
    --bg-surface-secondary: #FFFFFF;
    --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' }
   });

   ================================================================ */