/**
 * AdsX Premium Design System - Variáveis CSS
 * 
 * Este arquivo define as variáveis CSS premium baseadas na paleta Zinc
 * e cores da marca conforme o guia de design premium.
 * 
 * As variáveis são aplicadas quando:
 * - [data-theme='dark'] está presente (dark mode)
 * - .adsx-premium está presente no elemento ou ancestrais
 * 
 * Não sobrescreve variáveis existentes, apenas adiciona novas opções.
 */

/* ============================================
   PALETA DE CORES - DARK MODE (ZINC)
   ============================================ */

[data-theme='dark'] .adsx-premium,
[data-theme='dark'] .adsx-premium * {
  /* Superfícies e Fundos */
  --adsx-bg-global: #09090b; /* zinc-950 - Fundo Global */
  --adsx-bg-card: #18181b; /* zinc-900 - Cards e Sidebar */
  --adsx-bg-border: #27272a; /* zinc-800 - Bordas e Divisores */
  --adsx-bg-detail: #1f2937; /* zinc-850 customizado - Detalhes de fundo */
  
  /* Cores da Marca (Brand Colors) - Conforme guide.md */
  --adsx-primary: #8b5cf6; /* violet-500 - Roxo Elétrico (Cor primária) */
  --adsx-primary-dark: #6d28d9; /* violet-700 - Roxo Profundo (Hover, sombras) */
  --adsx-primary-light: #a78bfa; /* violet-400 - Roxo Claro */
  
  /* Sobrescrever variáveis antigas para compatibilidade com estilos legados */
  --color-primary: #8b5cf6 !important; /* violet-500 - Roxo Elétrico */
  --color-primary-dark: #6d28d9 !important; /* violet-700 - Roxo Profundo */
  --color-primary-light: #a78bfa !important; /* violet-400 - Roxo Claro */
  
  /* Sobrescrever variáveis de fundo e texto antigas */
  --color-white: #ffffff !important;
  --color-white-dark: #09090b !important; /* zinc-950 - fundo global dark */
  --color-gray: #fafafa !important; /* zinc-50 - texto principal dark */
  --color-gray-dark: #ffffff !important; /* Branco - títulos dark */
  --color-gray-light: #27272a !important; /* zinc-800 - bordas dark */
  
  /* Cores Semânticas para Visualização de Dados - Conforme guide.md */
  --adsx-success: #10b981; /* emerald-500 - Lucro / Dinheiro */
  --adsx-success-dark: #059669; /* emerald-600 */
  --adsx-success-light: #34d399; /* emerald-400 */
  
  --adsx-info: #3b82f6; /* blue-500 - Volume / Cliques */
  --adsx-info-dark: #2563eb; /* blue-600 */
  --adsx-info-light: #60a5fa; /* blue-400 */
  
  --adsx-warning: #f59e0b; /* amber-500 - Atenção */
  --adsx-warning-dark: #d97706; /* amber-600 */
  --adsx-warning-light: #fbbf24; /* amber-400 */
  
  --adsx-danger: #ef4444; /* red-500 - Alertas / Erro */
  --adsx-danger-dark: #dc2626; /* red-600 */
  --adsx-danger-light: #f87171; /* red-400 */
  
  /* Sobrescrever variáveis de cores semânticas antigas */
  --color-success: #10b981 !important; /* emerald-500 */
  --color-info: #3b82f6 !important; /* blue-500 */
  --color-warning: #f59e0b !important; /* amber-500 */
  --color-danger: #ef4444 !important; /* red-500 */
  
  /* Cores de Texto - Variações de Branco/Cinza */
  --adsx-text-bright: #ffffff; /* Branco puro - Títulos principais, números grandes, botões ativos */
  --adsx-text-primary: #fafafa; /* Branco quase puro - Texto principal (zinc-50) */
  --adsx-text-secondary: #a1a1aa; /* Cinza claro - Texto secundário, inputs, botões não selecionados (zinc-400) */
  --adsx-text-tertiary: #71717a; /* Cinza médio - Texto terciário, placeholders (zinc-500) */
  --adsx-text-muted: #52525b; /* Cinza escuro - Texto desabilitado, sidebar inativo (zinc-600) */
  --adsx-text-disabled: #3f3f46; /* Cinza muito escuro - Texto desabilitado (zinc-700) */
  
  /* Bordas e Divisores */
  --adsx-border-default: 1px solid var(--adsx-bg-border);
  --adsx-border-light: 1px solid rgba(255, 255, 255, 0.05);
  --adsx-border-medium: 1px solid rgba(255, 255, 255, 0.1);
  
  /* Sombras Premium */
  --adsx-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --adsx-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  --adsx-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
  --adsx-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.4);
  --adsx-shadow-purple: 0 4px 14px 0 rgba(139, 92, 246, 0.2); /* shadow-purple-900/20 */
  
  /* Transições */
  --adsx-transition-fast: 150ms ease-in-out;
  --adsx-transition-base: 200ms ease-in-out;
  --adsx-transition-slow: 300ms ease-in-out;
}

/* ============================================
   LIGHT MODE (Opcional - para futuro)
   ============================================ */

[data-theme='light'] .adsx-premium,
.adsx-premium-light {
  /* Modo light premium - escala slate */
  /* Fundos */
  --adsx-bg-global: #f8fafc; /* slate-50 */
  --adsx-bg-card: #ffffff; /* base cards */
  --adsx-bg-border: #e2e8f0; /* slate-200 */
  --adsx-bg-detail: #f1f5f9; /* slate-100 */

  /* Marca (mesma paleta roxa) */
  --adsx-primary: #8b5cf6;
  --adsx-primary-dark: #6d28d9;
  --adsx-primary-light: #a78bfa;

  --adsx-secondary: #EF476F;
  --adsx-secondary-dark: #bd3756;
  --adsx-secondary-light: #eb92a7;

  /* Semânticas (mantidas para consistência cross-theme) */
  --adsx-success: #10b981;
  --adsx-success-dark: #059669;
  --adsx-success-light: #34d399;

  --adsx-info: #3b82f6;
  --adsx-info-dark: #2563eb;
  --adsx-info-light: #60a5fa;

  --adsx-warning: #f59e0b;
  --adsx-warning-dark: #d97706;
  --adsx-warning-light: #fbbf24;

  --adsx-danger: #ef4444;
  --adsx-danger-dark: #dc2626;
  --adsx-danger-light: #f87171;

  /* Texto em fundos claros */
  --adsx-text-bright: #0b1224; /* quase preto */
  --adsx-text-primary: #0f172a; /* slate-900 */
  --adsx-text-secondary: #334155; /* slate-700 */
  --adsx-text-tertiary: #64748b; /* slate-500 */
  --adsx-text-muted: #94a3b8; /* slate-400 */
  --adsx-text-disabled: #cbd5e1; /* slate-300 */

  /* Bordas e sombras suaves */
  --adsx-border-default: 1px solid var(--adsx-bg-border);
  --adsx-border-light: 1px solid rgba(15, 23, 42, 0.06);
  --adsx-border-medium: 1px solid rgba(15, 23, 42, 0.1);

  --adsx-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --adsx-shadow-md: 0 8px 20px rgba(15, 23, 42, 0.08);
  --adsx-shadow-lg: 0 12px 30px rgba(15, 23, 42, 0.1);
  --adsx-shadow-xl: 0 20px 45px rgba(15, 23, 42, 0.12);
  --adsx-shadow-purple: 0 4px 14px rgba(139, 92, 246, 0.2);

  /* Transições (mantidas) */
  --adsx-transition-fast: 150ms ease-in-out;
  --adsx-transition-base: 200ms ease-in-out;
  --adsx-transition-slow: 300ms ease-in-out;
  
  /* Sobrescrever variáveis antigas para compatibilidade com estilos legados */
  --color-white: #ffffff !important;
  --color-white-dark: #f8fafc !important; /* slate-50 - fundo global */
  --color-gray: #0f172a !important; /* slate-900 - texto principal */
  --color-gray-dark: #0f172a !important; /* slate-900 - títulos */
  --color-gray-light: #e2e8f0 !important; /* slate-200 - bordas */
  
  /* Cores primárias antigas */
  --color-primary: #8b5cf6 !important;
  --color-primary-dark: #6d28d9 !important;
  --color-primary-light: #a78bfa !important;
  
  /* Cores semânticas antigas */
  --color-success: #10b981 !important;
  --color-info: #3b82f6 !important;
  --color-warning: #f59e0b !important;
  --color-danger: #ef4444 !important;
}