/* Theme System for VieGrand Landing Page */

:root {
    /* Light Theme Variables */
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-tertiary: #f1f5f9;
    --bg-glass: rgba(255, 255, 255, 0.15);
    --bg-glass-hover: rgba(255, 255, 255, 0.25);
    --bg-card: rgba(255, 255, 255, 0.9);
    --bg-gradient-start: #f8fafc;
    --bg-gradient-mid: #ffffff;
    --bg-gradient-end: #f1f5f9;

    /* Text Colors */
    --text-primary: #1a202c;
    --text-secondary: #4a5568;
    --text-muted: #718096;
    --text-white: #ffffff;
    --text-hero: #ffffff;

    /* Brand Colors */
    --brand-primary: #004aad;
    --brand-secondary: #0066ff;
    --brand-tertiary: #409cff;
    --brand-gradient: linear-gradient(135deg, #004aad 0%, #0066ff 100%);

    /* Border & Shadow */
    --border-color: rgba(0, 74, 173, 0.15);
    --border-light: rgba(255, 255, 255, 0.3);
    --shadow-light: 0 8px 32px rgba(0, 74, 173, 0.15);
    --shadow-medium: 0 16px 64px rgba(0, 74, 173, 0.12);
    --shadow-heavy: 0 24px 80px rgba(0, 74, 173, 0.18);

    /* Hero Background */
    --hero-bg: linear-gradient(135deg,
            rgba(0, 74, 173, 0.4) 0%,
            rgba(0, 102, 255, 0.3) 50%,
            rgba(64, 156, 255, 0.2) 100%);
    --hero-overlay: radial-gradient(circle at 20% 80%, rgba(0, 74, 173, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(0, 102, 255, 0.15) 0%, transparent 50%);

    /* Form Colors */
    --form-bg: #f8fafc;
    --form-border: rgba(0, 74, 173, 0.1);
    --form-focus-border: #004aad;
    --form-text: #1e293b;
    --form-placeholder: #94a3b8;
    --form-label: #64748b;
    --form-icon-bg: rgba(0, 74, 173, 0.08);
    --form-icon-color: #64748b;
    --form-focus-icon-bg: linear-gradient(135deg, #004aad 0%, #0066ff 100%);
    --form-focus-icon-color: #ffffff;
}

/* Dark Theme Variables */
[data-theme="dark"] {
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary: #334155;
    --bg-glass: rgba(15, 23, 42, 0.6);
    --bg-glass-hover: rgba(15, 23, 42, 0.8);
    --bg-card: rgba(30, 41, 59, 0.9);
    --bg-gradient-start: #0f172a;
    --bg-gradient-mid: #1e293b;
    --bg-gradient-end: #334155;

    /* Text Colors - Enhanced contrast */
    --text-primary: #f8fafc;
    --text-secondary: #e2e8f0;
    --text-muted: #cbd5e1;
    --text-white: #ffffff;
    --text-hero: #ffffff;

    /* Brand Colors - Brighter for better visibility */
    --brand-primary: #60a5fa;
    --brand-secondary: #93c5fd;
    --brand-tertiary: #dbeafe;
    --brand-gradient: linear-gradient(135deg, #60a5fa 0%, #93c5fd 100%);

    /* Border & Shadow */
    --border-color: rgba(96, 165, 250, 0.3);
    --border-light: rgba(248, 250, 252, 0.15);
    --shadow-light: 0 8px 32px rgba(0, 0, 0, 0.4);
    --shadow-medium: 0 16px 64px rgba(0, 0, 0, 0.5);
    --shadow-heavy: 0 24px 80px rgba(0, 0, 0, 0.6);

    /* Hero Background */
    --hero-bg: linear-gradient(135deg,
            rgba(15, 23, 42, 0.8) 0%,
            rgba(30, 41, 59, 0.7) 50%,
            rgba(51, 65, 85, 0.6) 100%);
    --hero-overlay: radial-gradient(circle at 20% 80%, rgba(96, 165, 250, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(147, 197, 253, 0.15) 0%, transparent 50%);

    /* Form Colors - Dark mode optimized */
    --form-bg: #1e293b;
    --form-border: rgba(96, 165, 250, 0.2);
    --form-focus-border: #60a5fa;
    --form-text: #f8fafc;
    --form-placeholder: #94a3b8;
    --form-label: #cbd5e1;
    --form-icon-bg: rgba(96, 165, 250, 0.15);
    --form-icon-color: #94a3b8;
    --form-focus-icon-bg: linear-gradient(135deg, #60a5fa 0%, #93c5fd 100%);
    --form-focus-icon-color: #ffffff;
}

/* Theme Toggle Button Styles */
.theme-toggle {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--bg-glass);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-light);
    border-radius: 50px;
    padding: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-left: 15px;
}

.theme-toggle:hover {
    background: var(--bg-glass-hover);
    /* transform: scale(1.05); */
}

.theme-option {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    transition: all 0.3s ease;
    position: relative;
    font-size: 16px;
    color: var(--text-muted);
}

.theme-option i {
    font-size: 16px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

.theme-option.active {
    background: var(--brand-gradient);
    color: white;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.theme-option.active i {
    color: white;
    transform: scale(1.1);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.theme-option:not(.active):hover {
    background: var(--bg-glass);
    color: var(--text-secondary);
}

.theme-option:not(.active):hover i {
    color: var(--text-secondary);
    transform: scale(1.05);
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.15));
}

/* Smooth transitions for theme changes */
* {
    transition: background-color 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease !important;
}

/* Apply theme variables to existing elements */
body {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

/* Hero section theming */
.hero-section {
    background: var(--hero-bg), url('../../../assets/hero.png') !important;
}

.hero-section::before {
    background: var(--hero-overlay) !important;
}

/* Header theming */
.header-container {
    background: var(--bg-glass) !important;
    border-color: var(--border-light) !important;
    box-shadow: var(--shadow-light) !important;
}

.header-container:hover {
    background: var(--bg-glass-hover) !important;
    box-shadow: var(--shadow-heavy) !important;
}

/* Navigation links */
.nav-menu a {
    color: var(--text-primary) !important;
    background: var(--bg-glass) !important;
}

.nav-menu a:hover {
    background: var(--brand-gradient) !important;
    color: var(--text-white) !important;
}

/* Section backgrounds */
.about-section,
.features-section {
    background: linear-gradient(135deg,
            var(--bg-gradient-start) 0%,
            var(--bg-gradient-mid) 50%,
            var(--bg-gradient-end) 100%) !important;
}

/* Card backgrounds */
.feature-card,
.story-card,
.value-card {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
    box-shadow: var(--shadow-light) !important;
}

/* Text colors */
.section-title {
    color: var(--brand-primary) !important;
}

.section-subtitle,
.feature-description,
.story-text {
    color: var(--text-secondary) !important;
}

/* Button theming */
.hero-button-primary {
    background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%) !important;
    color: var(--brand-primary) !important;
    
}

.transition-time{
    transition: all 0.3s ease !important;
}


.hero-button-secondary {
    background: var(--bg-glass) !important;
    border-color: var(--border-light) !important;
    color: var(--text-white) !important;

}

.hero-button-secondary:hover {
    background: var(--bg-glass-hover) !important;
}

/* Language toggle theming */
.language-toggle {
    background: var(--bg-glass) !important;
    border-color: var(--border-light) !important;
    color: var(--text-primary) !important;
}

.language-toggle:hover {
    background: var(--bg-glass-hover) !important;
}

/* Loading animation for theme transitions */
.theme-transition {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Ensure proper contrast for readability */
[data-theme="dark"] .hero-title {
    background: linear-gradient(135deg, #ffffff 0%, #e2e8f0 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

[data-theme="dark"] .hero-subtitle {
    color: rgba(248, 250, 252, 0.9) !important;
}

/* Special handling for icons and images in dark mode */
[data-theme="dark"] .logo {
    filter: brightness(1.1) contrast(1.1) !important;
    content: url("../../../assets/logo_header_dark.png") !important;
}

/* Ensure logo maintains proper dimensions in dark mode */
[data-theme="dark"] .logo {
    height: 65px !important;
    width: auto !important;
}

/* Contact Form Dark Mode Styling */
[data-theme="dark"] .input-wrapper {
    background: var(--form-bg) !important;
    border-color: var(--form-border) !important;
}

[data-theme="dark"] .input-wrapper:focus-within {
    border-color: var(--form-focus-border) !important;
    background: var(--bg-card) !important;
}

[data-theme="dark"] .form-group input,
[data-theme="dark"] .form-group textarea {
    color: var(--form-text) !important;
}

[data-theme="dark"] .form-group input::placeholder,
[data-theme="dark"] .form-group textarea::placeholder {
    color: var(--form-placeholder) !important;
}

[data-theme="dark"] .floating-label {
    color: var(--form-label) !important;
}

[data-theme="dark"] .input-icon {
    color: var(--form-icon-color) !important;
}

[data-theme="dark"] .input-icon-container {
    background: var(--form-icon-bg) !important;
}

[data-theme="dark"] .input-wrapper:focus-within .input-icon-container {
    background: var(--form-focus-icon-bg) !important;
}

[data-theme="dark"] .input-wrapper:focus-within .input-icon {
    color: var(--form-focus-icon-color) !important;
}

[data-theme="dark"] .form-group input:focus + .floating-label,
[data-theme="dark"] .form-group input:not(:placeholder-shown) + .floating-label,
[data-theme="dark"] .form-group textarea:focus + .floating-label,
[data-theme="dark"] .form-group textarea:not(:placeholder-shown) + .floating-label {
    color: var(--form-focus-border) !important;
    background: var(--bg-card) !important;
}

/* Contact section dark mode */
[data-theme="dark"] .contact-section {
    background: linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-mid) 50%, var(--bg-gradient-end) 100%) !important;
}

[data-theme="dark"] .contact-info {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .contact-form {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .contact-form h3 {
    color: var(--brand-primary) !important;
}

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

/* Pricing section dark mode */
[data-theme="dark"] .pricing-section {
    background: linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-mid) 50%, var(--bg-gradient-end) 100%) !important;
}

[data-theme="dark"] .pricing-card {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .pricing-card.featured {
    border-color: var(--brand-primary) !important;
}

/* Features section dark mode */
[data-theme="dark"] .features-section {
    background: linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-mid) 50%, var(--bg-gradient-end) 100%) !important;
}

[data-theme="dark"] .feature-card {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

/* About section dark mode */
[data-theme="dark"] .about-section {
    background: linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-mid) 50%, var(--bg-gradient-end) 100%) !important;
}

[data-theme="dark"] .story-card,
[data-theme="dark"] .value-card {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

/* Additional dark mode improvements for better contrast */
[data-theme="dark"] .story-text {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .story-highlight {
    background: var(--form-icon-bg) !important;
    border-left-color: var(--brand-primary) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .mission-card,
[data-theme="dark"] .vision-card {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .mission-card h3,
[data-theme="dark"] .vision-card h3 {
    color: var(--brand-primary) !important;
}

[data-theme="dark"] .mission-card i,
[data-theme="dark"] .vision-card i {
    color: var(--brand-secondary) !important;
}

[data-theme="dark"] .mission-card p,
[data-theme="dark"] .vision-card p {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .tech-card {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .tech-card h3,
[data-theme="dark"] .tech-card h4 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .tech-card p {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .feature-tag {
    background: var(--form-icon-bg) !important;
    color: var(--brand-primary) !important;
    border-color: var(--form-border) !important;
}

[data-theme="dark"] .plan-price {
    background: var(--form-icon-bg) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .plan-price .price-amount {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .plan-price .price-period {
    color: var(--text-secondary) !important;
}

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

[data-theme="dark"] .plan-features li::before {
    color: var(--brand-primary) !important;
}

[data-theme="dark"] .cta-button {
    background: var(--brand-gradient) !important;
    color: white !important;
}

[data-theme="dark"] .contact-item {
    background: var(--form-icon-bg) !important;
}

[data-theme="dark"] .contact-item:hover {
    background: var(--form-focus-icon-bg) !important;
}

[data-theme="dark"] .contact-details h4 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .contact-details p {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .contact-item i {
    background: var(--brand-gradient) !important;
    color: white !important;
}

/* Ensure all text elements have proper contrast in dark mode */
[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) !important;
}

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

[data-theme="dark"] span {
    color: inherit !important;
}

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

[data-theme="dark"] a:hover {
    color: var(--brand-secondary) !important;
}

/* Ensure form elements have proper contrast */
[data-theme="dark"] input, [data-theme="dark"] textarea, [data-theme="dark"] select {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] input:focus, [data-theme="dark"] textarea:focus, [data-theme="dark"] select:focus {
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1) !important;
}

/* Ensure buttons have proper contrast */
[data-theme="dark"] button {
    color: var(--text-primary) !important;
}

[data-theme="dark"] button:not(.auth-btn):not(.hero-button-primary):not(.hero-button-secondary):not(.submit-btn) {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] button:hover:not(.auth-btn):not(.hero-button-primary):not(.hero-button-secondary):not(.submit-btn) {
    background: var(--bg-glass-hover) !important;
    border-color: var(--brand-primary) !important;
}

/* Scrollbar theming */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--brand-primary);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--brand-secondary);
}

/* Enhanced CTA Section Dark Mode Improvements */
[data-theme="dark"] .enhanced-cta-section {
    background: linear-gradient(135deg, #0b1220 0%, #0f172a 50%, #1e293b 100%) !important;
}

[data-theme="dark"] .enhanced-cta-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, 
        rgba(15, 23, 42, 0.8) 0%, 
        rgba(30, 41, 59, 0.6) 50%, 
        rgba(51, 65, 85, 0.4) 100%);
    z-index: 1;
}

[data-theme="dark"] .enhanced-cta-section > div {
    position: relative;
    z-index: 2;
}

/* Dark mode for CTA benefit cards */
[data-theme="dark"] .enhanced-cta-section div[style*="background: rgba(255,255,255,0.15)"] {
    background: rgba(11, 18, 32, 0.6) !important;
    border: 1px solid rgba(59, 130, 246, 0.25) !important;
    backdrop-filter: blur(16px) !important;
}

/* Dark mode for emergency contact box */
[data-theme="dark"] .enhanced-cta-section div[style*="background: rgba(255, 255, 255, 0.1)"] {
    background: rgba(11, 18, 32, 0.72) !important;
    border: 1px solid rgba(59, 130, 246, 0.35) !important;
}

/* Dark mode for primary CTA button */
[data-theme="dark"] .enhanced-cta-section a[style*="background: white"] {
    background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 60%, #93c5fd 100%) !important;
    color: white !important;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.55) !important;
}

/* Dark mode for secondary CTA button */
[data-theme="dark"] .enhanced-cta-section a[style*="background: rgba(255,255,255,0.1)"] {
    background: rgba(11, 18, 32, 0.5) !important;
    border: 2px solid rgba(59, 130, 246, 0.45) !important;
    backdrop-filter: blur(15px) !important;
}

/* Enhance text contrast in dark mode */
[data-theme="dark"] .enhanced-cta-section h2 {
    color: #f8fafc !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
}

[data-theme="dark"] .enhanced-cta-section p {
    color: rgba(248, 250, 252, 0.9) !important;
}

[data-theme="dark"] .enhanced-cta-section h3 {
    color: #f8fafc !important;
}

/* Background decorative elements for dark mode */
[data-theme="dark"] .enhanced-cta-section div[style*="radial-gradient(circle, rgba(255,255,255,0.1)"] {
    background: radial-gradient(circle, rgba(96, 165, 250, 0.1) 0%, transparent 70%) !important;
}

[data-theme="dark"] .enhanced-cta-section div[style*="radial-gradient(circle, rgba(255,255,255,0.08)"] {
    background: radial-gradient(circle, rgba(147, 197, 253, 0.08) 0%, transparent 70%) !important;
}

/* Back to Top Button Styles */
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: var(--brand-gradient);
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-medium);
    opacity: 0;
    visibility: hidden;
    transform: translateY(100px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 9999;
    backdrop-filter: blur(10px);
}

.back-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: var(--shadow-heavy);
}

.back-to-top:focus {
    outline: none;
    box-shadow: var(--shadow-heavy), 0 0 0 3px rgba(59, 130, 246, 0.3);
}

.back-to-top:active {
    transform: translateY(-1px) scale(0.98);
}

/* Dark mode styling for back to top button */
[data-theme="dark"] .back-to-top {
    background: var(--brand-gradient);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .back-to-top:hover {
    box-shadow: 0 16px 64px rgba(0, 0, 0, 0.5);
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .back-to-top {
        bottom: 20px;
        right: 20px;
        width: 45px;
        height: 45px;
        font-size: 16px;
    }
}

/* Ensure button is always visible and properly positioned */
@media (max-width: 480px) {
    .back-to-top {
        bottom: 15px;
        right: 15px;
        width: 42px;
        height: 42px;
        font-size: 14px;
    }
}

/* Dark mode prominence for navigation and signup button */
[data-theme="dark"] .nav-menu a {
  background: rgba(96, 165, 250, 0.14) !important; /* lighter glass */
  color: #f0f6ff !important; /* brighter text */
  border: 1px solid rgba(147, 197, 253, 0.45) !important;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

[data-theme="dark"] .nav-menu a:hover {
  background: linear-gradient(135deg, #60a5fa 0%, #93c5fd 50%, #dbeafe 100%) !important;
  color: #ffffff !important;
  border: 1px solid transparent !important; /* no visible border on hover */
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5), 0 6px 18px rgba(147, 197, 253, 0.45) !important;
}

[data-theme="dark"] .auth-btn.signup-btn {
  background: linear-gradient(135deg, #60a5fa 0%, #93c5fd 50%, #dbeafe 100%) !important;
  color: #0b1220 !important;
  border: 1px solid rgba(219, 234, 254, 0.9) !important;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.5), 0 8px 22px rgba(96, 165, 250, 0.35) !important;
}

[data-theme="dark"] .auth-btn.signup-btn:hover {
  filter: brightness(1.05);
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55), 0 10px 26px rgba(147, 197, 253, 0.5) !important;
}

/* Theme toggle dark mode improvements */
[data-theme="dark"] .theme-option i {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

[data-theme="dark"] .theme-option.active i {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

[data-theme="dark"] .theme-option:not(.active):hover i {
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.3));
}

/* Accessible focus outlines in dark mode */
[data-theme="dark"] .nav-menu a:focus-visible,
[data-theme="dark"] .auth-btn.signup-btn:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.55), 0 0 0 6px rgba(96, 165, 250, 0.25) !important;
}