/**
 * ============================================================================
 * QENEX UNIFIED DESIGN SYSTEM - GPTFinancial Integration Overlay
 * Version: 2.0.0
 * ============================================================================
 *
 * This overlay applies the unified design system to GPTFinancial domains
 * while preserving existing functionality. Use this for gradual migration.
 *
 * How to use:
 * 1. Keep existing <style> block in page
 * 2. Add design system CSS files AFTER the existing styles
 * 3. This overlay harmonizes the differences
 */

/* ============================================================================
   OVERRIDE EXISTING COLORS WITH DESIGN SYSTEM TOKENS
   ============================================================================ */

:root {
    /* Map existing variables to design system tokens */
    --bg-primary: var(--surface-base, #0f0618) !important;
    --bg-secondary: var(--surface-dark, #1a0d2e) !important;
    --bg-card: var(--surface-raised, rgba(42, 27, 61, 0.6)) !important;
    --bg-elevated: var(--surface-elevated, rgba(68, 49, 141, 0.3)) !important;

    /* Keep gold accent for premium feel but add design system accents */
    --accent-gold: #d4af37;
    --accent-blue: var(--brand-accent, #00F0FF) !important;
    --accent-cyan: var(--brand-accent, #00F0FF) !important;
    --accent-green: var(--color-success, #10b981) !important;
    --accent-red: var(--color-error, #ef4444) !important;

    /* Text colors - FORCED HIGH CONTRAST for dark theme readability */
    --text-primary: #F0F0F0 !important;
    --text-secondary: #E0E0E8 !important;
    --text-muted: #A9A9C9 !important;
    --color-text-primary: #F0F0F0 !important;
    --color-text-secondary: #A9A9A9 !important;

    /* Border aligned with design system */
    --border: var(--border-static, #3d2a5a) !important;

    /* Enhanced gradients */
    --gradient-gold: linear-gradient(135deg, #d4af37 0%, var(--brand-accent) 50%, #d4af37 100%);
    --gradient-premium: var(--gradient-button);
}

/* ============================================================================
   BODY & BACKGROUND ENHANCEMENTS
   ============================================================================ */

body {
    font-family: var(--font-body) !important;
    background: var(--surface-base) !important;
    color: #E0E0E8 !important;
}

/* CRITICAL: Force all text elements to be light colored for dark theme */
body, body p, body span, body div, body li, body td, body th,
body h1, body h2, body h3, body h4, body h5, body h6,
body label, body input, body textarea, body select {
    color: #E0E0E8 !important;
}

body h1, body h2, body h3, body h4 {
    color: #F0F0F0 !important;
}

/* Add subtle nebula effect */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 20% 80%, rgba(68, 49, 141, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(216, 59, 210, 0.1) 0%, transparent 40%);
    pointer-events: none;
    z-index: 0;
}

body > * {
    position: relative;
    z-index: 1;
}

/* ============================================================================
   NAVIGATION ENHANCEMENTS
   ============================================================================ */

.nav {
    background: var(--glass-bg) !important;
    backdrop-filter: var(--glass-blur) var(--glass-saturate) !important;
    -webkit-backdrop-filter: var(--glass-blur) var(--glass-saturate) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
}

.logo {
    background: var(--gradient-text) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.nav-cta {
    background: var(--gradient-button) !important;
    box-shadow: var(--glow-cyan-button) !important;
}

.nav-cta:hover {
    box-shadow: var(--glow-cyan-intense) !important;
    transform: translateY(-2px);
}

/* ============================================================================
   HERO SECTION ENHANCEMENTS
   ============================================================================ */

.hero {
    position: relative;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 30% 20%, rgba(0, 240, 255, 0.1) 0%, transparent 40%),
        radial-gradient(circle at 70% 80%, rgba(216, 59, 210, 0.08) 0%, transparent 40%);
    pointer-events: none;
}

.hero h1 span {
    background: var(--gradient-text) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

.hero-badge {
    background: var(--brand-accent-subtle) !important;
    border: 1px solid var(--border-default) !important;
    color: var(--brand-accent) !important;
}

/* ============================================================================
   CARD ENHANCEMENTS
   ============================================================================ */

.card {
    background: var(--surface-raised) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-lg) !important;
    transition: var(--transition-all-base) !important;
}

.card:hover {
    border-color: var(--border-default) !important;
    box-shadow: var(--glow-cyan-sm) !important;
}

.card-badge {
    background: var(--brand-accent-subtle) !important;
    color: var(--brand-accent) !important;
}

/* ============================================================================
   BUTTON ENHANCEMENTS
   ============================================================================ */

.search-btn,
.action-btn.primary,
.pricing-btn.gold {
    background: var(--gradient-button) !important;
    box-shadow: var(--glow-cyan-button) !important;
    transition: var(--transition-all-base) !important;
}

.search-btn:hover,
.action-btn.primary:hover,
.pricing-btn.gold:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--glow-cyan-intense) !important;
}

.action-btn.secondary,
.pricing-btn.outline {
    background: var(--surface-raised) !important;
    border: 1px solid var(--border-default) !important;
    transition: var(--transition-all-base) !important;
}

.action-btn.secondary:hover,
.pricing-btn.outline:hover {
    border-color: var(--brand-accent) !important;
    box-shadow: var(--glow-cyan-sm) !important;
}

/* ============================================================================
   SEARCH BOX ENHANCEMENTS
   ============================================================================ */

.search-box {
    background: var(--surface-raised) !important;
    border: 2px solid var(--border-subtle) !important;
    border-radius: var(--radius-lg) !important;
    transition: var(--transition-all-base) !important;
}

.search-box:focus-within {
    border-color: var(--brand-accent) !important;
    box-shadow: var(--glow-cyan) !important;
}

.search-input {
    color: var(--text-primary) !important;
}

.search-input::placeholder {
    color: var(--text-dim) !important;
}

.quick-symbol {
    background: var(--surface-elevated) !important;
    border: 1px solid var(--border-subtle) !important;
    transition: var(--transition-all-fast) !important;
}

.quick-symbol:hover {
    border-color: var(--brand-accent) !important;
    color: var(--brand-accent) !important;
}

/* ============================================================================
   INDICATORS & SIGNALS
   ============================================================================ */

.indicator-item {
    background: var(--surface-elevated) !important;
    border-radius: var(--radius-md) !important;
}

.signal-bullish {
    color: var(--color-success) !important;
}

.signal-bearish {
    color: var(--color-error) !important;
}

/* ============================================================================
   RECOMMENDATION BADGES
   ============================================================================ */

.recommendation-badge.buy {
    background: linear-gradient(135deg, var(--color-success-bg), rgba(16, 185, 129, 0.05)) !important;
    color: var(--color-success) !important;
    border: 2px solid var(--color-success) !important;
}

.recommendation-badge.sell {
    background: linear-gradient(135deg, var(--color-error-bg), rgba(239, 68, 68, 0.05)) !important;
    color: var(--color-error) !important;
    border: 2px solid var(--color-error) !important;
}

.recommendation-badge.hold {
    background: linear-gradient(135deg, var(--brand-accent-subtle), rgba(0, 240, 255, 0.05)) !important;
    color: var(--brand-accent) !important;
    border: 2px solid var(--brand-accent) !important;
}

/* ============================================================================
   PRICING SECTION
   ============================================================================ */

.pricing-section {
    background: var(--surface-dark) !important;
}

.pricing-card {
    background: var(--surface-raised) !important;
    border: 2px solid var(--border-subtle) !important;
    transition: var(--transition-all-base) !important;
}

.pricing-card:hover {
    border-color: var(--brand-accent) !important;
    transform: translateY(-6px) !important;
    box-shadow: var(--glow-cyan) !important;
}

.pricing-card.featured {
    border-color: var(--brand-accent) !important;
    background: linear-gradient(
        180deg,
        rgba(0, 240, 255, 0.1) 0%,
        var(--surface-raised) 30%
    ) !important;
}

.pricing-badge {
    background: var(--gradient-button) !important;
}

.pricing-card .price {
    background: var(--gradient-text) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* ============================================================================
   FOOTER
   ============================================================================ */

footer {
    background: var(--surface-base) !important;
    border-top: 1px solid var(--border-subtle) !important;
}

.footer-brand h3 {
    background: var(--gradient-text) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.footer-section a:hover {
    color: var(--brand-accent) !important;
}

/* ============================================================================
   LOADING STATE
   ============================================================================ */

.loading-overlay {
    background: var(--modal-backdrop) !important;
}

.loading-spinner {
    border-color: var(--border-static) !important;
    border-top-color: var(--brand-accent) !important;
}

/* ============================================================================
   LIVE TICKER
   ============================================================================ */

#live-ticker {
    background: var(--glass-bg) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border-top: 1px solid var(--border-subtle) !important;
}

/* ============================================================================
   CHART STYLING
   ============================================================================ */

.chart-container canvas {
    border-radius: var(--radius-md);
}

/* ============================================================================
   ANIMATIONS
   ============================================================================ */

@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.1);
    }
}