/* ========================================================
   MODO CLARO (LIGHT THEME) 
   Tokens e Variáveis CSS para Inversão de Cores 
======================================================== */

[data-theme='light'] {
    /* Backgrounds e Fundos Globais (Soft-Light / Zebra Pattern) */
    --bg-dark: #F4F4F5;
    /* Fundo base (Slate-100) */
    --bg-alt: #FAFAFA;
    /* Fundo alternado "menos claro" (Slate-200) */
    --bg-card: #ffffff;
    /* Fundo de cartões premium */

    /* Materiais de Interface (Glassmorphism invertido) */
    --glass: rgba(226, 232, 240, 0.87);
    --glass-border: rgba(0, 0, 0, 0.04);

    /* Tipografia Oficial (Slate-900 e Slate-600) */
    --text-main: #0f172a;
    /* Texto base */
    --text-muted: #475569;
    /* Texto secundário (Slate-600) */

    /* Gradientes Base Fundos */
    --grad-dark: linear-gradient(180deg, #e2e8f0 0%, #f1f5f9 100%);

    /* Marca (Logo Escura) */
    --logo-light: #0f172a;

    --primary-glow: rgba(45, 212, 191, 0.12);
}

/* Forçamento Global Inicial */
[data-theme='light'] body {
    background: var(--bg-dark);
    color: var(--text-main);
}

/* ─── ZEBRA PATTERN PREMIUM (PADRONIZADO) ─── */

/* 1. Hero removido para manter tema original dark */

/* 2. Recursos (#recursos) - Claro (B) */
[data-theme='light'] #recursos {
    background: var(--bg-dark) !important;
}

/* 3. API Shopee (#api-shopee) - DESTAQUE PREMIUM (Fundo Vibrante) */
[data-theme='light'] #api-shopee {
    background: linear-gradient(135deg, #0f766e 0%, #115e59 100%) !important;
    border-top: none !important;
    border-bottom: none !important;
    position: relative;
    overflow: hidden;
}

[data-theme='light'] #api-shopee::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 80% -20%, rgba(45, 212, 191, 0.4), transparent 60%);
    pointer-events: none;
}

/* 4. Preços (#precos) - Claro (B) */
[data-theme='light'] #precos {
    background: var(--bg-dark) !important;
}

/* 5. Lojas Online (#lojas) - Menos Claro (A) */
[data-theme='light'] #lojas {
    background: var(--bg-alt) !important;
}

/* 6. Hub de Ecossistema (#hub-ecossistema) - Claro (B) */
[data-theme='light'] #hub-ecossistema {
    background: var(--bg-dark) !important;
    border-top: 1px solid rgba(0, 0, 0, 0.03);
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}

/* 7. CTA Final (.lp-cta-final) - Padrão Dark (Unificado) */
[data-theme='light'] .lp-cta-final {
    background: var(--bg) !important;
}

/* Caixa interna seguindo padrão Dark (Subtis) */
[data-theme='light'] .cta-final-inner {
    background: #2DD4BF !important;
    border: 1px solid #0F172Ad9 !important;
    box-shadow: none !important;
    padding: 5rem 3rem !important;
    /* Replicando padding do dark */
}

[data-theme='light'] .lp-cta-final h2 {
    color: var(--text-main);
}

[data-theme='light'] .lp-cta-final p {
    color: var(--text-muted);
}

/* Preservação de Fundo do Menu (Conforme solicitado) */
[data-theme='light'] .lp-nav {
    background: rgba(226, 232, 240, 1.0);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* Rodapé (Padrão Dark: Igual à seção e com borda) */
[data-theme='light'] .lp-footer {
    background: var(--bg) !important;
    border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
}

[data-theme='light'] .lp-nav-links a {
    color: #475569;
}

[data-theme='light'] .lp-nav-links a:hover {
    color: #0f172a;
}

[data-theme='light'] .lp-mobile-btn {
    background: #e2e8f0;
    border-color: #cbd5e1;
    color: #475569;
}

[data-theme='light'] .lp-footer p,
[data-theme='light'] .lp-footer a {
    color: #475569 !important;
}

/* Ajuste no Logo para Modo Claro */
[data-theme='light'] .brand-logo {
    color: #0f172a !important;
}

/* Sombras Premium para Cartões */
[data-theme='light'] .feat-card,
[data-theme='light'] .price-box,
[data-theme='light'] .store-card {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.03);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.02);
}

[data-theme='light'] .lp-cta-final h2 {
    color: var(--text-main);
}

[data-theme='light'] .lp-cta-final p {
    color: var(--text-muted);
}

[data-theme='light'] .lp-nav [onclick="toggleLPMenu()"] {
    color: var(--text-main) !important;
}

/* Diferenciação sutil nos textos inline */
[data-theme='light'] .sec-p,
[data-theme='light'] .price-desc,
[data-theme='light'] .api-p {
    color: #475569 !important;
}

/* Botões Outline no Menu em Modo Claro (Dashboard/Entrar) */
[data-theme='light'] .lp-nav .btn-hero-outline,
[data-theme='light'] .lp-mobile-menu .btn-hero-outline {
    border: 1px solid rgba(15, 23, 42, 0.25) !important;
    color: #475569 !important;
    background: transparent !important;
}

[data-theme='light'] .lp-nav .btn-hero-outline:hover,
[data-theme='light'] .lp-mobile-menu .btn-hero-outline:hover {
    border: 1px solid rgba(15, 23, 42, 0.5) !important;
    color: #0F172A !important;
    background: rgba(15, 23, 42, 0.05) !important;
    box-shadow: none !important;
}

/* Menu Mobile em Modo Claro */
[data-theme='light'] .lp-mobile-menu {
    background: var(--bg-dark);
}

[data-theme='light'] .lp-mobile-menu-links a {
    color: #0f172a;
}

/* Rótulos e Pílulas */
[data-theme='light'] .sec-label {
    background: rgba(45, 212, 191, 0.1);
    border-color: rgba(45, 212, 191, 0.2);
}

/* Seção API Shopee - DESTAQUE VISUAL (Cores Invertidas) */
[data-theme='light'] .api-h1 {
    color: #ffffff !important;
}

[data-theme='light'] .api-p {
    color: #ccfbf1 !important;
    /* Tintura Teal bem clara */
}

[data-theme='light'] .api-tag {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
}

[data-theme='light'] .api-feat-icon {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: #ffffff !important;
}

[data-theme='light'] .api-feat-text b {
    color: #ffffff !important;
}

[data-theme='light'] .api-feat-text span {
    color: #99f6e4 !important;
}

[data-theme='light'] .api-glow-box {
    background: rgba(0, 0, 0, 0.15);
    border-color: rgba(255, 255, 255, 0.15);
}

[data-theme='light'] .api-status-badge {
    background: rgba(34, 197, 94, 0.2) !important;
    color: #4ade80 !important;
    border-color: rgba(34, 197, 94, 0.3) !important;
}

[data-theme='light'] #api-shopee .btn-hero-primary {
    background: #ffffff !important;
    color: #0f766e !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15) !important;
}

[data-theme='light'] #api-shopee .btn-hero-primary:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25) !important;
}