/**
 * Variáveis CSS Compartilhadas - Customização por Loja
 * Este arquivo define as cores e fontes que podem ser personalizadas por cada loja
 * 
 * Uso com Tailwind via CDN:
 * As variáveis são referenciadas no tailwind.config.js e usadas nas classes utilitárias
 */

:root {
  /* ==========================================
     CORES PRIMÁRIAS - Personalizável por Loja
     ========================================== */
  
  /* Cor primária da marca (botões, links, destaques) */
  --primary-color: #2563eb;
  
  /* Cor secundária (hover, estados ativos) */
  --secondary-color: #1e40af;
  
  /* Cor de destaque/acento (badges, notificações) */
  --accent-color: #f59e0b;
  
  /* ==========================================
     CORES DE STATUS
     ========================================== */
  
  --success-color: #10b981;
  --warning-color: #f59e0b;
  --error-color: #ef4444;
  --info-color: #3b82f6;
  
  /* ==========================================
     CORES NEUTRAS
     ========================================== */
  
  --color-white: #ffffff;
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;
  
  /* ==========================================
     FONTES - Personalizável por Loja
     ========================================== */
  
  /* Fonte principal (pode ser sobrescrita pela loja) */
  --font-main: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  
  /* Fonte para títulos (opcional, usa --font-main se não definido) */
  --font-heading: var(--font-main);
  
  /* ==========================================
     ESPAÇAMENTO E BORDAS
     ========================================== */
  
  --border-radius-sm: 0.375rem;
  --border-radius-md: 0.5rem;
  --border-radius-lg: 0.75rem;
  --border-radius-xl: 1rem;
  --border-radius-2xl: 1.5rem;
  --border-radius-full: 9999px;
  
  /* ==========================================
     SOMBRAS
     ========================================== */
  
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  
  /* ==========================================
     TRANSITIONS
     ========================================== */
  
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 350ms ease;
  
  /* ==========================================
     Z-INDEX SCALE
     ========================================== */
  
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
}

/* ==========================================
   TEMA VINHO (Loja 2)
   ========================================== */
.theme-wine {
  --primary-color: #722F37;      /* Vinho escuro */
  --secondary-color: #4A192C;    /* Vinho muito escuro */
  --accent-color: #D4AF37;       /* Dourado */
  
  --color-background: #FAF8F5;   /* Creme suave */
  --color-surface: #FFFFFF;      /* Branco */
}

/* ==========================================
   TEMA MODERNO (Loja 3)
   ========================================== */
.theme-modern {
  --primary-color: #0ea5e9;      /* Sky blue */
  --secondary-color: #0284c7;    /* Sky dark */
  --accent-color: #f97316;       /* Orange */
}

/* ==========================================
   TEMA EDITORIAL (Loja 4)
   ========================================== */
.theme-editorial {
  --primary-color: #0f172a;      /* Slate 900 */
  --secondary-color: #334155;    /* Slate 700 */
  --accent-color: #eab308;       /* Yellow 500 */
}

/* ==========================================
   TEMA ESCURO (Dark Mode - Opcional)
   ========================================== */
@media (prefers-color-scheme: dark) {
  :root.dark-mode {
    --color-background: #111827;
    --color-surface: #1f2937;
    --color-text-primary: #f9fafb;
    --color-text-secondary: #d1d5db;
  }
}

/* ==========================================
   UTILITÁRIOS BASEADOS EM VARIÁVEIS
   ========================================== */

.bg-primary { background-color: var(--primary-color); }
.text-primary { color: var(--primary-color); }
.border-primary { border-color: var(--primary-color); }

.bg-secondary { background-color: var(--secondary-color); }
.text-secondary { color: var(--secondary-color); }

.hover-bg-primary:hover { background-color: var(--primary-color) !important; }
.hover-text-primary:hover { color: var(--primary-color) !important; }

/* Botão primário com variáveis */
.btn-primary-vars {
  background-color: var(--primary-color);
  color: white;
  transition: all var(--transition-fast);
}

.btn-primary-vars:hover {
  background-color: var(--secondary-color);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* Card com variáveis */
.card-vars {
  background-color: var(--color-surface, #ffffff);
  border-radius: var(--border-radius-xl);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-normal);
}

.card-vars:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* ==========================================
   VARIÁVEIS RESPONSIVAS
   ========================================== */

:root {
  /* Tamanhos de fonte responsivos usando clamp() */
  --font-size-xs: clamp(0.75rem, 2vw, 0.875rem);
  --font-size-sm: clamp(0.875rem, 2.5vw, 1rem);
  --font-size-base: clamp(1rem, 3vw, 1.125rem);
  --font-size-lg: clamp(1.125rem, 3.5vw, 1.25rem);
  --font-size-xl: clamp(1.25rem, 4vw, 1.5rem);
  --font-size-2xl: clamp(1.5rem, 5vw, 2rem);
  --font-size-3xl: clamp(1.75rem, 6vw, 2.5rem);
  
  /* Padding responsivo */
  --padding-xs: clamp(8px, 2vw, 16px);
  --padding-sm: clamp(12px, 3vw, 20px);
  --padding-md: clamp(16px, 4vw, 24px);
  --padding-lg: clamp(24px, 6vw, 32px);
  --padding-xl: clamp(32px, 8vw, 48px);
  
  /* Gap responsivo */
  --gap-xs: clamp(4px, 1.5vw, 8px);
  --gap-sm: clamp(8px, 2vw, 12px);
  --gap-md: clamp(12px, 3vw, 16px);
  --gap-lg: clamp(16px, 4vw, 24px);
  
  /* Border radius responsivo */
  --radius-sm: clamp(6px, 1.5vw, 8px);
  --radius-md: clamp(8px, 2vw, 12px);
  --radius-lg: clamp(12px, 3vw, 16px);
  --radius-xl: clamp(16px, 4vw, 24px);
}

/* Utilitários com variáveis responsivas */
.text-responsive { font-size: var(--font-size-base); }
.p-responsive { padding: var(--padding-md); }
.gap-responsive { gap: var(--gap-md); }

/* Mobile-specific adjustments */
@media (max-width: 768px) {
  :root {
    --padding-lg: clamp(16px, 5vw, 24px);
    --padding-xl: clamp(20px, 6vw, 32px);
  }
}

/* Touch target mínimo */
@media (hover: none) and (pointer: coarse) {
  :root {
    --min-touch-target: 44px;
  }
  
  button, .btn, a[role="button"] {
    min-height: var(--min-touch-target);
    min-width: var(--min-touch-target);
  }
}