/* ============================================
   VARIABLES.CSS
   NovaTrade Pro - CSS Variables & Theme
   ============================================ */

:root {
    /* ===== COLORS - Background ===== */
    --bg: #04060f;
    --bg2: rgba(6, 9, 24, 0.8);
    --card: rgba(10, 14, 32, 0.6);
    --card-hover: rgba(14, 19, 44, 0.75);

    /* ===== COLORS - Text ===== */
    --t1: #f0f4ff;
    --t2: #b8c5e0;
    --t3: #5a6a8a;

    /* ===== COLORS - Primary (Blue) ===== */
    --blue: #6366f1;
    --blue-l: #818cf8;
    --blue-d: #4f46e5;

    /* ===== COLORS - Green ===== */
    --green: #10b981;
    --green-l: #34d399;
    --green-d: #059669;

    /* ===== COLORS - Red ===== */
    --red: #f43f5e;
    --red-l: #fb7185;
    --red-d: #e11d48;

    /* ===== COLORS - Amber ===== */
    --amber: #f59e0b;
    --amber-l: #fbbf24;

    /* ===== COLORS - Purple ===== */
    --purple: #a855f7;

    /* ===== COLORS - Cyan ===== */
    --cyan: #06b6d4;

    /* ===== GRADIENTS ===== */
    --gblue: linear-gradient(135deg, #4338ca, #6366f1, #818cf8);
    --ggreen: linear-gradient(135deg, #059669, #10b981);
    --gred: linear-gradient(135deg, #be123c, #f43f5e);
    --gcard: linear-gradient(160deg, rgba(10, 14, 32, 0.7) 0%, rgba(6, 9, 24, 0.6) 100%);

    /* ===== BORDERS ===== */
    --border: rgba(99, 102, 241, 0.12);
    --border2: rgba(255, 255, 255, 0.06);

    /* ===== SHADOWS ===== */
    --sh-sm: 0 2px 12px rgba(0, 0, 0, 0.4);
    --sh-md: 0 4px 24px rgba(0, 0, 0, 0.5);
    --sh-lg: 0 8px 40px rgba(0, 0, 0, 0.65);
    --sh-glow: 0 0 30px rgba(99, 102, 241, 0.12);

    /* ===== BORDER RADIUS ===== */
    --r: 16px;
    --r-sm: 12px;
    --r-lg: 22px;

    /* ===== FONTS ===== */
    --font-primary: 'Inter', -apple-system, sans-serif;
    --font-display: 'Space Grotesk', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    /* ===== FONT SIZES ===== */
    --fs-xs: 8px;
    --fs-sm: 10px;
    --fs-base: 13px;
    --fs-md: 16px;
    --fs-lg: 20px;
    --fs-xl: 30px;
    --fs-2xl: 36px;

    /* ===== SPACING ===== */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-8: 32px;
    --sp-10: 40px;

    /* ===== Z-INDEX LAYERS ===== */
    --z-base: 1;
    --z-page: 10;
    --z-header: 100;
    --z-nav: 200;
    --z-modal: 2000;
    --z-fullpage: 1500;
    --z-toast: 99999;
    --z-auth: 10000;
    --z-banned: 9999;

    /* ===== TRANSITIONS ===== */
    --transition-fast: 0.15s;
    --transition-base: 0.25s;
    --transition-slow: 0.4s;
    --transition-bounce: 0.3s cubic-bezier(0.16, 1, 0.3, 1);

    /* ===== OPACITY ===== */
    --opacity-disabled: 0.5;
    --opacity-subtle: 0.3;
    --opacity-visible: 0.8;

    /* ===== BLUR ===== */
    --blur-sm: 4px;
    --blur-md: 16px;
    --blur-lg: 24px;
    --blur-xl: 30px;

    /* ===== BACKDROP FILTER ===== */
    --backdrop-light: blur(24px) saturate(140%);
    --backdrop-heavy: blur(30px) saturate(160%);

    /* ===== CHART COLORS ===== */
    --chart-up: #10b981;
    --chart-down: #f43f5e;
    --chart-grid: rgba(255, 255, 255, 0.04);
    --chart-text: #5a6a8a;

    /* ===== AUTH COLORS ===== */
    --auth-bg: rgba(2, 3, 10, 0.95);
    --auth-card: rgba(8, 12, 30, 0.9);
    --auth-border: rgba(255, 255, 255, 0.08);

    /* ===== BANNED SCREEN ===== */
    --banned-bg: #04060f;
    --banned-border: rgba(244, 63, 94, 0.3);

    /* ===== SUCCESS / ERROR / WARNING ===== */
    --success-bg: rgba(16, 185, 129, 0.07);
    --success-border: rgba(16, 185, 129, 0.18);
    --success-text: var(--green-l);

    --error-bg: rgba(244, 63, 94, 0.07);
    --error-border: rgba(244, 63, 94, 0.18);
    --error-text: var(--red-l);

    --warning-bg: rgba(245, 158, 11, 0.07);
    --warning-border: rgba(245, 158, 11, 0.18);
    --warning-text: var(--amber-l);

    /* ===== INPUT ===== */
    --input-bg: rgba(4, 6, 18, 0.6);
    --input-border: rgba(255, 255, 255, 0.08);
    --input-focus-border: rgba(99, 102, 241, 0.5);
    --input-focus-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);

    /* ===== CARD ===== */
    --card-bg: rgba(10, 14, 32, 0.6);
    --card-border: rgba(255, 255, 255, 0.06);
    --card-hover-border: rgba(99, 102, 241, 0.2);

    /* ===== BUTTON ===== */
    --btn-bg: rgba(16, 20, 48, 0.7);
    --btn-border: rgba(255, 255, 255, 0.08);
    --btn-hover-bg: rgba(24, 30, 68, 0.8);
    --btn-hover-border: rgba(99, 102, 241, 0.35);

    /* ===== BADGE ===== */
    --badge-green-bg: rgba(16, 185, 129, 0.14);
    --badge-green-border: rgba(16, 185, 129, 0.22);
    --badge-red-bg: rgba(244, 63, 94, 0.14);
    --badge-red-border: rgba(244, 63, 94, 0.22);
    --badge-amber-bg: rgba(245, 158, 11, 0.14);
    --badge-amber-border: rgba(245, 158, 11, 0.22);
    --badge-blue-bg: rgba(99, 102, 241, 0.18);
    --badge-blue-border: rgba(99, 102, 241, 0.28);
    --badge-purple-bg: rgba(168, 85, 247, 0.18);
    --badge-purple-border: rgba(168, 85, 247, 0.28);
    --badge-cyan-bg: rgba(6, 182, 212, 0.18);
    --badge-cyan-border: rgba(6, 182, 212, 0.28);

    /* ===== NAVIGATION ===== */
    --nav-bg: rgba(6, 8, 20, 0.85);
    --nav-border: rgba(255, 255, 255, 0.06);
    --nav-shadow: 0 -4px 40px rgba(0, 0, 0, 0.7);

    /* ===== MODAL ===== */
    --modal-overlay: rgba(2, 3, 10, 0.82);
    --modal-bg: rgba(8, 12, 30, 0.96);
    --modal-border: rgba(255, 255, 255, 0.08);
    --modal-shadow: 0 -20px 60px rgba(0, 0, 0, 0.8);

    /* ===== HEADER ===== */
    --header-bg: rgba(4, 6, 15, 0.7);
    --header-border: rgba(255, 255, 255, 0.05);
    --header-shadow: 0 1px 0 rgba(99, 102, 241, 0.08);

    /* ===== P2P ===== */
    --p2p-locked-color: var(--amber-l);
    --p2p-released-color: var(--green-l);

    /* ===== PROFIT/LOSS ===== */
    --pnl-positive-bg: rgba(16, 185, 129, 0.14);
    --pnl-positive-border: rgba(16, 185, 129, 0.22);
    --pnl-negative-bg: rgba(244, 63, 94, 0.14);
    --pnl-negative-border: rgba(244, 63, 94, 0.22);

    /* ===== BINARY OPTIONS ===== */
    --binary-up-bg: rgba(16, 185, 129, 0.14);
    --binary-up-border: rgba(16, 185, 129, 0.28);
    --binary-down-bg: rgba(244, 63, 94, 0.14);
    --binary-down-border: rgba(244, 63, 94, 0.28);

    /* ===== CHAT ===== */
    --chat-mine-bg: rgba(99, 102, 241, 0.18);
    --chat-mine-border: rgba(99, 102, 241, 0.22);
    --chat-other-bg: rgba(255, 255, 255, 0.06);
    --chat-other-border: rgba(255, 255, 255, 0.07);
    --chat-system-bg: rgba(245, 158, 11, 0.08);
    --chat-system-border: rgba(245, 158, 11, 0.14);

    /* ===== SALARY ===== */
    --salary-salaried-bg: rgba(168, 85, 247, 0.18);
    --salary-salaried-border: rgba(168, 85, 247, 0.28);
    --salary-salaried-text: #d8b4fe;
    --salary-non-salaried-bg: rgba(6, 182, 212, 0.18);
    --salary-non-salaried-border: rgba(6, 182, 212, 0.28);
    --salary-non-salaried-text: #67e8f9;

    /* ===== UNLOCK REQUESTS ===== */
    --unlock-pending-border: var(--amber);
    --unlock-approved-border: var(--green);
    --unlock-rejected-border: var(--red);

    /* ===== TOAST ===== */
    --toast-bg: rgba(8, 12, 30, 0.97);
    --toast-border: rgba(99, 102, 241, 0.3);
    --toast-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);

    /* ===== EMPTY STATE ===== */
    --empty-color: var(--t3);
    --empty-icon-opacity: 0.2;

    /* ===== DIVIDER ===== */
    --divider-color: rgba(255, 255, 255, 0.05);

    /* ===== SCROLLBAR ===== */
    --scrollbar-thumb: rgba(255, 255, 255, 0.1);
    --scrollbar-thumb-hover: rgba(255, 255, 255, 0.2);

    /* ===== LOADING ===== */
    --loading-dot-bg: var(--blue-l);

    /* ===== PROFILE ===== */
    --profile-avatar-bg: var(--gblue);
    --profile-cover-bg: linear-gradient(160deg, #1a1a4e 0%, #0d0d2b 50%, #060814 100%);

    /* ===== SURVEY ===== */
    --survey-option-bg: rgba(255, 255, 255, 0.03);
    --survey-option-border: rgba(255, 255, 255, 0.05);
    --survey-option-hover-bg: rgba(99, 102, 241, 0.08);
    --survey-option-hover-border: rgba(99, 102, 241, 0.22);

    /* ===== PAYMENT ===== */
    --payment-opt-bg: rgba(255, 255, 255, 0.03);
    --payment-opt-border: rgba(255, 255, 255, 0.05);
    --payment-opt-selected-bg: rgba(99, 102, 241, 0.12);
    --payment-opt-selected-border: rgba(99, 102, 241, 0.35);

    /* ===== NOTIFICATION BADGE ===== */
    --notif-badge-bg: var(--red);
    --notif-badge-text: #fff;

    /* ===== PROGRESS BAR ===== */
    --progress-bg: rgba(255, 255, 255, 0.06);
    --progress-fill: var(--gblue);

    /* ===== PRICE ===== */
    --price-color: var(--blue-l);
    --price-shadow: 0 0 20px rgba(99, 102, 241, 0.3);

    /* ===== BALANCE ===== */
    --balance-gradient: linear-gradient(135deg, #f0f4ff, #818cf8);

    /* ===== ORDER ROW ===== */
    --order-row-bg: rgba(255, 255, 255, 0.03);
    --order-row-border: rgba(255, 255, 255, 0.04);
    --order-row-hover-bg: rgba(99, 102, 241, 0.06);
    --order-row-hover-border: rgba(99, 102, 241, 0.15);
    --order-row-border-left: rgba(99, 102, 241, 0.4);
    --order-row-released-border-left: var(--green);

    /* ===== AD CARD ===== */
    --ad-card-bg: rgba(255, 255, 255, 0.03);
    --ad-card-border: rgba(255, 255, 255, 0.05);
    --ad-card-hover-border: rgba(99, 102, 241, 0.25);
    --ad-card-hover-bg: rgba(99, 102, 241, 0.07);

    /* ===== COIN OPTION ===== */
    --coin-option-hover-bg: rgba(99, 102, 241, 0.06);
    --coin-option-hover-border: rgba(99, 102, 241, 0.15);
    --coin-option-selected-border: rgba(99, 102, 241, 0.3);
    --coin-option-selected-bg: rgba(99, 102, 241, 0.1);

    /* ===== ACTIVE TRADE ===== */
    --active-trade-bg: rgba(255, 255, 255, 0.03);
    --active-trade-border: rgba(99, 102, 241, 0.2);
    --active-trade-border-left: var(--blue-l);
    --active-trade-hover-border: rgba(99, 102, 241, 0.35);
    --active-trade-hover-bg: rgba(99, 102, 241, 0.06);

    /* ===== TRADE MODE TABS ===== */
    --trade-tabs-bg: rgba(0, 0, 0, 0.35);
    --trade-tab-spot-bg: rgba(16, 185, 129, 0.2);
    --trade-tab-spot-border: rgba(16, 185, 129, 0.28);
    --trade-tab-spot-text: var(--green-l);
    --trade-tab-futures-bg: rgba(99, 102, 241, 0.2);
    --trade-tab-futures-border: rgba(99, 102, 241, 0.28);
    --trade-tab-futures-text: var(--blue-l);
    --trade-tab-binary-bg: rgba(168, 85, 247, 0.2);
    --trade-tab-binary-border: rgba(168, 85, 247, 0.28);
    --trade-tab-binary-text: #d8b4fe;

    /* ===== FILTER CHIP ===== */
    --filter-chip-bg: rgba(255, 255, 255, 0.05);
    --filter-chip-active-bg: rgba(99, 102, 241, 0.18);
    --filter-chip-active-border: rgba(99, 102, 241, 0.28);
    --filter-chip-active-text: var(--blue-l);

    /* ===== TIME FRAME CHIP ===== */
    --tf-chip-bg: rgba(255, 255, 255, 0.05);
    --tf-chip-active-bg: rgba(99, 102, 241, 0.2);
    --tf-chip-active-border: rgba(99, 102, 241, 0.3);
    --tf-chip-active-text: var(--blue-l);

    /* ===== LEVERAGE BUTTON ===== */
    --lev-btn-bg: rgba(255, 255, 255, 0.05);
    --lev-btn-border: rgba(255, 255, 255, 0.07);
    --lev-btn-active-bg: rgba(245, 158, 11, 0.2);
    --lev-btn-active-border: rgba(245, 158, 11, 0.3);
    --lev-btn-active-text: var(--amber-l);

    /* ===== BINARY DURATION ===== */
    --binary-dur-bg: rgba(255, 255, 255, 0.05);
    --binary-dur-border: rgba(255, 255, 255, 0.07);
    --binary-dur-active-bg: rgba(99, 102, 241, 0.2);
    --binary-dur-active-border: rgba(99, 102, 241, 0.35);
    --binary-dur-active-text: var(--blue-l);

    /* ===== COUNTDOWN ===== */
    --countdown-bg: rgba(0, 0, 0, 0.35);
    --countdown-border: rgba(245, 158, 11, 0.15);
    --countdown-text: var(--amber-l);
    --countdown-shadow: 0 0 20px rgba(245, 158, 11, 0.4);

    /* ===== STAT CARD ===== */
    --stat-card-bg: rgba(0, 0, 0, 0.28);
    --stat-card-border: rgba(255, 255, 255, 0.04);
    --stat-card-hover-border: rgba(99, 102, 241, 0.15);
    --stat-card-hover-bg: rgba(99, 102, 241, 0.04);
}

/* ===== LIGHT MODE OVERRIDES ===== */
@media (prefers-color-scheme: light) {
    :root {
        --bg: #f0f4ff;
        --bg2: rgba(255, 255, 255, 0.8);
        --card: rgba(255, 255, 255, 0.8);
        --card-hover: rgba(255, 255, 255, 0.9);
        --t1: #1a1a3e;
        --t2: #4a4a6e;
        --t3: #8a8aaa;
        --border: rgba(99, 102, 241, 0.15);
        --border2: rgba(0, 0, 0, 0.06);
        --gcard: linear-gradient(160deg, rgba(255, 255, 255, 0.85) 0%, rgba(245, 248, 255, 0.8) 100%);
        --sh-sm: 0 2px 12px rgba(0, 0, 0, 0.06);
        --sh-md: 0 4px 24px rgba(0, 0, 0, 0.08);
        --sh-lg: 0 8px 40px rgba(0, 0, 0, 0.1);
        --sh-glow: 0 0 30px rgba(99, 102, 241, 0.06);
        --header-bg: rgba(255, 255, 255, 0.85);
        --header-border: rgba(0, 0, 0, 0.06);
        --nav-bg: rgba(255, 255, 255, 0.85);
        --nav-border: rgba(0, 0, 0, 0.06);
        --nav-shadow: 0 -4px 40px rgba(0, 0, 0, 0.06);
        --input-bg: rgba(255, 255, 255, 0.8);
        --input-border: rgba(0, 0, 0, 0.08);
        --input-focus-border: rgba(99, 102, 241, 0.5);
        --input-focus-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
        --card-bg: rgba(255, 255, 255, 0.8);
        --card-border: rgba(0, 0, 0, 0.06);
        --card-hover-border: rgba(99, 102, 241, 0.2);
        --btn-bg: rgba(0, 0, 0, 0.04);
        --btn-border: rgba(0, 0, 0, 0.08);
        --btn-hover-bg: rgba(0, 0, 0, 0.08);
        --btn-hover-border: rgba(99, 102, 241, 0.25);
        --modal-overlay: rgba(255, 255, 255, 0.85);
        --modal-bg: rgba(255, 255, 255, 0.95);
        --modal-border: rgba(0, 0, 0, 0.06);
        --modal-shadow: 0 -20px 60px rgba(0, 0, 0, 0.08);
        --auth-bg: rgba(255, 255, 255, 0.95);
        --auth-card: rgba(255, 255, 255, 0.95);
        --auth-border: rgba(0, 0, 0, 0.06);
        --order-row-bg: rgba(0, 0, 0, 0.02);
        --order-row-border: rgba(0, 0, 0, 0.06);
        --order-row-hover-bg: rgba(99, 102, 241, 0.04);
        --order-row-hover-border: rgba(99, 102, 241, 0.15);
        --stat-card-bg: rgba(0, 0, 0, 0.04);
        --stat-card-border: rgba(0, 0, 0, 0.06);
        --toast-bg: rgba(255, 255, 255, 0.95);
        --toast-border: rgba(99, 102, 241, 0.2);
        --toast-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        --chat-mine-bg: rgba(99, 102, 241, 0.1);
        --chat-mine-border: rgba(99, 102, 241, 0.15);
        --chat-other-bg: rgba(0, 0, 0, 0.04);
        --chat-other-border: rgba(0, 0, 0, 0.06);
        --chat-system-bg: rgba(245, 158, 11, 0.06);
        --chat-system-border: rgba(245, 158, 11, 0.12);
        --profile-cover-bg: linear-gradient(160deg, #e8ecf8 0%, #d0d8f0 50%, #c0c8e8 100%);
        --scrollbar-thumb: rgba(0, 0, 0, 0.1);
        --scrollbar-thumb-hover: rgba(0, 0, 0, 0.2);
        --divider-color: rgba(0, 0, 0, 0.06);
        --survey-option-bg: rgba(0, 0, 0, 0.02);
        --survey-option-border: rgba(0, 0, 0, 0.06);
        --survey-option-hover-bg: rgba(99, 102, 241, 0.04);
        --survey-option-hover-border: rgba(99, 102, 241, 0.15);
        --payment-opt-bg: rgba(0, 0, 0, 0.02);
        --payment-opt-border: rgba(0, 0, 0, 0.06);
        --payment-opt-selected-bg: rgba(99, 102, 241, 0.08);
        --payment-opt-selected-border: rgba(99, 102, 241, 0.2);
        --active-trade-bg: rgba(0, 0, 0, 0.02);
        --active-trade-border: rgba(99, 102, 241, 0.2);
        --active-trade-hover-bg: rgba(99, 102, 241, 0.04);
        --active-trade-hover-border: rgba(99, 102, 241, 0.3);
        --ad-card-bg: rgba(0, 0, 0, 0.02);
        --ad-card-border: rgba(0, 0, 0, 0.06);
        --ad-card-hover-bg: rgba(99, 102, 241, 0.04);
        --ad-card-hover-border: rgba(99, 102, 241, 0.15);
        --trade-tabs-bg: rgba(0, 0, 0, 0.04);
        --countdown-bg: rgba(0, 0, 0, 0.04);
        --countdown-border: rgba(245, 158, 11, 0.2);
        --progress-bg: rgba(0, 0, 0, 0.06);
        --filter-chip-bg: rgba(0, 0, 0, 0.04);
        --tf-chip-bg: rgba(0, 0, 0, 0.04);
        --lev-btn-bg: rgba(0, 0, 0, 0.04);
        --lev-btn-border: rgba(0, 0, 0, 0.06);
        --binary-dur-bg: rgba(0, 0, 0, 0.04);
        --binary-dur-border: rgba(0, 0, 0, 0.06);
        --balance-gradient: linear-gradient(135deg, #1a1a3e, #6366f1);
    }
}

/* ===== HIGH CONTRAST MODE ===== */
@media (prefers-contrast: high) {
    :root {
        --border: rgba(255, 255, 255, 0.4);
        --border2: rgba(255, 255, 255, 0.3);
        --card-border: rgba(255, 255, 255, 0.3);
        --btn-border: rgba(255, 255, 255, 0.3);
        --input-border: rgba(255, 255, 255, 0.3);
    }
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-fast: 0s;
        --transition-base: 0s;
        --transition-slow: 0s;
        --transition-bounce: 0s;
    }
}