/* ============================================
   GHOSTZZZ WEB STUDIO - PALETA DE CORES
   ============================================
   
   Para trocar o tema do site inteiro, 
   basta editar as variáveis CSS abaixo!
   
   ============================================ */
/*
   :root {
  --primary-color: #8b5cf6;        
  --secondary-color: #ec4899;
  --accent-color: #f59e0b;
  
 
  --bg-primary: #0f0f23;          
  --bg-secondary: #1a1a2e;         
  --bg-card: rgba(255, 255, 255, 0.03);
  
  
  --gradient-main: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
  --gradient-hover: linear-gradient(135deg, #764ba2 0%, #d946a8 100%);
  
  
  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.7); 
  --text-muted: rgba(255, 255, 255, 0.5);
  

  --border-color: rgba(255, 255, 255, 0.1);
  --border-hover: rgba(139, 92, 246, 0.5);
  

  --shadow-sm: 0 5px 15px rgba(139, 92, 246, 0.2);
  --shadow-md: 0 10px 30px rgba(139, 92, 246, 0.4);
  --shadow-lg: 0 20px 60px rgba(139, 92, 246, 0.3);
  

  --whatsapp-color: #25D366;
  --success-color: #22c55e;
  --error-color: #ef4444;
  --warning-color: #f59e0b;
}
*/

/* ============================================
   TEMA ALTERNATIVO: CATATAU STYLE
   ============================================
   
   Para usar esse tema, descomente as linhas
   abaixo e comente as linhas acima!
   
   ============================================ */


:root {
  --primary-color: #ffffff;
  --secondary-color: #ffffff;
  --accent-color: #cccccc;
  
  --bg-primary: #000000;
  --bg-secondary: #0a0a0a;
  --bg-card: rgba(255, 255, 255, 0.05);
  
  --gradient-main: linear-gradient(135deg, #ffffff 0%, #cccccc 100%);
  --gradient-hover: linear-gradient(135deg, #eeeeee 0%, #bbbbbb 100%);
  
  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.8);
  --text-muted: rgba(255, 255, 255, 0.5);
  
  --border-color: rgba(255, 255, 255, 0.15);
  --border-hover: rgba(255, 255, 255, 0.4);
  
  --shadow-sm: 0 5px 15px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.4);
  
  --whatsapp-color: #25D366;
  --success-color: #22c55e;
  --error-color: #ef4444;
  --warning-color: #f59e0b;
}



/* ============================================
   APLICAÇÃO DAS CORES
   ============================================ */

/* Backgrounds */
body {
  background: var(--bg-primary);
  color: var(--text-primary);
}

/* Gradientes de texto */
.logo-text,
.hero-section h1,
.stat-value {
  background: var(--gradient-main);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Links com sublinhado */
.nav-links a::after {
  background: var(--gradient-main);
}

/* Botões */
.btn-contact,
.btn-buy,
.btn-cta,
.btn-submit,
.btn-primary {
  background: var(--gradient-main);
  box-shadow: var(--shadow-md);
}

.btn-contact:hover,
.btn-buy:hover,
.btn-cta:hover,
.btn-submit:hover {
  box-shadow: var(--shadow-lg);
}

/* Cards */
.project-card,
.testimonial-card,
.faq-item,
.contact-card,
.app-card {
  background: var(--bg-card);
  border-color: var(--border-color);
}

.project-card:hover,
.testimonial-card:hover,
.contact-card:hover,
.app-card:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow-lg);
}

/* Inputs */
input:focus,
textarea:focus,
select:focus {
  border-color: var(--primary-color);
}

/* Badges e Tags */
.project-category,
.category-btn.active,
.app-badge {
  background: var(--gradient-main);
}

/* Ícones e destaques */
.faq-icon,
.app-category,
.info-item h3 {
  color: var(--primary-color);
}

/* Sombras em hover */
.stat-card:hover,
.info-item:hover {
  box-shadow: var(--shadow-sm);
}


/* ============================================
   UTILITÁRIOS
   ============================================ */

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