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

/* ============================================
   CRITICAL - INPUTS (evita FOUC até premium-components carregar)
   Valores fixos (zinc-900/800/400) alinhados ao design system.
   ============================================ */
[data-theme='dark'] input[type='text'],
[data-theme='dark'] input[type='email'],
[data-theme='dark'] input[type='password'],
[data-theme='dark'] input[type='number'],
[data-theme='dark'] input[type='url'],
[data-theme='dark'] input[type='search'],
[data-theme='dark'] input[type='tel'],
[data-theme='dark'] input[type='date'],
[data-theme='dark'] input[type='time'],
[data-theme='dark'] input[type='datetime-local'],
[data-theme='dark'] textarea,
[data-theme='dark'] select,
.adsx-premium input[type='text'],
.adsx-premium input[type='email'],
.adsx-premium input[type='password'],
.adsx-premium input[type='number'],
.adsx-premium input[type='url'],
.adsx-premium input[type='search'],
.adsx-premium input[type='tel'],
.adsx-premium input[type='date'],
.adsx-premium input[type='time'],
.adsx-premium input[type='datetime-local'],
.adsx-premium textarea,
.adsx-premium select {
  background-color: #18181b !important;
  border: 1px solid #27272a !important;
  color: #a1a1aa !important;
  border-radius: 8px;
  -webkit-text-fill-color: #a1a1aa !important;
}

[data-theme='dark'] input[type='text']:focus,
[data-theme='dark'] input[type='email']:focus,
[data-theme='dark'] input[type='password']:focus,
[data-theme='dark'] input[type='number']:focus,
[data-theme='dark'] input[type='url']:focus,
[data-theme='dark'] input[type='search']:focus,
[data-theme='dark'] input[type='tel']:focus,
[data-theme='dark'] input[type='date']:focus,
[data-theme='dark'] input[type='time']:focus,
[data-theme='dark'] input[type='datetime-local']:focus,
[data-theme='dark'] textarea:focus,
[data-theme='dark'] select:focus,
.adsx-premium input[type='text']:focus,
.adsx-premium input[type='email']:focus,
.adsx-premium input[type='password']:focus,
.adsx-premium input[type='number']:focus,
.adsx-premium input[type='url']:focus,
.adsx-premium input[type='search']:focus,
.adsx-premium input[type='tel']:focus,
.adsx-premium input[type='date']:focus,
.adsx-premium input[type='time']:focus,
.adsx-premium input[type='datetime-local']:focus,
.adsx-premium textarea:focus,
.adsx-premium select:focus {
  border-color: #8b5cf6 !important;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1) !important;
  outline: none !important;
}

[data-theme='dark'] input::placeholder,
[data-theme='dark'] textarea::placeholder,
.adsx-premium input::placeholder,
.adsx-premium textarea::placeholder {
  color: #71717a !important;
  opacity: 0.5 !important;
}

/* Classe .adsx-input (usada em vários formulários) */
.adsx-input {
  width: 100%;
  padding: 10px 14px;
  background-color: #18181b;
  border: 1px solid #27272a;
  border-radius: 8px;
  color: #a1a1aa;
  font-size: 0.875rem;
  font-family: 'Inter', sans-serif;
  outline: none;
  -webkit-text-fill-color: #a1a1aa;
}

.adsx-input:focus {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

/* ============================================
   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: #5b5b61 !important; /* 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: #5b5b61 !important; /* 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;
}