/* ===================================
   LIGHT THEME - PROFESSIONAL MODERN DESIGN
   ImageTools App
   =================================== */

[data-theme="light"] {
    /* ===== COLOR PALETTE ===== */
    /* Primary gradient colors - Rich and vibrant for light bg */
    --color-primary-500: hsl(265, 85%, 55%);
    --color-primary-600: hsl(265, 80%, 48%);
    --color-primary-700: hsl(265, 75%, 40%);

    --color-accent-blue: hsl(215, 90%, 55%);
    --color-accent-pink: hsl(320, 85%, 55%);
    --color-accent-cyan: hsl(185, 85%, 45%);

    /* Neutrals - Clean white/gray palette */
    --color-bg-base: hsl(220, 20%, 97%);
    /* Soft off-white */
    --color-bg-elevated: hsl(0, 0%, 100%);
    /* Pure white */
    --color-bg-card: hsl(0, 0%, 100%);
    /* White cards */
    --color-bg-input: hsl(220, 15%, 95%);
    /* Light gray inputs */

    /* Glassmorphism - Refined for light */
    --glass-bg: hsla(0, 0%, 100%, 0.9);
    --glass-border: hsla(220, 20%, 80%, 0.6);
    --glass-hover: hsla(220, 20%, 95%, 0.95);

    /* Text - High contrast for readability */
    --color-text-primary: hsl(220, 30%, 15%);
    /* Near-black */
    --color-text-secondary: hsl(220, 15%, 45%);
    /* Medium gray */
    --color-text-tertiary: hsl(220, 10%, 55%);
    /* Light gray */

    /* Semantic colors */
    --color-success: hsl(145, 70%, 40%);
    --color-warning: hsl(40, 95%, 50%);
    --color-error: hsl(355, 80%, 50%);
    --color-info: hsl(200, 90%, 50%);

    /* Gradients - Vibrant for light bg */
    --gradient-primary: linear-gradient(135deg, var(--color-primary-500), var(--color-accent-blue));
    --gradient-accent: linear-gradient(135deg, var(--color-accent-pink), var(--color-primary-500));
    --gradient-hero: linear-gradient(135deg,
            hsl(265, 85%, 55%) 0%,
            hsl(240, 85%, 55%) 25%,
            hsl(215, 90%, 55%) 50%,
            hsl(280, 85%, 55%) 75%,
            hsl(320, 85%, 55%) 100%);
    --gradient-card: linear-gradient(135deg,
            hsla(265, 60%, 55%, 0.06) 0%,
            hsla(215, 60%, 55%, 0.03) 100%);

    /* Shadows - Soft and elegant */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.12);
    --shadow-glow: 0 0 30px rgba(147, 51, 234, 0.2);
    --shadow-glow-blue: 0 0 30px rgba(59, 130, 246, 0.2);
    --shadow-glow-pink: 0 0 30px rgba(236, 72, 153, 0.2);

    /* Legacy variables for compatibility */
    --primary-color: hsl(265, 85%, 55%);
    --secondary-color: hsl(215, 90%, 55%);
    --surface-color: hsl(220, 15%, 95%);
    --border-color: hsl(220, 15%, 85%);
    --text-primary: hsl(220, 30%, 15%);
    --text-secondary: hsl(220, 15%, 45%);
}

/* ===== BODY BACKGROUND ===== */
[data-theme="light"] body {
    background-color: var(--color-bg-base);
    background-image:
        radial-gradient(circle at 20% 20%, hsla(265, 75%, 55%, 0.04) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, hsla(215, 85%, 50%, 0.04) 0%, transparent 50%);
}

/* ===== HEADER ===== */
[data-theme="light"] .main-header {
    background: hsla(0, 0%, 100%, 0.95);
    border-bottom: 1px solid hsla(220, 20%, 85%, 0.8);
}

[data-theme="light"] .logo-text {
    background: linear-gradient(135deg, #7c3aed, #3b82f6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

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

[data-theme="light"] .nav-link:hover,
[data-theme="light"] .nav-link.active {
    color: var(--color-text-primary);
    background: hsla(265, 50%, 95%, 0.8);
}

/* ===== TOOL HERO SECTION (Critical fix) ===== */
[data-theme="light"] .tool-hero {
    background: linear-gradient(135deg,
            hsl(265, 85%, 96%) 0%,
            hsl(215, 90%, 96%) 50%,
            hsl(280, 85%, 96%) 100%);
    color: var(--color-text-primary);
}

[data-theme="light"] .tool-title {
    color: var(--color-text-primary);
    background: linear-gradient(135deg, #7c3aed, #3b82f6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

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

[data-theme="light"] .benefit-item {
    background: hsla(265, 50%, 50%, 0.1);
    border: 1px solid hsla(265, 50%, 70%, 0.3);
    color: var(--color-text-primary);
}

[data-theme="light"] .benefit-item:hover {
    background: hsla(265, 50%, 50%, 0.15);
    border-color: hsla(265, 50%, 60%, 0.4);
}

[data-theme="light"] .benefit-icon {
    color: var(--color-primary-600);
}

/* ===== CARDS & SURFACES ===== */
[data-theme="light"] .tool-card,
[data-theme="light"] .card,
[data-theme="light"] .howto-step {
    background: white;
    border: 1px solid hsla(220, 20%, 88%, 0.8);
    box-shadow: var(--shadow-md);
}

[data-theme="light"] .tool-card:hover,
[data-theme="light"] .card:hover,
[data-theme="light"] .howto-step:hover {
    border-color: hsla(265, 50%, 70%, 0.5);
    box-shadow: var(--shadow-lg), 0 0 20px hsla(265, 50%, 50%, 0.1);
}

/* ===== UPLOAD ZONES ===== */
[data-theme="light"] .upload-zone {
    background: linear-gradient(135deg, hsla(265, 50%, 97%, 1), hsla(215, 50%, 97%, 1));
    border: 2px dashed hsla(265, 50%, 70%, 0.5);
    color: var(--color-text-primary);
}

[data-theme="light"] .upload-zone:hover,
[data-theme="light"] .upload-zone.drag-over {
    background: linear-gradient(135deg, hsla(265, 50%, 95%, 1), hsla(215, 50%, 95%, 1));
    border-color: var(--color-primary-500);
}

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

[data-theme="light"] .upload-subtext {
    color: var(--color-text-secondary);
}

/* ===== BUTTONS ===== */
[data-theme="light"] .btn-primary {
    background: var(--gradient-primary);
    color: white;
    box-shadow: var(--shadow-md);
}

[data-theme="light"] .btn-secondary {
    background: white;
    color: var(--color-primary-600);
    border: 2px solid var(--color-primary-500);
}

/* ===== LANGUAGE DROPDOWN ===== */
[data-theme="light"] .language-dropdown-btn {
    background: white;
    border: 1px solid hsla(220, 20%, 85%, 0.8);
    color: var(--color-text-primary);
}

[data-theme="light"] .language-dropdown-menu {
    background: white;
    border: 1px solid hsla(220, 20%, 85%, 0.8);
    box-shadow: var(--shadow-lg);
}

[data-theme="light"] .lang-option {
    color: var(--color-text-secondary);
}

[data-theme="light"] .lang-option:hover {
    background: hsla(265, 50%, 95%, 1);
    color: var(--color-text-primary);
}

[data-theme="light"] .lang-option.active {
    background: var(--gradient-primary);
    color: white;
}

/* ===== THEME TOGGLE BUTTON ===== */
[data-theme="light"] .theme-toggle-btn {
    background: white;
    border: 1px solid hsla(220, 20%, 85%, 0.8);
    box-shadow: var(--shadow-sm);
}

[data-theme="light"] .theme-toggle-btn:hover {
    background: hsla(265, 50%, 95%, 1);
    border-color: var(--color-primary-500);
}

/* ===== HOW-TO SECTION ===== */
[data-theme="light"] .tool-howto {
    background: hsla(220, 20%, 97%, 1);
}

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

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

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

/* ===== FOOTER ===== */
[data-theme="light"] .main-footer {
    background: hsla(220, 20%, 96%, 1);
    border-top: 1px solid hsla(220, 20%, 88%, 0.8);
    color: var(--color-text-secondary);
}

/* ===== TOAST NOTIFICATIONS ===== */
[data-theme="light"] .toast {
    background: white;
    color: var(--color-text-primary);
    border: 1px solid hsla(220, 20%, 85%, 0.8);
    box-shadow: var(--shadow-lg);
}

/* ===== SCROLLBAR ===== */
[data-theme="light"] ::-webkit-scrollbar-track {
    background: hsl(220, 20%, 95%);
}

[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: hsl(220, 15%, 80%);
}

[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary-500);
}

/* ===== SELECTION ===== */
[data-theme="light"] ::selection {
    background-color: var(--color-primary-500);
    color: white;
}

/* ===== INPUTS & FORMS ===== */
[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea {
    background: white;
    border: 1px solid hsla(220, 20%, 85%, 0.8);
    color: var(--color-text-primary);
}

[data-theme="light"] input:focus,
[data-theme="light"] select:focus,
[data-theme="light"] textarea:focus {
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 3px hsla(265, 80%, 60%, 0.15);
}

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

/* ===== TOOL INTERFACE SPECIFIC ===== */
[data-theme="light"] .tool-interface {
    color: var(--color-text-primary);
}

/* ===== MODAL & OVERLAYS ===== */
[data-theme="light"] .modal-content {
    background: white;
    border: 1px solid hsla(220, 20%, 88%, 0.8);
}

/* ===== GRADIENT TEXT FIX ===== */
[data-theme="light"] .gradient-text,
[data-theme="light"] .gradient-text-large {
    background: linear-gradient(135deg, #7c3aed 0%, #ec4899 50%, #3b82f6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ===== HIGHLIGHT TEXT ===== */
[data-theme="light"] .highlight-text {
    color: var(--color-text-primary);
}

/* =====================================
   LANDING PAGE SECTIONS - LIGHT MODE
   ===================================== */

/* ===== LANDING SECTIONS BASE ===== */
[data-theme="light"] .landing-section {
    background: transparent;
}

[data-theme="light"] .landing-section--gradient {
    background: linear-gradient(180deg,
            hsla(265, 50%, 96%, 0.5) 0%,
            transparent 100%);
}

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

[data-theme="light"] .section-badge {
    background: hsla(265, 60%, 55%, 0.12);
    color: var(--color-primary-600);
}

/* ===== GRADIENT TEXT FIX FOR LIGHT MODE ===== */
[data-theme="light"] .gradient-text,
[data-theme="light"] .section-title .gradient-text,
[data-theme="light"] .tool-hero-title .gradient-text {
    background: linear-gradient(135deg, #7c3aed 0%, #3b82f6 50%, #ec4899 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ===== TOOL HERO ENHANCED ===== */
[data-theme="light"] .tool-hero-enhanced {
    background: linear-gradient(180deg,
            hsla(265, 60%, 96%, 0.8) 0%,
            hsla(215, 50%, 97%, 0.5) 100%);
}

[data-theme="light"] .tool-hero-enhanced::before {
    background: radial-gradient(circle at 30% 40%, hsla(265, 85%, 60%, 0.08) 0%, transparent 50%);
}

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

[data-theme="light"] .trust-badges .trust-badge-item,
[data-theme="light"] .trust-badge-item {
    background: hsla(265, 40%, 98%, 0.9);
    border: 1px solid hsla(265, 40%, 85%, 0.6);
    color: var(--color-text-primary);
    box-shadow: 0 2px 8px hsla(265, 50%, 50%, 0.08);
}

/* ===== CATEGORIES SHOWCASE ===== */
[data-theme="light"] .categories-grid .category-card,
[data-theme="light"] .category-card {
    background: white;
    border: 1px solid hsla(220, 20%, 88%, 0.8);
    box-shadow: var(--shadow-md);
}

[data-theme="light"] .category-card:hover {
    border-color: hsla(265, 60%, 70%, 0.6);
    box-shadow: var(--shadow-lg), 0 0 30px hsla(265, 60%, 50%, 0.1);
}

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

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

[data-theme="light"] .category-card .category-count {
    background: hsla(265, 50%, 55%, 0.1);
    color: var(--color-primary-600);
}

[data-theme="light"] .category-card .category-arrow {
    color: var(--color-primary-500);
}

/* ===== TRUST SECTION ===== */
[data-theme="light"] .trust-section {
    background: linear-gradient(180deg,
            hsla(220, 30%, 97%, 1) 0%,
            hsla(265, 30%, 97%, 0.5) 100%);
}

[data-theme="light"] .trust-headline {
    color: var(--color-text-primary);
}

[data-theme="light"] .trust-highlight {
    color: var(--color-primary-600);
}

[data-theme="light"] .trust-feature {
    background: white;
    border: 1px solid hsla(220, 20%, 88%, 0.8);
    box-shadow: var(--shadow-md);
}

[data-theme="light"] .trust-feature:hover {
    border-color: hsla(265, 60%, 70%, 0.5);
}

[data-theme="light"] .trust-feature-title {
    color: var(--color-text-primary);
}

[data-theme="light"] .trust-feature-desc {
    color: var(--color-text-secondary);
}

/* ===== STEPS TIMELINE ===== */
[data-theme="light"] .steps-timeline .step-item,
[data-theme="light"] .step-item {
    background: white;
    border: 1px solid hsla(220, 20%, 88%, 0.8);
    box-shadow: var(--shadow-md);
}

[data-theme="light"] .step-item:hover {
    border-color: hsla(265, 60%, 70%, 0.5);
    box-shadow: var(--shadow-lg);
}

[data-theme="light"] .step-number {
    background: linear-gradient(135deg, #7c3aed, #3b82f6);
    color: white;
}

[data-theme="light"] .step-connector {
    background: linear-gradient(90deg, hsla(265, 60%, 80%, 0.5), hsla(215, 60%, 80%, 0.5));
}

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

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

/* ===== STATS SECTION ===== */
[data-theme="light"] .stats-section {
    background: linear-gradient(135deg,
            hsla(265, 50%, 95%, 0.8) 0%,
            hsla(215, 50%, 95%, 0.8) 100%);
}

[data-theme="light"] .stats-grid .stat-item,
[data-theme="light"] .stat-item {
    background: white;
    border: 1px solid hsla(220, 20%, 88%, 0.8);
    box-shadow: var(--shadow-sm);
}

[data-theme="light"] .stat-number {
    background: linear-gradient(135deg, #7c3aed, #3b82f6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

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

/* ===== PRICING SECTION ===== */
[data-theme="light"] .pricing-section-new {
    background: transparent;
}

[data-theme="light"] .pricing-card-new {
    background: white;
    border: 1px solid hsla(220, 20%, 88%, 0.8);
    box-shadow: var(--shadow-md);
}

[data-theme="light"] .pricing-card-new:hover {
    border-color: hsla(265, 60%, 70%, 0.5);
    box-shadow: var(--shadow-lg);
}

[data-theme="light"] .pricing-card-new--featured {
    background: linear-gradient(135deg,
            hsla(265, 50%, 98%, 1) 0%,
            hsla(215, 50%, 98%, 1) 100%);
    border: 2px solid hsla(265, 60%, 70%, 0.5);
}

[data-theme="light"] .pricing-name {
    color: var(--color-text-primary);
}

[data-theme="light"] .pricing-amount {
    color: var(--color-text-primary);
}

[data-theme="light"] .pricing-period {
    color: var(--color-text-secondary);
}

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

[data-theme="light"] .pricing-features-list .check {
    color: var(--color-success);
}

[data-theme="light"] .pricing-cta--outline {
    background: white;
    color: var(--color-primary-600);
    border: 2px solid var(--color-primary-500);
}

[data-theme="light"] .pricing-cta--outline:hover {
    background: hsla(265, 50%, 96%, 1);
}

[data-theme="light"] .pricing-badge {
    background: linear-gradient(135deg, #7c3aed, #3b82f6);
    color: white;
}

/* ===== FEATURES SECTION ===== */
[data-theme="light"] .features-section {
    background: linear-gradient(180deg,
            transparent 0%,
            hsla(220, 30%, 96%, 0.5) 100%);
}

[data-theme="light"] .features-grid .feature-card,
[data-theme="light"] .feature-card {
    background: white;
    border: 1px solid hsla(220, 20%, 88%, 0.8);
    box-shadow: var(--shadow-sm);
}

[data-theme="light"] .feature-card:hover {
    border-color: hsla(265, 60%, 70%, 0.5);
    box-shadow: var(--shadow-md);
}

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

[data-theme="light"] .feature-desc {
    color: var(--color-text-secondary);
}

/* ===== FAQ SECTION ===== */
[data-theme="light"] .faq-section {
    background: transparent;
}

[data-theme="light"] .faq-grid .faq-item,
[data-theme="light"] .faq-item {
    background: white;
    border: 1px solid hsla(220, 20%, 88%, 0.8);
    box-shadow: var(--shadow-sm);
}

[data-theme="light"] .faq-item:hover {
    border-color: hsla(265, 60%, 70%, 0.4);
}

[data-theme="light"] .faq-item.active {
    border-color: hsla(265, 60%, 70%, 0.6);
    box-shadow: var(--shadow-md);
}

[data-theme="light"] .faq-question {
    color: var(--color-text-primary);
    background: transparent;
}

[data-theme="light"] .faq-question:hover {
    color: var(--color-primary-600);
}

[data-theme="light"] .faq-icon {
    color: var(--color-primary-500);
}

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

/* ===== CTA BANNER ===== */
[data-theme="light"] .cta-banner {
    background: linear-gradient(135deg,
            hsla(265, 60%, 55%, 0.95) 0%,
            hsla(215, 70%, 55%, 0.95) 100%);
    color: white;
    box-shadow: var(--shadow-xl);
}

[data-theme="light"] .cta-title {
    color: white;
}

[data-theme="light"] .cta-subtitle {
    color: hsla(0, 0%, 100%, 0.9);
}

[data-theme="light"] .cta-button {
    background: white;
    color: var(--color-primary-600);
    box-shadow: var(--shadow-md);
}

[data-theme="light"] .cta-button:hover {
    background: hsla(0, 0%, 100%, 0.95);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

/* ===== RELATED TOOLS ===== */
[data-theme="light"] .related-tools-section {
    background: transparent;
}

[data-theme="light"] .related-tool-card {
    background: white;
    border: 1px solid hsla(220, 20%, 88%, 0.8);
    color: var(--color-text-primary);
    box-shadow: var(--shadow-sm);
}

[data-theme="light"] .related-tool-card:hover {
    border-color: hsla(265, 60%, 70%, 0.5);
    background: hsla(265, 50%, 98%, 1);
    box-shadow: var(--shadow-md);
}

[data-theme="light"] .related-tool-name {
    color: var(--color-text-primary);
}

/* ===== ENHANCED FOOTER ===== */
[data-theme="light"] .footer-new {
    background: hsla(220, 25%, 96%, 1);
    border-top: 1px solid hsla(220, 20%, 88%, 0.8);
}

[data-theme="light"] .footer-logo {
    color: var(--color-text-primary);
}

[data-theme="light"] .footer-tagline {
    color: var(--color-text-secondary);
}

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

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

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

[data-theme="light"] .footer-bottom {
    border-top: 1px solid hsla(220, 20%, 88%, 0.6);
}

[data-theme="light"] .footer-copyright {
    color: var(--color-text-secondary);
}

[data-theme="light"] .footer-social a {
    color: var(--color-text-secondary);
    background: hsla(220, 20%, 92%, 0.8);
}

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

/* ===== TOOL CONTAINER & MODALS ===== */
[data-theme="light"] .tool-container {
    background: transparent;
}

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

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

/* ===== PDF TOOL CARDS ===== */
[data-theme="light"] .pdf-grid {
    background: hsla(220, 20%, 97%, 0.8);
    border: 1px solid hsla(220, 20%, 88%, 0.6);
}

[data-theme="light"] .pdf-card {
    background: white;
    border: 1px solid hsla(220, 20%, 88%, 0.8);
    box-shadow: var(--shadow-sm);
}

[data-theme="light"] .pdf-card:hover {
    border-color: hsla(265, 60%, 70%, 0.5);
    box-shadow: var(--shadow-md);
}

[data-theme="light"] .pdf-name {
    color: var(--color-text-primary);
}

[data-theme="light"] .pdf-size {
    color: var(--color-text-secondary);
}

[data-theme="light"] .pages-badge {
    background: hsla(265, 50%, 55%, 0.1);
    color: var(--color-primary-600);
}

/* ===== BTN GHOST ===== */
[data-theme="light"] .btn-ghost {
    background: transparent;
    border: 2px dashed hsla(220, 20%, 80%, 0.8);
    color: var(--color-text-secondary);
}

[data-theme="light"] .btn-ghost:hover {
    border-color: var(--color-primary-500);
    background: hsla(265, 50%, 97%, 1);
    color: var(--color-primary-600);
}