/* === FROZEN MIDNIGHT LANDING PAGE === */
/* Hinweis: Design System Variablen und Font werden aus design_system.css geladen */

/* Landing-spezifische Styles - nur was nicht in design_system.css ist */

/* 3. PRICING BOX (Outline Glass) */
.pricing-box-hero,
.hero-pricing-card,
.login-card {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px;
    padding: 2rem;
    backdrop-filter: blur(10px);
}

.pricing-amount {
    color: var(--color-brand, #5CBDF3) !important;
    font-weight: 800;
    text-shadow: 0 0 20px var(--color-brand-glow, rgba(92, 189, 243, 0.4));
}

/* 4. FEATURES */
.feature-icon,
.benefit-icon {
    color: var(--color-brand, #5CBDF3) !important;
    filter: drop-shadow(0 0 5px var(--color-brand-glow, rgba(92, 189, 243, 0.5)));
}

.benefit-icon svg {
    stroke: var(--color-brand, #5CBDF3);
    fill: none;
    width: 20px;
    height: 20px;
}

/* 5. GOLD BONUS BOX */
.bonus-badge,
.login-bonus-box,
.gold-box {
    background: var(--gold-bg, rgba(212, 175, 55, 0.1)) !important;
    border: 1px solid var(--gold-border, rgba(212, 175, 55, 0.4)) !important;
    color: var(--color-gold, #D4AF37) !important;
    border-radius: 12px;
    padding: 12px 20px;
}

.bonus-badge *,
.login-bonus-box *,
.gold-box * {
    color: var(--color-gold, #D4AF37) !important;
}

/* 6. MOBILE LOGIN BUTTON */
.mobile-login-btn {
    background: transparent !important;
    border: 1px solid var(--color-brand-border, rgba(92, 189, 243, 0.5)) !important;
    color: var(--color-brand, #5CBDF3) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 6px 14px !important;
    border-radius: 6px !important;
    text-decoration: none;
}

.mobile-login-btn:hover {
    background: var(--color-brand-bg, rgba(92, 189, 243, 0.1)) !important;
    box-shadow: 0 0 10px var(--color-brand-glow, rgba(92, 189, 243, 0.3)) !important;
}

/* 7. HERO HEADLINE */
h1, .hero-headline {
    font-weight: 800 !important;
    letter-spacing: -1px !important;
}

/* 8. PILLS/TAGS */
.pill, .tag, .branchen-pill {
    background: var(--color-brand-bg, rgba(92, 189, 243, 0.1)) !important;
    border: 1px solid var(--color-brand-border, rgba(92, 189, 243, 0.3)) !important;
    color: var(--color-brand, #5CBDF3) !important;
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 20px;
}

/* Mobile Overrides */
@media (max-width: 767px) {
    h1, .hero-headline {
        font-size: 1.75rem !important;
        letter-spacing: -0.5px !important;
    }
    
    .btn-hero-cta,
    .mobile-cta-btn {
        width: 100%;
        padding: 14px 24px !important;
        font-size: 13px !important;
    }
    
    .pricing-box-hero,
    .login-card {
        padding: 1.5rem;
    }
    
    .mobile-login-btn {
        padding: 6px 12px !important;
        font-size: 11px !important;
    }
}

/* ============================================
   POLAR LIGHT MODE OVERRIDES
   ============================================ */

/* Hero Section */
[data-theme="light"] .landing-hero,
[data-theme="light"] .hero-section {
    background: var(--bg-body, #F5F7FA);
}

/* Headline - Dark text for light mode */
[data-theme="light"] h1,
[data-theme="light"] .hero-headline,
[data-theme="light"] .hero-title {
    color: var(--text-primary, #1A1A1A) !important;
    text-shadow: none !important;
}

/* Subheadline and paragraph text */
[data-theme="light"] .hero-subtitle,
[data-theme="light"] .hero-description,
[data-theme="light"] .hero-text,
[data-theme="light"] .landing-hero p,
[data-theme="light"] .hero-section p {
    color: var(--text-secondary, #4A4A4A) !important;
}

/* Feature list items */
[data-theme="light"] .feature-item,
[data-theme="light"] .feature-text,
[data-theme="light"] .benefit-text,
[data-theme="light"] .hero-features li,
[data-theme="light"] .feature-list li {
    color: var(--text-secondary, #4A4A4A) !important;
}

/* Feature icons - Muted Teal in Light Mode */
[data-theme="light"] .feature-icon,
[data-theme="light"] .benefit-icon {
    color: #2DD4BF !important;
    filter: none;
}

/* Pills/Tags - Premium Light Mode Style (Muted Teal) */
[data-theme="light"] .pill,
[data-theme="light"] .tag,
[data-theme="light"] .branchen-pill {
    background: rgba(45, 212, 191, 0.08) !important;
    border: 1px solid rgba(45, 212, 191, 0.3) !important;
    color: #0F766E !important;
}

/* Login Card - Premium Glass Light */
[data-theme="light"] .pricing-box-hero,
[data-theme="light"] .hero-pricing-card,
[data-theme="light"] .login-card {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), 
                0 1px 2px rgba(0, 0, 0, 0.04) !important;
    backdrop-filter: blur(12px);
}

/* Login Card Text */
[data-theme="light"] .login-card h2,
[data-theme="light"] .login-card h3,
[data-theme="light"] .login-card .login-title,
[data-theme="light"] .login-card .card-title {
    color: var(--text-primary, #1A1A1A) !important;
}

[data-theme="light"] .login-card p,
[data-theme="light"] .login-card .login-subtitle,
[data-theme="light"] .login-card .card-subtitle {
    color: var(--text-secondary, #4A4A4A) !important;
}

/* Social Login Buttons - Light Mode */
[data-theme="light"] .social-login-btn,
[data-theme="light"] .btn-social,
[data-theme="light"] .oauth-btn {
    background: var(--bg-surface, #FFFFFF) !important;
    border: 1px solid var(--border-default, #E0E4E8) !important;
    color: var(--text-primary, #1A1A1A) !important;
}

[data-theme="light"] .social-login-btn:hover,
[data-theme="light"] .btn-social:hover,
[data-theme="light"] .oauth-btn:hover {
    background: var(--bg-hover, #E8ECF0) !important;
    border-color: var(--border-strong, #C8CDD2) !important;
}

/* Primary CTA Button - Muted Teal Gradient (Light Mode) */
[data-theme="light"] .btn-hero-cta,
[data-theme="light"] .btn-primary-cta,
[data-theme="light"] .login-card .btn-primary {
    background: linear-gradient(135deg, #2DD4BF 0%, #14B8A6 100%) !important;
    border: none !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 12px rgba(45, 212, 191, 0.25) !important;
}

[data-theme="light"] .btn-hero-cta:hover,
[data-theme="light"] .btn-primary-cta:hover,
[data-theme="light"] .login-card .btn-primary:hover {
    box-shadow: 0 6px 20px rgba(45, 212, 191, 0.35) !important;
    transform: translateY(-1px);
}

/* Gold Bonus Box - Light Mode */
[data-theme="light"] .bonus-badge,
[data-theme="light"] .login-bonus-box,
[data-theme="light"] .gold-box {
    background: rgba(212, 175, 55, 0.08) !important;
    border: 1px solid rgba(180, 140, 20, 0.3) !important;
}

[data-theme="light"] .bonus-badge *,
[data-theme="light"] .login-bonus-box *,
[data-theme="light"] .gold-box * {
    color: #9A7B1C !important;
}

/* Benefits Card */
[data-theme="light"] .benefits-card,
[data-theme="light"] .dein-vorteil-card {
    background: var(--bg-card, #FFFFFF) !important;
    border: 1px solid var(--border-default, #E0E4E8) !important;
}

[data-theme="light"] .benefits-card h3,
[data-theme="light"] .dein-vorteil-card h3 {
    color: var(--text-primary, #1A1A1A) !important;
}

[data-theme="light"] .benefits-card li,
[data-theme="light"] .dein-vorteil-card li,
[data-theme="light"] .benefit-item {
    color: var(--text-secondary, #4A4A4A) !important;
}

/* Check marks in light mode */
[data-theme="light"] .benefit-item svg,
[data-theme="light"] .check-icon {
    stroke: #22C55E !important;
}

/* Divider/Separator */
[data-theme="light"] .divider,
[data-theme="light"] .separator,
[data-theme="light"] hr {
    border-color: var(--border-light, #EEF0F2) !important;
    opacity: 1;
}

/* Footer Links */
[data-theme="light"] .landing-footer a,
[data-theme="light"] .footer-link {
    color: var(--text-secondary, #4A4A4A) !important;
}

[data-theme="light"] .landing-footer a:hover,
[data-theme="light"] .footer-link:hover {
    color: #2DD4BF !important;
}

/* Header/Navbar */
[data-theme="light"] .landing-header,
[data-theme="light"] .navbar {
    background: rgba(255, 255, 255, 0.95) !important;
    border-bottom: 1px solid var(--border-light, #EEF0F2) !important;
    backdrop-filter: blur(12px);
}

/* Logo Text */
[data-theme="light"] .logo-text,
[data-theme="light"] .brand-text {
    color: var(--text-primary, #1A1A1A) !important;
}

/* Login Button in Header - WCAG AA Compliant (Muted Teal) */
[data-theme="light"] .mobile-login-btn,
[data-theme="light"] .header-login-btn {
    background: transparent !important;
    border: 1px solid #0F766E !important;
    color: #0F766E !important;
}

[data-theme="light"] .mobile-login-btn:hover,
[data-theme="light"] .header-login-btn:hover {
    background: rgba(45, 212, 191, 0.08) !important;
}

/* Security Badge */
[data-theme="light"] .security-badge,
[data-theme="light"] .ssl-badge {
    color: var(--text-tertiary, #6B6B6B) !important;
}

/* Access System Link - WCAG AA Compliant (Muted Teal) */
[data-theme="light"] .access-system-link {
    color: #0F766E !important;
}

/* Auth Card - The main login card on landing */
[data-theme="light"] .auth-card {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), 
                0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] .auth-title {
    color: var(--text-primary, #1A1A1A) !important;
}

[data-theme="light"] .auth-subtitle {
    color: var(--text-secondary, #4A4A4A) !important;
}

[data-theme="light"] .auth-divider {
    color: var(--text-tertiary, #6B6B6B) !important;
}

/* Auth Buttons (Muted Teal Gradient) */
[data-theme="light"] .auth-btn-primary,
[data-theme="light"] .btn-frozen-hero {
    background: linear-gradient(135deg, #2DD4BF 0%, #14B8A6 100%) !important;
    border: none !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 12px rgba(45, 212, 191, 0.25) !important;
}

[data-theme="light"] .auth-btn-primary:hover,
[data-theme="light"] .btn-frozen-hero:hover {
    box-shadow: 0 6px 20px rgba(45, 212, 191, 0.35) !important;
}

[data-theme="light"] .social-btn {
    background: var(--bg-surface, #FFFFFF) !important;
    border: 1px solid var(--border-default, #E0E4E8) !important;
    color: var(--text-primary, #1A1A1A) !important;
}

[data-theme="light"] .social-btn:hover {
    background: var(--bg-hover, #E8ECF0) !important;
    border-color: var(--border-strong, #C8CDD2) !important;
}

[data-theme="light"] .social-btn svg {
    fill: currentColor;
}

/* Hero Badge (Muted Teal) */
[data-theme="light"] .hero-badge {
    background: rgba(45, 212, 191, 0.08) !important;
    border: 1px solid rgba(45, 212, 191, 0.3) !important;
    color: #0F766E !important;
}

/* Hero Subheadline */
[data-theme="light"] .hero-subheadline {
    color: var(--text-secondary, #4A4A4A) !important;
}

/* USP Box (Dein Vorteil) */
[data-theme="light"] .usp-box {
    background: var(--bg-card, #FFFFFF) !important;
    border: 1px solid var(--border-default, #E0E4E8) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] .usp-title {
    color: var(--text-primary, #1A1A1A) !important;
}

[data-theme="light"] .usp-item {
    color: var(--text-secondary, #4A4A4A) !important;
}

[data-theme="light"] .usp-check {
    color: #22C55E !important;
}

[data-theme="light"] .usp-icon {
    color: #2DD4BF !important;
}

/* USP Item Strong Text - Override inline white color */
[data-theme="light"] .usp-item strong {
    color: var(--text-primary, #1A1A1A) !important;
}

/* Header */
[data-theme="light"] .header,
[data-theme="light"] header {
    background: rgba(255, 255, 255, 0.95) !important;
    border-bottom: 1px solid var(--border-light, #EEF0F2) !important;
    backdrop-filter: blur(12px);
}

[data-theme="light"] .logo {
    color: var(--text-primary, #1A1A1A) !important;
}

[data-theme="light"] .header-login,
[data-theme="light"] .btn-header-ghost {
    color: var(--text-primary, #1A1A1A) !important;
    border-color: var(--border-default, #E0E4E8) !important;
}

[data-theme="light"] .header-login:hover,
[data-theme="light"] .btn-header-ghost:hover {
    background: var(--bg-hover, #E8ECF0) !important;
    border-color: var(--border-strong, #C8CDD2) !important;
}

/* Footer */
[data-theme="light"] .landing-footer,
[data-theme="light"] footer {
    background: var(--bg-body, #F5F7FA) !important;
    border-top: 1px solid var(--border-light, #EEF0F2) !important;
}

[data-theme="light"] .landing-footer p,
[data-theme="light"] footer p {
    color: var(--text-tertiary, #6B6B6B) !important;
}

/* Branchen Pills (Muted Teal) */
[data-theme="light"] .branchen-container .pill,
[data-theme="light"] .branchen-pills .pill {
    background: rgba(45, 212, 191, 0.08) !important;
    border: 1px solid rgba(45, 212, 191, 0.3) !important;
    color: #0F766E !important;
}

/* Returning Operator Link - WCAG AA Compliant (Muted Teal) */
[data-theme="light"] .auth-footer a,
[data-theme="light"] .returning-link {
    color: #0F766E !important;
}

/* SSL Badge */
[data-theme="light"] .auth-security,
[data-theme="light"] .ssl-text {
    color: var(--text-tertiary, #6B6B6B) !important;
}

/* ============================================
   CRITICAL: Main Layout Overrides
   These override inline styles in landing.html
   ============================================ */

/* Body Background */
[data-theme="light"] body {
    background: var(--bg-body, #F5F7FA) !important;
    color: var(--text-primary, #1A1A1A) !important;
}

/* Main Container */
[data-theme="light"] .main-container {
    background: var(--bg-body, #F5F7FA) !important;
}

/* Hero Content Area */
[data-theme="light"] .hero-content {
    color: var(--text-primary, #1A1A1A) !important;
}

/* Desktop Layout */
[data-theme="light"] .landing-desktop {
    background: var(--bg-body, #F5F7FA) !important;
}

/* Mobile Layout */
[data-theme="light"] .landing-mobile {
    background: var(--bg-body, #F5F7FA) !important;
}

/* Mobile Hero */
[data-theme="light"] .mobile-hero {
    background: var(--bg-body, #F5F7FA) !important;
}

/* Mobile Features */
[data-theme="light"] .mobile-features {
    background: var(--bg-card, #FFFFFF) !important;
}

/* Mobile Auth */
[data-theme="light"] .mobile-auth {
    background: var(--bg-body, #F5F7FA) !important;
}

/* Mobile Feature Items */
[data-theme="light"] .feature-item-mobile .feature-text h3,
[data-theme="light"] .feature-item-mobile h4 {
    color: var(--text-primary, #1A1A1A) !important;
}

[data-theme="light"] .feature-item-mobile .feature-text p,
[data-theme="light"] .feature-item-mobile p {
    color: var(--text-secondary, #4A4A4A) !important;
}

/* Mobile CTA Section */
[data-theme="light"] .cta-section {
    background: var(--bg-body, #F5F7FA) !important;
}

[data-theme="light"] .cta-title {
    color: var(--text-primary, #1A1A1A) !important;
}

[data-theme="light"] .cta-text {
    color: var(--text-secondary, #4A4A4A) !important;
}

/* ============================================
   MOBILE LANDING - Complete Light Mode Coverage
   ============================================ */

/* Mobile Header */
[data-theme="light"] .mobile-header {
    background: rgba(255, 255, 255, 0.95) !important;
    border-bottom: 1px solid var(--border-light, #EEF0F2) !important;
}

[data-theme="light"] .mobile-logo {
    color: var(--text-primary, #1A1A1A) !important;
}

/* Mobile Hero Section */
[data-theme="light"] .mobile-hero h1,
[data-theme="light"] .mobile-hero h2 {
    color: var(--text-primary, #1A1A1A) !important;
}

[data-theme="light"] .mobile-subheadline {
    color: var(--text-secondary, #4A4A4A) !important;
}

/* Mobile Pricing Badge (Muted Teal) */
[data-theme="light"] .mobile-pricing-badge {
    background: rgba(45, 212, 191, 0.08) !important;
    border: 1px solid rgba(45, 212, 191, 0.3) !important;
}

[data-theme="light"] .price-tag {
    color: #0F766E !important;
}

[data-theme="light"] .price-desc {
    color: var(--text-secondary, #4A4A4A) !important;
}

/* Mobile CTA Button (Muted Teal Gradient) */
[data-theme="light"] .mobile-cta-btn,
[data-theme="light"] .mobile-cta-btn--primary {
    background: linear-gradient(135deg, #2DD4BF 0%, #14B8A6 100%) !important;
    color: #FFFFFF !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(45, 212, 191, 0.25) !important;
}

/* Mobile Trust Text */
[data-theme="light"] .mobile-trust-text {
    color: var(--text-tertiary, #6B6B6B) !important;
}

/* Mobile Features Section */
[data-theme="light"] .mobile-features h2,
[data-theme="light"] .mobile-features h3 {
    color: var(--text-primary, #1A1A1A) !important;
}

/* Trust Signals */
[data-theme="light"] .trust-signals {
    background: transparent !important;
    border: none !important;
}

[data-theme="light"] .trust-item {
    color: var(--text-secondary, #4A4A4A) !important;
}

/* Bonus Text */
[data-theme="light"] .bonus-text {
    color: #9A7B1C !important;
}

/* Mobile Login Section */
[data-theme="light"] .mobile-login-section,
[data-theme="light"] .mobile-auth-container {
    background: var(--bg-body, #F5F7FA) !important;
}

[data-theme="light"] .mobile-auth-title {
    color: var(--text-primary, #1A1A1A) !important;
}

/* Mobile Social Buttons */
[data-theme="light"] .mobile-social-btn {
    background: var(--bg-surface, #FFFFFF) !important;
    border: 1px solid var(--border-default, #E0E4E8) !important;
    color: var(--text-primary, #1A1A1A) !important;
}

[data-theme="light"] .mobile-social-btn:hover {
    background: var(--bg-hover, #E8ECF0) !important;
}

/* Mobile Privacy Note */
[data-theme="light"] .mobile-privacy-note {
    color: var(--text-tertiary, #6B6B6B) !important;
}

/* Mobile Footer */
[data-theme="light"] .mobile-footer {
    background: var(--bg-body, #F5F7FA) !important;
    border-top: 1px solid var(--border-light, #EEF0F2) !important;
    color: var(--text-tertiary, #6B6B6B) !important;
}

[data-theme="light"] .mobile-footer a {
    color: var(--text-secondary, #4A4A4A) !important;
}

/* Feature List Mobile */
[data-theme="light"] .feature-list-mobile h4,
[data-theme="light"] .feature-list-mobile .feature-title {
    color: var(--text-primary, #1A1A1A) !important;
}

[data-theme="light"] .feature-list-mobile p,
[data-theme="light"] .feature-list-mobile .feature-desc {
    color: var(--text-secondary, #4A4A4A) !important;
}

/* ============================================
   SOCIAL ICON COLORS FOR BOTH THEMES
   ============================================ */

/* Dark Mode (default) - GitHub & Apple icons white */
.social-btn .github-icon,
.social-btn .apple-icon,
.mobile-social-btn .github-icon,
.mobile-social-btn .apple-icon {
    color: #FFFFFF;
}

/* Light Mode - GitHub & Apple icons dark */
[data-theme="light"] .social-btn .github-icon,
[data-theme="light"] .social-btn .apple-icon,
[data-theme="light"] .mobile-social-btn .github-icon,
[data-theme="light"] .mobile-social-btn .apple-icon {
    color: #1A1A1A !important;
}