/**
 * BitForward Theme Variables and Switcher Styles
 * Supports switching between dark crypto theme and light theme
 */

/* Base Theme Variables - Light and Dark */
:root {
    /* Light Theme Variables (Default) */
    --light-bg-primary: #F8FAFC;
    --light-bg-secondary: #F1F5F9;
    --light-bg-tertiary: #E2E8F0;
    --light-text-primary: #0F172A;
    --light-text-secondary: #334155;
    --light-text-tertiary: #64748B;
    --light-border: #CBD5E1;
    --light-accent-primary: #3B82F6;
    --light-accent-secondary: #06B6D4;
    --light-card-bg: #FFFFFF;
    --light-shadow: rgba(0, 0, 0, 0.1);
    
    /* Dark Theme Variables (Crypto) */
    --dark-bg-primary: #0F172A;
    --dark-bg-secondary: #1E293B;
    --dark-bg-tertiary: #334155;
    --dark-text-primary: #F8FAFC;
    --dark-text-secondary: #E2E8F0;
    --dark-text-tertiary: #94A3B8;
    --dark-border: rgba(148, 163, 184, 0.2);
    --dark-accent-primary: #06B6D4;
    --dark-accent-secondary: #3B82F6;
    --dark-card-bg: rgba(15, 23, 42, 0.7);
    --dark-shadow: rgba(6, 182, 212, 0.2);
    
    /* Shared Variables */
    --success: #10B981;
    --error: #EF4444;
    --warning: #F59E0B;
    --info: #3B82F6;
}

/* Apply variables based on theme class */
body.light-theme {
    --bg-primary: var(--light-bg-primary);
    --bg-secondary: var(--light-bg-secondary);
    --bg-tertiary: var(--light-bg-tertiary);
    --text-primary: var(--light-text-primary);
    --text-secondary: var(--light-text-secondary);
    --text-tertiary: var(--light-text-tertiary);
    --border: var(--light-border);
    --accent-primary: var(--light-accent-primary);
    --accent-secondary: var(--light-accent-secondary);
    --card-bg: var(--light-card-bg);
    --shadow: var(--light-shadow);
    
    background: var(--bg-primary);
    color: var(--text-primary);
}

body.dark-theme {
    --bg-primary: var(--dark-bg-primary);
    --bg-secondary: var(--dark-bg-secondary);
    --bg-tertiary: var(--dark-bg-tertiary);
    --text-primary: var(--dark-text-primary);
    --text-secondary: var(--dark-text-secondary);
    --text-tertiary: var(--dark-text-tertiary);
    --border: var(--dark-border);
    --accent-primary: var(--dark-accent-primary);
    --accent-secondary: var(--dark-accent-secondary);
    --card-bg: var(--dark-card-bg);
    --shadow: var(--dark-shadow);
    
    background: linear-gradient(135deg, var(--dark-bg-primary) 0%, var(--dark-bg-secondary) 100%);
    color: var(--text-primary);
}

/* Theme Toggle Button */
.theme-toggle {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--text-primary);
}

.theme-toggle:hover {
    background: rgba(var(--accent-primary-rgb, 6, 182, 212), 0.1);
    transform: scale(1.05);
}

.light-theme .theme-toggle {
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.3);
}

.dark-theme .theme-toggle {
    box-shadow: 0 0 10px rgba(6, 182, 212, 0.3);
}

.theme-toggle i {
    font-size: 1.2rem;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.light-theme .theme-toggle i {
    color: var(--light-accent-primary);
}

.dark-theme .theme-toggle i {
    color: var(--dark-accent-primary);
    text-shadow: 0 0 10px rgba(6, 182, 212, 0.5);
}

/* Theme Toggle Animation */
.theme-toggle i {
    animation: spin 0.5s ease-out;
}

@keyframes spin {
    0% {
        transform: rotate(0deg) scale(0.5);
        opacity: 0;
    }
    100% {
        transform: rotate(360deg) scale(1);
        opacity: 1;
    }
}

/* Transition helpers for smooth theme changes */
.theme-transition {
    transition: background-color 0.3s ease, 
                color 0.3s ease, 
                border-color 0.3s ease, 
                box-shadow 0.3s ease;
}

/* Common elements with theme adjustments */
.card, .panel, .modal-content, .dropdown-menu {
    background: var(--card-bg);
    color: var(--text-primary);
    border: 1px solid var(--border);
    box-shadow: 0 4px 12px var(--shadow);
}

.btn-primary {
    background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
    color: var(--dark-text-primary);
    border: none;
}

.btn-outline {
    background: transparent;
    color: var(--accent-primary);
    border: 1px solid var(--accent-primary);
}

.light-theme .btn-outline:hover {
    background: rgba(59, 130, 246, 0.1);
}

.dark-theme .btn-outline:hover {
    background: rgba(6, 182, 212, 0.1);
}

/* Tables */
table {
    background: var(--card-bg);
    color: var(--text-primary);
    border-color: var(--border);
}

th {
    background: var(--bg-secondary);
    color: var(--text-secondary);
}

/* Form elements */
input, select, textarea {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border);
}

input:focus, select:focus, textarea:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px rgba(var(--accent-primary-rgb, 6, 182, 212), 0.2);
}

/* Utility Classes */
.text-primary { color: var(--text-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-tertiary { color: var(--text-tertiary) !important; }
.text-accent { color: var(--accent-primary) !important; }

.bg-primary { background-color: var(--bg-primary) !important; }
.bg-secondary { background-color: var(--bg-secondary) !important; }
.bg-tertiary { background-color: var(--bg-tertiary) !important; }
.bg-accent { background-color: var(--accent-primary) !important; }

/* RGB Variables for opacity operations */
.light-theme {
    --accent-primary-rgb: 59, 130, 246;
    --accent-secondary-rgb: 6, 182, 212;
}

.dark-theme {
    --accent-primary-rgb: 6, 182, 212;
    --accent-secondary-rgb: 59, 130, 246;
}