/* ===== LIGHT MODE STYLES ===== */

/* Light Mode Variables */
:root[data-theme="light"] {
    /* Light Mode Background Colors */
    --primary-color: #0ea5e9;
    --primary-dark: #0284c7;
    --secondary-color: #1e293b;
    --accent-color: #06b6d4;
    --success-color: #10b981;
    --text-primary: #1e293b;
    --text-secondary: #475569;
    --text-light: #64748b;
    --background-light: #f1f5ff;
    --background-white: #fafbff;
    --border-color: #e2e8f0;
    
    /* Enterprise-Grade Colors - Light Mode */
    --enterprise-navy: #1e293b;
    --enterprise-silver: #64748b;
    --enterprise-platinum: #f8fafc;
    
    /* Light Mode Shadows */
    --shadow-light: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-medium: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-large: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-enterprise: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    
    /* Light mode gradients */
    --gradient-primary: linear-gradient(135deg, #0ea5e9 0%, #06b6d4 100%);
    --gradient-premium: linear-gradient(135deg, #fafbff 0%, #f1f5ff 50%, #e0e7ff 100%);
    --gradient-subtle: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    --gradient-card: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    
    /* Light mode glows */
    --glow-primary: 0 0 20px rgba(14, 165, 233, 0.15);
    --glow-accent: 0 0 20px rgba(6, 182, 212, 0.15);
    --glow-enterprise: 0 0 30px rgba(30, 41, 59, 0.1);
    
    /* Light Mode Specific Colors */
    --light-bg-primary: #fafbff;
    --light-bg-secondary: #f1f5ff;
    --light-bg-card: #ffffff;
    --light-text-primary: #1e293b;
    --light-text-secondary: #475569;
    --light-text-muted: #64748b;
    --light-text-subtle: #94a3b8;
    --light-accent-primary: #0ea5e9;
    --light-accent-primary-hover: #0284c7;
    --light-accent-primary-light: #e0f2fe;
    --light-accent-secondary: #06b6d4;
    --light-accent-secondary-hover: #0891b2;
    --light-accent-tertiary: #8b5cf6;
    --light-accent-tertiary-hover: #7c3aed;
    --light-border-subtle: #e2e8f0;
    --light-border-medium: #cbd5e1;
    --light-border-accent: #bae6fd;
    --light-divider: #f1f5f9;
    --light-hover-bg: #f8fafc;
    --light-hover-accent: #f0f9ff;
    --light-hover-border: #0ea5e9;
    --light-focus-ring: #0ea5e9;
    --light-focus-bg: #f0f9ff;
    --light-active-bg: #e0f2fe;
    --light-glow-primary: 0 0 20px rgba(14, 165, 233, 0.15);
    --light-glow-secondary: 0 0 20px rgba(6, 182, 212, 0.15);
    --light-glow-tertiary: 0 0 20px rgba(139, 92, 246, 0.15);
    
    /* Alert & Status Colors - Light Mode */
    --light-success: #10b981;
    --light-success-bg: #ecfdf5;
    --light-success-border: #a7f3d0;
    --light-warning: #f59e0b;
    --light-warning-bg: #fffbeb;
    --light-warning-border: #fde68a;
    --light-error: #ef4444;
    --light-error-bg: #fef2f2;
    --light-error-border: #fecaca;
    --light-info: #0ea5e9;
    --light-info-bg: #f0f9ff;
    --light-info-border: #bae6fd;
    
    /* Loading & Progress - Light Mode */
    --light-spinner-primary: #0ea5e9;
    --light-spinner-secondary: #cbd5e1;
    --light-progress-bg: #f1f5f9;
    --light-progress-fill: linear-gradient(90deg, #0ea5e9, #06b6d4);
}

/* Body light mode styles */
:root[data-theme="light"] body {
    background-color: var(--light-bg-primary);
    color: var(--light-text-primary);
}

/* Loading Screen Light Mode */
:root[data-theme="light"] .loading-screen {
    background: radial-gradient(ellipse at center, #f8fafc 0%, #f1f5ff 100%);
}

:root[data-theme="light"] .loading-logo {
    filter: brightness(1) invert(0);
}

:root[data-theme="light"] .loading-glow {
    background: radial-gradient(circle, rgba(14, 165, 233, 0.2) 0%, rgba(14, 165, 233, 0.1) 40%, transparent 70%);
}

:root[data-theme="light"] .particle {
    background: linear-gradient(45deg, #0ea5e9, #06b6d4);
    box-shadow: 0 0 10px rgba(14, 165, 233, 0.6);
}

/* Navigation light mode */
:root[data-theme="light"] .navbar {
    background: rgba(250, 251, 255, 0.95);
    border-bottom: 1px solid var(--light-border-subtle);
    box-shadow: var(--shadow-medium);
    backdrop-filter: blur(10px);
}

:root[data-theme="light"] .nav-brand h2 {
    color: var(--light-text-primary);
    text-shadow: none;
}

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

:root[data-theme="light"] .nav-link:hover,
:root[data-theme="light"] .nav-link.active {
    color: var(--light-accent-primary);
    background-color: var(--light-hover-accent);
    box-shadow: var(--light-glow-primary);
}

:root[data-theme="light"] .nav-link.active::after {
    background: var(--gradient-primary);
    box-shadow: var(--light-glow-primary);
}

:root[data-theme="light"] .nav-quiz-btn {
    background: var(--gradient-primary);
    border-color: var(--light-accent-primary);
    box-shadow: var(--light-glow-primary);
    color: white;
}

:root[data-theme="light"] .nav-quiz-btn:hover {
    background: linear-gradient(135deg, var(--light-accent-primary-hover) 0%, var(--light-accent-secondary-hover) 100%);
    box-shadow: var(--shadow-medium), var(--light-glow-primary);
}

/* Dark mode mobile navigation */
:root[data-theme="light"] .nav-menu {
    background: var(--light-bg-primary);
    border-top: 1px solid var(--light-border-subtle);
    box-shadow: var(--shadow-large);
}

:root[data-theme="light"] .nav-toggle span {
    background-color: var(--light-text-primary);
}

/* Hero section light mode */
:root[data-theme="light"] .hero {
    background: var(--gradient-premium);
}

:root[data-theme="light"] .hero::before {
    background: radial-gradient(ellipse at top, rgba(14, 165, 233, 0.1) 0%, transparent 50%);
}

:root[data-theme="light"] .hero-title {
    color: var(--light-text-primary);
    text-shadow: none;
}

:root[data-theme="light"] .hero-subtitle {
    color: var(--light-text-secondary);
}

:root[data-theme="light"] .hero-guarantee {
    background: var(--light-success-bg);
    border-color: var(--light-success-border);
}

:root[data-theme="light"] .hero-guarantee .guarantee-text {
    color: var(--light-success);
}

/* AI Graphics light mode enhancements */
:root[data-theme="light"] .node {
    background: var(--gradient-primary);
    box-shadow: var(--shadow-medium), var(--light-glow-primary);
}

:root[data-theme="light"] .node:hover {
    box-shadow: var(--shadow-large), var(--light-glow-secondary);
}

:root[data-theme="light"] .floating-shape {
    background: var(--gradient-primary);
    box-shadow: var(--light-glow-primary);
}

:root[data-theme="light"] .connection-line {
    filter: drop-shadow(0 0 3px rgba(14, 165, 233, 0.4));
}

/* Buttons light mode */
:root[data-theme="light"] .btn-primary {
    background: var(--gradient-primary);
    border-color: var(--light-accent-primary);
    box-shadow: var(--shadow-sm), var(--light-glow-primary);
    color: white;
}

:root[data-theme="light"] .btn-primary:hover {
    background: linear-gradient(135deg, var(--light-accent-primary-hover) 0%, var(--light-accent-secondary-hover) 100%);
    box-shadow: var(--shadow-medium), var(--light-glow-primary);
    transform: translateY(-1px);
}

:root[data-theme="light"] .btn-secondary {
    color: var(--light-accent-primary);
    border-color: var(--light-border-accent);
    background: transparent;
}

:root[data-theme="light"] .btn-secondary:hover {
    background: var(--light-hover-accent);
    color: var(--light-accent-primary);
    border-color: var(--light-accent-primary);
    box-shadow: var(--light-glow-primary);
}

:root[data-theme="light"] .btn-outline {
    color: var(--light-text-secondary);
    border-color: var(--light-border-medium);
    background: transparent;
}

:root[data-theme="light"] .btn-outline:hover {
    background: var(--light-hover-bg);
    border-color: var(--light-accent-primary);
    color: var(--light-accent-primary);
    box-shadow: var(--shadow-light);
}

:root[data-theme="light"] .btn-enterprise {
    background: var(--gradient-premium);
    color: var(--light-text-primary);
    border-color: var(--light-border-medium);
}

:root[data-theme="light"] .btn-enterprise:hover {
    background: var(--gradient-primary);
    color: white;
    transform: translateY(-1px);
    box-shadow: var(--shadow-enterprise), var(--light-glow-primary);
}

/* Sections light mode */
:root[data-theme="light"] .specializations {
    background: var(--light-bg-secondary);
}

:root[data-theme="light"] .specializations::before {
    background: linear-gradient(45deg, transparent 30%, rgba(14, 165, 233, 0.05) 50%, transparent 70%);
}

:root[data-theme="light"] .specialization-card {
    background: var(--light-bg-card);
    border-color: var(--light-border-subtle);
    box-shadow: var(--shadow-light);
}

:root[data-theme="light"] .specialization-card:hover {
    background: var(--light-bg-card);
    box-shadow: var(--shadow-large), var(--light-glow-primary);
    border-color: var(--light-border-accent);
}

:root[data-theme="light"] .specialization-card h4 {
    color: var(--light-text-primary);
}

:root[data-theme="light"] .card-description p {
    color: var(--light-text-secondary);
}

:root[data-theme="light"] .column-header h3 {
    color: var(--light-text-primary);
}

:root[data-theme="light"] .column-subtitle {
    color: var(--light-text-secondary);
}

:root[data-theme="light"] .column-header {
    border-bottom-color: var(--light-accent-primary);
}

:root[data-theme="light"] .column-header::after {
    background: var(--gradient-primary);
}

/* Services section light mode */
:root[data-theme="light"] .services-preview {
    background-color: var(--light-bg-primary);
}

:root[data-theme="light"] .service-card {
    background: var(--light-bg-card);
    border-color: var(--light-border-subtle);
    box-shadow: var(--shadow-light);
}

:root[data-theme="light"] .service-card:hover {
    box-shadow: var(--shadow-large), var(--light-glow-primary);
    transform: translateY(-5px);
    border-color: var(--light-border-accent);
}

:root[data-theme="light"] .service-card.featured {
    border-color: var(--light-accent-tertiary);
    box-shadow: var(--shadow-medium), var(--light-glow-tertiary);
}

:root[data-theme="light"] .service-header h3 {
    color: var(--light-text-primary);
}

:root[data-theme="light"] .service-price {
    color: var(--light-accent-primary);
    text-shadow: none;
}

:root[data-theme="light"] .service-duration {
    color: var(--light-text-muted);
}

:root[data-theme="light"] .service-description {
    color: var(--light-text-secondary);
}

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

:root[data-theme="light"] .service-features li::before {
    color: var(--light-accent-primary);
}

:root[data-theme="light"] .service-badge {
    background: var(--gradient-primary);
    color: white;
}

/* Value proposition and stats light mode */
:root[data-theme="light"] .value-proposition {
    background-color: var(--light-bg-secondary);
}

:root[data-theme="light"] .value-item {
    background: var(--light-bg-card);
    border-color: var(--light-border-subtle);
    box-shadow: var(--shadow-light);
}

:root[data-theme="light"] .value-item:hover {
    box-shadow: var(--shadow-large), var(--light-glow-primary);
    transform: translateY(-5px);
    border-color: var(--light-border-accent);
}

:root[data-theme="light"] .value-item h3 {
    color: var(--light-text-primary);
}

:root[data-theme="light"] .icon-badge {
    background: var(--gradient-primary);
    box-shadow: var(--light-glow-primary);
}

:root[data-theme="light"] .stat-item {
    background: var(--light-bg-card);
    border-color: var(--light-border-subtle);
    box-shadow: var(--shadow-light);
}

:root[data-theme="light"] .stat-item:hover {
    box-shadow: var(--shadow-large), var(--light-glow-primary);
    transform: translateY(-5px);
    border-color: var(--light-border-accent);
}

:root[data-theme="light"] .stat-number {
    color: var(--light-accent-primary);
    text-shadow: none;
}

:root[data-theme="light"] .stat-label {
    color: var(--light-text-secondary);
}

:root[data-theme="light"] .circle {
    stroke: var(--light-accent-primary);
    filter: drop-shadow(0 0 3px rgba(14, 165, 233, 0.3));
}

:root[data-theme="light"] .circle-bg {
    stroke: var(--light-border-medium);
}

/* Social proof light mode */
:root[data-theme="light"] .social-proof {
    background-color: var(--light-bg-primary);
}

:root[data-theme="light"] .client-logo {
    background: var(--light-bg-card);
    border-color: var(--light-border-subtle);
    box-shadow: var(--shadow-light);
}

:root[data-theme="light"] .testimonial blockquote {
    color: var(--light-text-primary);
}

:root[data-theme="light"] .testimonial-author strong {
    color: var(--light-text-primary);
}

:root[data-theme="light"] .testimonial-author span {
    color: var(--light-text-secondary);
}

/* About preview light mode */
:root[data-theme="light"] .about-preview {
    background-color: var(--light-bg-secondary);
}

:root[data-theme="light"] .about-text h2 {
    color: var(--light-text-primary);
}

:root[data-theme="light"] .about-text p {
    color: var(--light-text-secondary);
}

/* CTA section light mode */
:root[data-theme="light"] .cta-section {
    background: var(--gradient-premium);
}

:root[data-theme="light"] .cta-section::before {
    background: radial-gradient(ellipse at center, rgba(14, 165, 233, 0.1) 0%, transparent 70%);
}

:root[data-theme="light"] .cta-content h2 {
    color: var(--light-text-primary);
    text-shadow: none;
}

:root[data-theme="light"] .cta-content p {
    color: var(--light-text-secondary);
}

:root[data-theme="light"] .cta-section .btn-primary {
    background: var(--gradient-primary);
    border-color: var(--light-accent-primary);
    box-shadow: var(--shadow-medium), var(--light-glow-primary);
}

:root[data-theme="light"] .cta-section .btn-primary:hover {
    background: linear-gradient(135deg, var(--light-accent-primary-hover) 0%, var(--light-accent-secondary-hover) 100%);
    box-shadow: var(--shadow-enterprise), var(--light-glow-primary);
}

/* Footer light mode */
:root[data-theme="light"] .footer {
    background: linear-gradient(180deg, var(--light-bg-secondary) 0%, var(--light-bg-primary) 100%);
}

:root[data-theme="light"] .footer::before {
    background: linear-gradient(90deg, transparent, var(--light-accent-primary), transparent);
    opacity: 0.3;
}

:root[data-theme="light"] .footer-section h3,
:root[data-theme="light"] .footer-section h4 {
    color: var(--light-text-primary);
}

:root[data-theme="light"] .footer-section p,
:root[data-theme="light"] .footer-contact p {
    color: var(--light-text-secondary);
}

:root[data-theme="light"] .footer-section ul li a {
    color: var(--light-text-secondary);
}

:root[data-theme="light"] .footer-section ul li a:hover {
    color: var(--light-accent-primary);
}

:root[data-theme="light"] .social-link {
    color: var(--light-text-secondary);
}

:root[data-theme="light"] .social-link:hover {
    color: var(--light-accent-primary);
}

:root[data-theme="light"] .footer-bottom p {
    color: var(--light-text-muted);
}

/* Scroll progress light mode */
:root[data-theme="light"] .scroll-progress {
    background: var(--gradient-primary);
    box-shadow: var(--light-glow-primary);
}

/* Custom cursor light mode */
:root[data-theme="light"] .custom-cursor {
    background: #000000;
    box-shadow: var(--light-glow-primary);
}

:root[data-theme="light"] .custom-cursor.hover {
    background: #000000;
    box-shadow: var(--light-glow-secondary);
}

/* Section headers light mode */
:root[data-theme="light"] .section-header h2 {
    color: var(--light-text-primary);
}

:root[data-theme="light"] .section-header p {
    color: var(--light-text-secondary);
}

/* Light mode particles and effects */
:root[data-theme="light"] .stat-particles .particle {
    background: var(--light-accent-tertiary);
    box-shadow: var(--light-glow-tertiary);
}

/* Enhanced effects for light mode */
:root[data-theme="light"] .service-card::after {
    background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(14, 165, 233, 0.1) 0%, transparent 50%);
}

:root[data-theme="light"] .specialization-card::before {
    background: linear-gradient(90deg, transparent, rgba(14, 165, 233, 0.1), transparent);
}

/* Logo text light mode */
:root[data-theme="light"] .logo-text {
    background: var(--light-bg-card);
    border-color: var(--light-border-subtle);
    box-shadow: var(--shadow-light);
    color: var(--light-text-primary);
}

/* Form elements light mode */
:root[data-theme="light"] input,
:root[data-theme="light"] textarea,
:root[data-theme="light"] select {
    background-color: var(--light-bg-card);
    border-color: var(--light-border-medium);
    color: var(--light-text-primary);
}

:root[data-theme="light"] input:focus,
:root[data-theme="light"] textarea:focus,
:root[data-theme="light"] select:focus {
    border-color: var(--light-accent-primary);
    box-shadow: 0 0 0 3px var(--light-focus-bg);
    outline: none;
}

:root[data-theme="light"] input::placeholder,
:root[data-theme="light"] textarea::placeholder {
    color: var(--light-text-muted);
}

/* Alert components light mode */
:root[data-theme="light"] .alert-success {
    background-color: var(--light-success-bg);
    border-color: var(--light-success-border);
    color: var(--light-success);
}

:root[data-theme="light"] .alert-warning {
    background-color: var(--light-warning-bg);
    border-color: var(--light-warning-border);
    color: var(--light-warning);
}

:root[data-theme="light"] .alert-error {
    background-color: var(--light-error-bg);
    border-color: var(--light-error-border);
    color: var(--light-error);
}

:root[data-theme="light"] .alert-info {
    background-color: var(--light-info-bg);
    border-color: var(--light-info-border);
    color: var(--light-info);
}

/* Loading spinner light mode */
:root[data-theme="light"] .spinner {
    border-color: var(--light-spinner-secondary);
    border-top-color: var(--light-spinner-primary);
}

/* Progress bar light mode */
:root[data-theme="light"] .progress-bar {
    background-color: var(--light-progress-bg);
}

:root[data-theme="light"] .progress-fill {
    background: var(--light-progress-fill);
}

/* Typography adjustments for light mode */
:root[data-theme="light"] h1,
:root[data-theme="light"] h2,
:root[data-theme="light"] h3,
:root[data-theme="light"] h4,
:root[data-theme="light"] h5,
:root[data-theme="light"] h6 {
    color: var(--light-text-primary);
}

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

:root[data-theme="light"] .text-muted {
    color: var(--light-text-muted);
}

:root[data-theme="light"] .text-subtle {
    color: var(--light-text-subtle);
}

/* Link styles light mode */
:root[data-theme="light"] a {
    color: var(--light-accent-primary);
}

:root[data-theme="light"] a:hover {
    color: var(--light-accent-primary-hover);
}

/* High contrast mode support for light theme */
@media (prefers-contrast: high) {
    :root[data-theme="light"] {
        --light-text-primary: #000000;
        --light-text-secondary: #1a1a1a;
        --light-bg-primary: #ffffff;
        --light-bg-secondary: #f5f5f5;
        --light-border-medium: #333333;
    }
}

/* Reduced motion support for light theme */
@media (prefers-reduced-motion: reduce) {
    :root[data-theme="light"] .particle,
    :root[data-theme="light"] .floating-shape,
    :root[data-theme="light"] .node {
        animation: none;
    }
    
    :root[data-theme="light"] .service-card:hover,
    :root[data-theme="light"] .value-item:hover,
    :root[data-theme="light"] .stat-item:hover {
        transform: none;
    }
}