/* Theme Styles */

/* Light Theme (Default) */
[data-theme="light"] {
    --primary-color: #4F46E5;
    --secondary-color: #10B981;
    --accent-color: #F59E0B;
    --text-color: #1F2937;
    --text-light: #6B7280;
    --bg-color: #FFFFFF;
    --bg-light: #F9FAFB;
    --border-color: #E5E7EB;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.15);
}

/* Dark Theme */
[data-theme="dark"] {
    --primary-color: #9B5FBF;
    --primary-dark: #7B3F9F;
    --primary-light: #B87FDF;
    --secondary-color: #FFA033;
    --secondary-dark: #FF8C00;
    --secondary-light: #FFB366;
    --text-color: #F9FAFB;
    --text-light: #D1D5DB;
    --bg-color: #0F172A;
    --bg-light: #1E293B;
    --border-color: #334155;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .stars-bg {
    background: linear-gradient(135deg, #1e3a8a 0%, #312e81 100%);
}

[data-theme="dark"] .feature-card,
[data-theme="dark"] .service-card,
[data-theme="dark"] .blog-card {
    background: var(--bg-light);
    border-color: var(--border-color);
}

[data-theme="dark"] .feature-card:hover,
[data-theme="dark"] .service-card:hover,
[data-theme="dark"] .blog-card:hover {
    border-color: var(--secondary-color);
}

[data-theme="dark"] .footer {
    background: var(--bg-light);
    border-top: 1px solid var(--border-color);
}

[data-theme="dark"] .btn-outline {
    border-color: var(--secondary-color);
    color: var(--secondary-color);
}

[data-theme="dark"] .btn-outline:hover {
    background: var(--secondary-color);
    color: var(--bg-color);
}

[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background: var(--bg-light);
    border-color: var(--border-color);
    color: var(--text-color);
}

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

[data-theme="dark"] .nav-menu {
    background: var(--bg-light);
}

/* Theme transition */
body,
.navbar,
.feature-card,
.service-card,
.blog-card,
input,
textarea,
select,
button {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Theme Toggle Functionality */

/* Light Theme (Default) - Using Logo Colors */
[data-theme="light"] {
    --primary-color: #7B3F9F;
    --primary-dark: #5E2D7A;
    --primary-light: #9B5FBF;
    --secondary-color: #FF8C00;
    --secondary-dark: #E67E00;
    --secondary-light: #FFA033;
    --text-color: #1F2937;
    --text-light: #6B7280;
    --bg-color: #FFFFFF;
    --bg-light: #F9FAFB;
    --border-color: #E5E7EB;
    --shadow: 0 1px 3px rgba(123, 63, 159, 0.1);
    --shadow-lg: 0 10px 25px rgba(123, 63, 159, 0.15);
}

/* Dark Theme - Using Logo Colors */
[data-theme="dark"] {
    --primary-color: #9B5FBF;
    --primary-dark: #7B3F9F;
    --primary-light: #B87FDF;
    --secondary-color: #FFA033;
    --secondary-dark: #FF8C00;
    --secondary-light: #FFB366;
    --text-color: #F9FAFB;
    --text-light: #D1D5DB;
    --bg-color: #0F172A;
    --bg-light: #1E293B;
    --border-color: #334155;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.5);
}

/* Dark theme specific styles */
[data-theme="dark"] body {
    background-color: var(--bg-color);
    color: var(--text-color);
}

[data-theme="dark"] #main-header {
    background: var(--bg-light);
    border-bottom: 1px solid var(--border-color);
}

[data-theme="dark"] .hero,
[data-theme="dark"] .cta-section .stars-bg {
    background: linear-gradient(135deg, #7B3F9F 0%, #1E293B 50%, #FF8C00 100%);
}

[data-theme="dark"] .feature-card,
[data-theme="dark"] .service-card,
[data-theme="dark"] .blog-card {
    background: var(--bg-light);
    border-color: var(--border-color);
}

[data-theme="dark"] .feature-card:hover,
[data-theme="dark"] .service-card:hover,
[data-theme="dark"] .blog-card:hover {
    border-color: var(--secondary-color);
}

[data-theme="dark"] .footer {
    background: var(--bg-light);
    border-top: 1px solid var(--border-color);
}

[data-theme="dark"] .btn-outline {
    border-color: var(--secondary-color);
    color: var(--secondary-color);
}

[data-theme="dark"] .btn-outline:hover {
    background: var(--secondary-color);
    color: var(--bg-color);
}

[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background: var(--bg-light);
    border-color: var(--border-color);
    color: var(--text-color);
}

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

[data-theme="dark"] .nav-menu {
    background: var(--bg-light);
}

/* Theme toggle icon animation */
.theme-toggle {
    position: relative;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.theme-toggle:hover {
    transform: rotate(20deg) scale(1.1);
}

[data-theme="dark"] .theme-icon::before {
    content: "\f185";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

/* Smooth transition for theme changes */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Preserve immediate transitions for interactive elements */
button,
a,
input,
.btn {
    transition: all 0.2s ease !important;
}

/* Logo filter for dark theme */
[data-theme="dark"] .logo-img {
    filter: brightness(1.2);
}

[data-theme="dark"] .footer-logo {
    filter: brightness(1.2);
}

/* Gradient backgrounds in dark theme - Logo Colors */
[data-theme="dark"] .stats-section {
    background: linear-gradient(135deg, #7B3F9F 0%, #FF8C00 100%);
}

[data-theme="dark"] .services-cta {
    background: linear-gradient(135deg, #7B3F9F 0%, #FF8C00 100%);
}

[data-theme="dark"] .newsletter-section {
    background: linear-gradient(135deg, #7B3F9F 0%, #FF8C00 100%);
}

[data-theme="dark"] .faq-cta {
    background: linear-gradient(135deg, #7B3F9F 0%, #FF8C00 100%);
}

/* Page hero in dark theme */
[data-theme="dark"] .page-hero {
    background: linear-gradient(135deg, #7B3F9F 0%, #FF8C00 100%);
}

/* Preserve button gradients with logo colors */
[data-theme="dark"] .btn-primary {
    background: linear-gradient(135deg, #FFA033, #FF8C00);
}

[data-theme="dark"] .btn-primary:hover {
    background: linear-gradient(135deg, #FF8C00, #FFA033);
}

/* Social links gradient with logo colors */
[data-theme="dark"] .social-links a {
    background: linear-gradient(135deg, #FFA033, #9B5FBF);
}

[data-theme="dark"] .social-links a:hover {
    background: linear-gradient(135deg, #9B5FBF, #FFA033);
}

/* User avatar gradient */
[data-theme="dark"] .user-avatar-placeholder {
    background: linear-gradient(135deg, #FFA033, #9B5FBF);
}

/* Code blocks in dark theme */
[data-theme="dark"] code,
[data-theme="dark"] pre {
    background: var(--bg-color);
    border-color: var(--border-color);
}

/* Tables in dark theme */
[data-theme="dark"] table {
    border-color: var(--border-color);
}

[data-theme="dark"] th {
    background: var(--bg-light);
    border-color: var(--border-color);
}

[data-theme="dark"] td {
    border-color: var(--border-color);
}

/* Modal in dark theme */
[data-theme="dark"] .modal {
    background: rgba(0, 0, 0, 0.8);
}

[data-theme="dark"] .modal-content {
    background: var(--bg-light);
}

/* Toast notifications in dark theme */
[data-theme="dark"] .toast {
    background: var(--bg-light);
    border-color: var(--border-color);
}

/* Loading spinner in dark theme with logo color */
[data-theme="dark"] .spinner {
    border-color: var(--border-color);
    border-top-color: var(--secondary-color);
}

/* Preserve link colors */
[data-theme="dark"] a:hover {
    color: var(--secondary-color);
}

/* Form focus states in dark theme with logo color */
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 3px rgba(255, 140, 0, 0.1);
}

/* Category buttons in dark theme with logo colors */
[data-theme="dark"] .category-btn,
[data-theme="dark"] .faq-cat-btn {
    background: var(--bg-light);
    border-color: var(--border-color);
}

[data-theme="dark"] .category-btn:hover,
[data-theme="dark"] .category-btn.active,
[data-theme="dark"] .faq-cat-btn:hover,
[data-theme="dark"] .faq-cat-btn.active {
    background: linear-gradient(135deg, #FFA033, #9B5FBF);
    border-color: var(--secondary-color);
}

/* Step icons with logo colors in dark theme */
[data-theme="dark"] .step-icon {
    background: rgba(255, 160, 51, 0.1);
    color: var(--secondary-color);
}

[data-theme="dark"] .step-number {
    background: var(--secondary-color);
}

/* Feature icons with logo color */
[data-theme="dark"] .feature-icon,
[data-theme="dark"] .service-icon {
    color: var(--secondary-color);
}

/* Navigation active state with logo color */
[data-theme="dark"] .nav-list a:hover,
[data-theme="dark"] .nav-list a.active {
    color: var(--secondary-color);
}

[data-theme="dark"] .nav-list a::after {
    background: var(--secondary-color);
}