/* ================================================================
   ROCKETZONE - DARK MODE STYLES
   
   Estilos completos para o tema escuro
   Arquivo: assets/css/darkmode.css
   ================================================================ */

/* ================================================================
   CONFIGURAÇÃO BASE DARK MODE
   ================================================================ */
[data-theme="dark"] {
    /* Cores base */
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary: #334155;
    
    /* Superfícies */
    --surface-primary: #1e293b;
    --surface-secondary: #334155;
    --surface-hover: #475569;
    
    /* Textos */
    --text-primary: #f8fafc;
    --text-secondary: #cbd5e1;
    --text-tertiary: #94a3b8;
    
    /* Bordas */
    --border-primary: #334155;
    --border-secondary: #475569;
    --border-hover: #64748b;
    
    /* Cores funcionais */
    --success-dark: #059669;
    --warning-dark: #d97706;
    --error-dark: #dc2626;
    --info-dark: #2563eb;
}

/* ================================================================
   ELEMENTOS GLOBAIS
   ================================================================ */
[data-theme="dark"] body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color: var(--text-primary);
}

[data-theme="dark"] p {
    color: var(--text-secondary);
}

[data-theme="dark"] a {
    color: var(--primary-400);
}

[data-theme="dark"] a:hover {
    color: var(--primary-300);
}

/* ================================================================
   HEADER & NAVEGAÇÃO
   ================================================================ */
[data-theme="dark"] .header {
    background: rgba(15, 23, 42, 0.95);
    border-bottom-color: var(--border-primary);
}

[data-theme="dark"] .header.scrolled {
    background: rgba(15, 23, 42, 0.98);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .nav-link {
    color: var(--text-secondary);
}

[data-theme="dark"] .nav-link:hover,
[data-theme="dark"] .nav-link.active {
    color: var(--primary-400);
}

[data-theme="dark"] .nav-link::after {
    background: linear-gradient(90deg, var(--primary-400), var(--secondary-400));
}

[data-theme="dark"] .hamburger-line {
    background: var(--text-primary);
}

[data-theme="dark"] .navbar-nav {
    background: var(--bg-secondary);
    box-shadow: 2px 0 20px rgba(0, 0, 0, 0.5);
}

/* Logo adaptação */
[data-theme="dark"] .logo {
    filter: brightness(0) invert(1);
}

/* ================================================================
   HERO SECTION
   ================================================================ */
[data-theme="dark"] .hero {
    background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
}

[data-theme="dark"] .hero-badge {
    background: var(--surface-primary);
    border-color: var(--border-primary);
    color: var(--primary-400);
}

[data-theme="dark"] .hero-badge i {
    color: var(--warning-dark);
}

[data-theme="dark"] .hero-features li {
    color: var(--text-secondary);
}

[data-theme="dark"] .hero-features i {
    color: var(--success-dark);
}

[data-theme="dark"] .tech-item {
    background: var(--surface-primary);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    color: var(--primary-400);
}

[data-theme="dark"] .hero-rocket {
    color: var(--primary-400);
    filter: drop-shadow(0 0 20px rgba(96, 165, 250, 0.5));
}

[data-theme="dark"] .floating-shapes .shape {
    background: linear-gradient(135deg, var(--primary-900) 0%, var(--secondary-900) 100%);
    opacity: 0.05;
}

[data-theme="dark"] .grid-pattern {
    background-image: 
        linear-gradient(var(--border-primary) 1px, transparent 1px),
        linear-gradient(90deg, var(--border-primary) 1px, transparent 1px);
    opacity: 0.1;
}

/* ================================================================
   SEÇÕES DE CONTEÚDO
   ================================================================ */
[data-theme="dark"] .about {
    background: var(--bg-primary);
}

[data-theme="dark"] .services {
    background: var(--bg-secondary);
}

[data-theme="dark"] .differentials {
    background: var(--bg-primary);
}

[data-theme="dark"] .contact {
    background: var(--bg-secondary);
}

/* ================================================================
   CARDS E COMPONENTES
   ================================================================ */
/* Service Cards */
[data-theme="dark"] .service-card {
    background: var(--surface-primary);
    border-color: var(--border-primary);
}

[data-theme="dark"] .service-card:hover {
    background: var(--surface-secondary);
    border-color: var(--primary-400);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .service-card.featured {
    background: linear-gradient(135deg, var(--primary-700) 0%, var(--secondary-700) 100%);
    border-color: transparent;
}

[data-theme="dark"] .service-card.featured:hover {
    background: linear-gradient(135deg, var(--primary-600) 0%, var(--secondary-600) 100%);
}

[data-theme="dark"] .service-icon {
    background: var(--bg-secondary);
    color: var(--primary-400);
}

[data-theme="dark"] .service-card.featured .service-icon {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

[data-theme="dark"] .service-badge {
    background: var(--warning-dark);
}

/* MVV Cards */
[data-theme="dark"] .mvv-card {
    background: var(--surface-primary);
    border-color: var(--border-primary);
}

[data-theme="dark"] .mvv-card:hover {
    background: var(--surface-secondary);
    border-color: var(--primary-400);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .mvv-icon {
    background: linear-gradient(135deg, var(--primary-600) 0%, var(--secondary-600) 100%);
}

/* Stats */
[data-theme="dark"] .about-stats {
    background: linear-gradient(135deg, var(--primary-800) 0%, var(--secondary-800) 100%);
}

/* Differentials */
[data-theme="dark"] .differential-item {
    background: var(--surface-primary);
}

[data-theme="dark"] .differential-item:hover {
    background: var(--surface-secondary);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .differential-icon {
    background: linear-gradient(135deg, var(--primary-600) 0%, var(--secondary-600) 100%);
}

/* ================================================================
   FORMULÁRIOS
   ================================================================ */
[data-theme="dark"] .contact-form-wrapper {
    background: var(--surface-primary);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .form-control {
    background: var(--bg-secondary);
    border-color: var(--border-primary);
    color: var(--text-primary);
}

[data-theme="dark"] .form-control:focus {
    border-color: var(--primary-400);
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2);
}

[data-theme="dark"] .form-control::placeholder {
    color: var(--text-tertiary);
}

[data-theme="dark"] .form-group label {
    color: var(--text-secondary);
}

[data-theme="dark"] select.form-control option {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

/* Contact Methods */
[data-theme="dark"] .method-icon {
    background: linear-gradient(135deg, var(--primary-600) 0%, var(--secondary-600) 100%);
}

[data-theme="dark"] .method-info h4 {
    color: var(--text-primary);
}

[data-theme="dark"] .method-info p {
    color: var(--text-secondary);
}

/* Social Links */
[data-theme="dark"] .social-links a {
    background: var(--surface-primary);
    border-color: var(--primary-400);
    color: var(--primary-400);
}

[data-theme="dark"] .social-links a:hover {
    background: var(--primary-600);
    border-color: var(--primary-600);
    color: white;
}

/* ================================================================
   FOOTER
   ================================================================ */
[data-theme="dark"] .footer {
    background: var(--bg-secondary);
}

[data-theme="dark"] .footer-divider {
    background: var(--border-primary);
}

[data-theme="dark"] .footer-links a {
    color: var(--text-tertiary);
}

[data-theme="dark"] .footer-links a:hover {
    color: var(--primary-400);
}

[data-theme="dark"] .newsletter-input {
    background: var(--bg-primary);
    border-color: var(--border-primary);
    color: var(--text-primary);
}

[data-theme="dark"] .newsletter-input::placeholder {
    color: var(--text-tertiary);
}

[data-theme="dark"] .newsletter-btn {
    background: var(--primary-600);
}

[data-theme="dark"] .newsletter-btn:hover {
    background: var(--primary-500);
}

[data-theme="dark"] .footer-social a {
    background: var(--surface-primary);
    color: var(--text-tertiary);
}

[data-theme="dark"] .footer-social a:hover {
    background: var(--primary-600);
    color: white;
}

/* ================================================================
   ELEMENTOS FLUTUANTES
   ================================================================ */
[data-theme="dark"] .back-to-top {
    background: var(--primary-600);
    box-shadow: 0 4px 20px rgba(96, 165, 250, 0.3);
}

[data-theme="dark"] .back-to-top:hover {
    background: var(--primary-500);
}

/* WhatsApp mantém cor padrão */
[data-theme="dark"] .whatsapp-float {
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.3);
}

/* ================================================================
   ANIMAÇÕES DARK MODE
   ================================================================ */
[data-theme="dark"] .btn-primary::before {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
}

[data-theme="dark"] @keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(96, 165, 250, 0.7);
    }
    70% {
        box-shadow: 0 0 0 20px rgba(96, 165, 250, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(96, 165, 250, 0);
    }
}

/* ================================================================
   ESTADOS E FEEDBACK
   ================================================================ */
[data-theme="dark"] .form-status.success {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    border-color: rgba(16, 185, 129, 0.3);
}

[data-theme="dark"] .form-status.error {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.3);
}

[data-theme="dark"] .field-error {
    color: #ef4444;
}

[data-theme="dark"] .form-control.error {
    border-color: #ef4444;
}

/* ================================================================
   SCROLLBAR CUSTOMIZADA
   ================================================================ */
[data-theme="dark"] ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--surface-secondary);
    border-radius: 6px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--surface-hover);
}

/* Firefox */
[data-theme="dark"] {
    scrollbar-width: thin;
    scrollbar-color: var(--surface-secondary) var(--bg-secondary);
}

/* ================================================================
   AJUSTES FINAIS
   ================================================================ */
/* Gradientes ajustados para dark mode */
[data-theme="dark"] .gradient-text {
    background: linear-gradient(135deg, var(--primary-400) 0%, var(--secondary-400) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .section-title {
    background: linear-gradient(135deg, var(--primary-400) 0%, var(--secondary-400) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Sombras ajustadas */
[data-theme="dark"] {
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.6);
    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.7);
}

/* Transições suaves entre temas */
* {
    transition: background-color 0.3s ease, 
                color 0.3s ease, 
                border-color 0.3s ease,
                box-shadow 0.3s ease,
                filter 0.3s ease;
}