/* ============================================
   REALIPOTRADE — THEME SYSTEM
   ============================================ */

/* Dark Theme (Default) */
[data-theme="dark"] {
    /* Brand Colors */
    --color-primary: #08CB00;
    --color-primary-dark: #253900;
    --color-primary-glow: rgba(8, 203, 0, 0.3);

    /* Background Colors */
    --bg-main: #0A0A0A;
    --bg-card: #121212;
    --bg-card-hover: #1A1A1A;
    --bg-elevated: #1E1E1E;
    --bg-input: #1A1A1A;
    --bg-sidebar: #0D0D0D;
    --bg-navbar: rgba(10, 10, 10, 0.95);

    /* Text Colors */
    --text-primary: #EEEEEE;
    --text-secondary: #999999;
    --text-muted: #666666;
    --text-inverse: #0A0A0A;

    /* Border Colors */
    --border-color: #2A2A2A;
    --border-light: #1E1E1E;

    /* Status Colors */
    --color-success: #00E676;
    --color-warning: #FFC107;
    --color-error: #FF3B3B;
    --color-info: #29B6F6;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 20px rgba(8, 203, 0, 0.15);

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #08CB00, #00E676);
    --gradient-card: linear-gradient(180deg, #121212 0%, #0D0D0D 100%);
    --gradient-glow: radial-gradient(circle at 50% 0%, rgba(8, 203, 0, 0.05), transparent 70%);

    /* Chart colors */
    --chart-up: #08CB00;
    --chart-down: #FF3B3B;
    --chart-grid: #1E1E1E;
}

/* Light Theme */
[data-theme="light"] {
    --color-primary: #08CB00;
    --color-primary-dark: #E8F5E9;
    --color-primary-glow: rgba(8, 203, 0, 0.15);

    --bg-main: #F5F5F5;
    --bg-card: #FFFFFF;
    --bg-card-hover: #FAFAFA;
    --bg-elevated: #FFFFFF;
    --bg-input: #F5F5F5;
    --bg-sidebar: #FFFFFF;
    --bg-navbar: rgba(255, 255, 255, 0.95);

    --text-primary: #1A1A1A;
    --text-secondary: #666666;
    --text-muted: #999999;
    --text-inverse: #FFFFFF;

    --border-color: #E0E0E0;
    --border-light: #F0F0F0;

    --color-success: #00C853;
    --color-warning: #FF8F00;
    --color-error: #D50000;
    --color-info: #0091EA;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
    --shadow-glow: 0 0 20px rgba(8, 203, 0, 0.1);

    --gradient-primary: linear-gradient(135deg, #08CB00, #00C853);
    --gradient-card: linear-gradient(180deg, #FFFFFF 0%, #FAFAFA 100%);
    --gradient-glow: radial-gradient(circle at 50% 0%, rgba(8, 203, 0, 0.03), transparent 70%);

    --chart-up: #08CB00;
    --chart-down: #D50000;
    --chart-grid: #E0E0E0;
}

/* CSS Transition */
*, *::before, *::after {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}