/* Theme Variables */
:root, body[data-theme="dark"] {
    /* Dark theme (default) */
    --bg-primary: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    --bg-secondary: rgba(255, 255, 255, 0.05);
    --bg-navbar: rgba(26, 26, 46, 0.95);
    --text-primary: #e0e0e0;
    --text-secondary: #aaa;
    --border-color: rgba(255, 255, 255, 0.1);
    --accent-color: #ffd700;
    --card-bg: rgba(255, 255, 255, 0.05);
}

body[data-theme="light"] {
    /* Light theme */
    --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #e8eaf0 100%);
    --bg-secondary: rgba(0, 0, 0, 0.05);
    --bg-navbar: rgba(255, 255, 255, 0.95);
    --text-primary: #2c3e50;
    --text-secondary: #666;
    --border-color: rgba(0, 0, 0, 0.1);
    --accent-color: #ffd700;
    --card-bg: rgba(255, 255, 255, 0.9);
}

/* Apply theme variables with !important to override style.css */
body {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

.navbar {
    background: var(--bg-navbar) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

.nav-link {
    color: var(--text-primary) !important;
}

.nav-link:hover {
    color: var(--accent-color) !important;
}

.hero-section,
.card,
.settings-container,
.form-container,
.message-container,
.group-card,
.profile-header,
.profile-card,
.request-card {
    background: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
}

.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

.form-help,
.text-muted,
.rating-text,
.user-stats,
.user-id {
    color: var(--text-secondary) !important;
}

h1, h2, h3, h4, h5, h6,
.user-name,
.profile-username,
.form-label {
    color: var(--text-primary) !important;
}