/**
 * ============================================================================
 * 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 — inherited from tokens.css, no overrides needed */

    /* 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);
    background: var(--surface-base);
    color: var(--text-secondary);
}
h1, h2, h3, h4 {
    color: var(--text-primary);
}

/* 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);
    }
}