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

  /* ────────────────────────────────────────────────────────────
     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-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-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: #78909C;
  --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;
}

/* ================================================================
   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: #4FAF99;
  --color-primary-hover: #77C2AF;
  --color-primary-rgb: 79, 175, 153;

  /* Dourado Accent (ajustado para dark - tons mais claros) */
  --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;
  --color-accent: #E0BC4A;

  /* Status (ajustadas para dark) */
  --color-success: #6EE7B7;
  --color-success-bg: rgba(16, 185, 129, 0.15);
  --color-warning: #FCD34D;
  --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: #93C5FD;
  --color-info-bg: rgba(59, 130, 246, 0.15);

  /* Superficies */
  --bg-page: #0A0A0A;
  --bg-surface: #18181B;
  --bg-surface-elevated: #27272A;
  --bg-overlay: rgba(0, 0, 0, 0.8);
  --bg-hover: rgba(255, 255, 255, 0.05);

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

  /* Textos */
  --text-primary: #FAFAFA;
  --text-secondary: #E5E7EB;
  --text-muted: #A1A1AA;
  --text-disabled: #52525B;
  --text-link: #C4B5FD;
  --text-link-hover: #A78BFA;

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

  /* Bordas */
  --border-light: #1F1F23;
  --border-default: #27272A;
  --border-strong: #3F3F46;
  --border-focus: #A78BFA;

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

  /* Sombras (mais intensas) */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-default: 0 2px 4px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.7);

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

  /* Menu (Dark mode com verde) */
  --menu-bg: #092e24;
  --menu-text: #FAFAFA;
  --menu-icon: #9ED4C5;
  --menu-hover: rgba(212, 168, 37, 0.2);
  --menu-active: rgba(212, 168, 37, 0.3);

  /* Gradientes */
  --gradient-primary: linear-gradient(135deg, #4FAF99 0%, #1a6b52 100%);
  --gradient-accent: linear-gradient(135deg, #E0BC4A 0%, #d4a825 100%);
  --gradient-success: linear-gradient(135deg, #6EE7B7 0%, #10B981 100%);

  /* Chart.js */
  --chart-text: #E5E7EB;
  --chart-grid: rgba(255, 255, 255, 0.1);
  --chart-border: #27272A;
  --chart-primary: #4FAF99;
  --chart-secondary: #77C2AF;
  --chart-accent: #E0BC4A;
  --chart-success: #10B981;
  --chart-danger: #EF4444;
  --chart-warning: #FBBF24;
  --chart-info: #00D9FF;
  --chart-cyan: #00D9FF;
  --chart-purple: #A78BFA;
  --chart-pink: #F472B6;
  --chart-orange: #FB923C;
}

/* ================================================================
   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(--bg-surface); }
.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, #4FAF99 0%, #1a6b52 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: #64748B;
  --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%);
}

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

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

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