/* ═══════════════════════════════════════════════════════════════════════════════
   APEX GLOBAL THEME - Unified Light/Dark Mode
   Applied across ALL pages for consistent theme switching
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────
   LIGHT MODE - Variable Overrides for ALL page design systems
   ───────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] {
    /* === Main page (luxury-design.css) === */
    --lux-void: #f8f6ff;
    --lux-deep: #f0ecff;
    --lux-base: #e8e4f8;
    --lux-elevated: #ffffff;
    --lux-surface: #f5f2ff;
    --lux-subtle: #e0dcf0;
    --lux-platinum: #1a1a24;
    --lux-silver: #3a3a48;
    --lux-muted: #6a6a78;
    --lux-dim: #9a9aa8;
    --glass-bg: rgba(255, 255, 255, 0.92);
    --glass-border: rgba(168, 85, 247, 0.12);

    /* === Shared dark base vars (swap, arena, otc, journey) === */
    --void: #f5f3ff;
    --deep: #eee9ff;
    --base: #e8e4f8;
    --surface: #ffffff;
    --surface-2: #f8f6ff;
    --elevated: #ffffff;
    --card: rgba(0, 0, 0, 0.03);
    --card-border: rgba(168, 85, 247, 0.15);
    --glass: rgba(0, 0, 0, 0.02);

    /* === Background vars (fleet, social, pixel-arcade, guardians) === */
    --bg: #f5f3ff;
    --surface-solid: #ffffff;
    --surface2: rgba(0, 0, 0, 0.03);

    /* === Premium UI vars (pricing, affiliate, subscribe, dashboard) === */
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-tertiary: #f1f5f9;
    --bg-card: rgba(0, 0, 0, 0.02);
    --bg-card-hover: rgba(0, 0, 0, 0.04);

    /* === Yield vars === */
    --dark: #f5f3ff;

    /* === Text colors - all systems === */
    --text: #1a1a2e;
    --text-bright: #0f172a;
    --text-glow: #1a1a2e;
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-tertiary: #64748b;
    --text-dim: #64748b;
    --text-muted: #94a3b8;

    /* === Border vars === */
    --border: rgba(0, 0, 0, 0.1);
    --border-color: rgba(0, 0, 0, 0.1);
    --border-color-strong: rgba(0, 0, 0, 0.2);
    --border-hover: rgba(168, 85, 247, 0.3);

    /* === Gradient overrides === */
    --gradient-card: linear-gradient(135deg, rgba(168, 85, 247, 0.06) 0%, rgba(236, 72, 153, 0.03) 100%);
    --glass-bg: rgba(255, 255, 255, 0.92);
    --glass-border: rgba(168, 85, 247, 0.12);

    /* === Glow adjustments for readability === */
    --glow-primary: 0 0 30px rgba(168, 85, 247, 0.15);
    --glow-accent: 0 0 30px rgba(16, 185, 129, 0.15);
    --accent-glow: rgba(99, 102, 241, 0.2);
    --green-glow: rgba(52, 211, 153, 0.15);
    --gold-glow: rgba(251, 191, 36, 0.15);
    --shadow-glow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* ─────────────────────────────────────────────────────────────────────────────
   LIGHT MODE - Element Overrides (catches hardcoded styles)
   ───────────────────────────────────────────────────────────────────────────── */

/* Body background */
[data-theme="light"] body {
    background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 50%, #f0ebff 100%) !important;
    color: #1a1a2e !important;
}

/* Fixed background elements (cosmic-bg, aurora, particles, etc.) */
[data-theme="light"] .cosmic-bg,
[data-theme="light"] .aurora,
[data-theme="light"] .particle-bg,
[data-theme="light"] .stars,
[data-theme="light"] .flow-accent,
[data-theme="light"] body::before {
    opacity: 0.15 !important;
}

/* All cards and surfaces */
[data-theme="light"] .card,
[data-theme="light"] .lux-card,
[data-theme="light"] .glass-card,
[data-theme="light"] .claim-card,
[data-theme="light"] .metric-card,
[data-theme="light"] .stat-card,
[data-theme="light"] .pool-card,
[data-theme="light"] .vault-card,
[data-theme="light"] .fleet-card,
[data-theme="light"] .game-card,
[data-theme="light"] .nft-card,
[data-theme="light"] .pricing-card,
[data-theme="light"] .tier-card,
[data-theme="light"] .feature-card,
[data-theme="light"] .quest-card,
[data-theme="light"] .achievement-card,
[data-theme="light"] .arena-card,
[data-theme="light"] .swap-container,
[data-theme="light"] .yield-card,
[data-theme="light"] .drip-card,
[data-theme="light"] .social-card,
[data-theme="light"] .post-card,
[data-theme="light"] .arcade-card,
[data-theme="light"] .otc-card,
[data-theme="light"] .companion-card,
[data-theme="light"] .milestone-card,
[data-theme="light"] .affiliate-card,
[data-theme="light"] .dashboard-card,
[data-theme="light"] .portfolio-card,
[data-theme="light"] [class*="-card"],
[data-theme="light"] [class*="_card"] {
    background: rgba(255, 255, 255, 0.85) !important;
    border-color: rgba(168, 85, 247, 0.12) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(168, 85, 247, 0.06) !important;
    color: #1a1a2e !important;
}

/* Sections and containers */
[data-theme="light"] .section,
[data-theme="light"] .container,
[data-theme="light"] .content,
[data-theme="light"] .main-content,
[data-theme="light"] .page-content,
[data-theme="light"] .wrapper,
[data-theme="light"] .panel,
[data-theme="light"] [class*="section"],
[data-theme="light"] [class*="container"]:not(.cosmic-bg):not([class*="nav"]) {
    color: #1a1a2e;
}

/* Headers and titles */
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] h5,
[data-theme="light"] h6 {
    color: #0f172a !important;
}

/* Preserve gradient text */
[data-theme="light"] [style*="-webkit-background-clip: text"],
[data-theme="light"] [style*="background-clip: text"],
[data-theme="light"] .gradient-text {
    color: unset !important;
}

/* Paragraphs and general text */
[data-theme="light"] p,
[data-theme="light"] span:not([class*="nav"]):not([style*="background-clip"]),
[data-theme="light"] li,
[data-theme="light"] td,
[data-theme="light"] th,
[data-theme="light"] label,
[data-theme="light"] .description,
[data-theme="light"] .subtitle {
    color: #334155;
}

/* Muted/secondary text */
[data-theme="light"] .text-muted,
[data-theme="light"] .text-dim,
[data-theme="light"] .text-secondary,
[data-theme="light"] [class*="muted"],
[data-theme="light"] [class*="dim"],
[data-theme="light"] small {
    color: #64748b !important;
}

/* Input fields */
[data-theme="light"] input,
[data-theme="light"] textarea,
[data-theme="light"] select {
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
    color: #1a1a2e !important;
}

[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder {
    color: #94a3b8 !important;
}

/* Tables */
[data-theme="light"] table {
    background: rgba(255, 255, 255, 0.8);
}

[data-theme="light"] tr:hover {
    background: rgba(168, 85, 247, 0.04) !important;
}

[data-theme="light"] th {
    background: rgba(168, 85, 247, 0.06) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] td {
    border-color: rgba(0, 0, 0, 0.06) !important;
}

/* Modals and overlays */
[data-theme="light"] .modal,
[data-theme="light"] .modal-content,
[data-theme="light"] .overlay-content,
[data-theme="light"] [class*="modal"] {
    background: rgba(255, 255, 255, 0.98) !important;
    border-color: rgba(168, 85, 247, 0.15) !important;
    color: #1a1a2e !important;
}

/* Page-specific headers/title bars */
[data-theme="light"] .page-title-bar,
[data-theme="light"] .header,
[data-theme="light"] .social-header,
[data-theme="light"] [class*="header"]:not(.apex-mobile-menu-header) {
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(168, 85, 247, 0.1) !important;
}

/* Stats and values */
[data-theme="light"] .stat-value,
[data-theme="light"] .metric-value,
[data-theme="light"] .balance,
[data-theme="light"] [class*="value"] {
    color: #0f172a !important;
}

/* Tabs and tab content */
[data-theme="light"] .tab,
[data-theme="light"] .tab-btn,
[data-theme="light"] [class*="tab"]:not([class*="tobacco"]) {
    color: #475569;
}

[data-theme="light"] .tab.active,
[data-theme="light"] .tab-btn.active,
[data-theme="light"] [class*="tab"].active:not([class*="tobacco"]) {
    color: #a855f7;
    background: rgba(168, 85, 247, 0.08);
}

/* Scrollbar for light mode */
[data-theme="light"] ::-webkit-scrollbar-track {
    background: #f1f5f9;
}

[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: rgba(168, 85, 247, 0.3);
}

/* Buttons - keep accent colors but soften backgrounds */
[data-theme="light"] button:not([class*="nav"]):not([class*="cta"]):not([class*="wallet"]):not([class*="theme"]):not([style*="gradient"]) {
    color: #334155;
}

/* Footer */
[data-theme="light"] footer,
[data-theme="light"] .footer {
    background: rgba(255, 255, 255, 0.9) !important;
    color: #475569 !important;
    border-color: rgba(168, 85, 247, 0.1) !important;
}

/* Tooltips */
[data-theme="light"] .tooltip,
[data-theme="light"] [class*="tooltip"] {
    background: rgba(255, 255, 255, 0.98) !important;
    color: #1a1a2e !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
}

/* Badges and tags */
[data-theme="light"] .badge,
[data-theme="light"] .tag,
[data-theme="light"] [class*="badge"],
[data-theme="light"] [class*="tag"] {
    background: rgba(168, 85, 247, 0.08) !important;
    color: #7c3aed !important;
}

/* Dividers */
[data-theme="light"] hr,
[data-theme="light"] .divider,
[data-theme="light"] [class*="divider"] {
    border-color: rgba(0, 0, 0, 0.08) !important;
    background: rgba(0, 0, 0, 0.08) !important;
}

/* Pixel Arcade specific - keep retro feel but lighten */
[data-theme="light"] .header[style*="1a1a2e"] {
    background: linear-gradient(180deg, #ede9fe 0%, #f5f3ff 100%) !important;
}

/* Swap party mode - tone down neon in light */
[data-theme="light"] .swap-card,
[data-theme="light"] .party-card {
    background: rgba(255, 255, 255, 0.9) !important;
}

/* Journey - special canvas page, just lighten overlay */
[data-theme="light"] #ui-layer {
    color: #1a1a2e;
}