/**
 * 3DHubTR - Custom Color Theme
 * Based on Gray (#928DAB) and Steel Gray (#1F1C2C)
 */

:root {
    /* Main Color Palette */
    --steel-gray: #1F1C2C;
    --gray: #928DAB;
    --gray-light: #B8B3CA;
    --gray-dark: #6B6782;
    
    /* Background Colors */
    --bg-primary: #1F1C2C;
    --bg-secondary: #2A2738;
    --bg-tertiary: #353244;
    --bg-light: #3F3C50;
    
    /* Text Colors */
    --text-primary: #FFFFFF;
    --text-secondary: #E5E3ED;
    --text-muted: #928DAB;
    --text-dark: #6B6782;
    
    /* Accent Colors */
    --accent-primary: #928DAB;
    --accent-secondary: #B8B3CA;
    --accent-hover: #A8A3BD;
    
    /* Border & Divider */
    --border-color: rgba(146, 141, 171, 0.2);
    --border-light: rgba(146, 141, 171, 0.1);
    --border-strong: rgba(146, 141, 171, 0.4);
    
    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(31, 28, 44, 0.3);
    --shadow-md: 0 4px 16px rgba(31, 28, 44, 0.4);
    --shadow-lg: 0 8px 32px rgba(31, 28, 44, 0.5);
    --shadow-xl: 0 16px 48px rgba(31, 28, 44, 0.6);
    
    /* Glow Effects */
    --glow-primary: 0 0 20px rgba(146, 141, 171, 0.4);
    --glow-strong: 0 0 40px rgba(146, 141, 171, 0.6);
    
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #928DAB, #B8B3CA);
    --gradient-secondary: linear-gradient(135deg, #2A2738, #1F1C2C);
    --gradient-accent: linear-gradient(135deg, #928DAB 0%, #6B6782 100%);
    
    /* Status Colors (adjusted for theme) */
    --success-color: #6EBF8B;
    --error-color: #E57373;
    --warning-color: #FFB74D;
    --info-color: #64B5F6;
}

/* Dark Theme Specific Overrides */
[data-theme="dark"] {
    --bg-primary: #1F1C2C;
    --bg-secondary: #2A2738;
    --text-primary: #FFFFFF;
    --accent-color: #928DAB;
}

/* Light Theme (if needed) */
[data-theme="light"] {
    --bg-primary: #F5F4F7;
    --bg-secondary: #FFFFFF;
    --bg-tertiary: #E9E8ED;
    --text-primary: #1F1C2C;
    --text-secondary: #2A2738;
    --text-muted: #6B6782;
    --accent-primary: #6B6782;
    --border-color: rgba(146, 141, 171, 0.3);
}

/* Global Resets with New Theme */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--gray) var(--bg-secondary);
}

body {
    background-color: var(--bg-primary) !important;
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

/* Force dark theme on all white backgrounds */
.page-header,
.featured-models,
.recent-models,
.categories-section,
.services-section,
.models-section,
.search-filters,
.about,
.contact-section,
.legal-content,
.legal-container,
.legal-main,
.legal-sidebar,
.help-content,
.faq-section,
.map-section,
.timeline-section,
.values-section,
.team-section,
.mission-section,
.vision-section,
.collections-section,
.upload-section,
.model-detail-section,
.comments-section,
.related-models-section,
.upload-guidelines {
    background: var(--bg-primary) !important;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary);
    font-weight: 700;
}

p {
    color: var(--text-secondary);
}

a {
    color: var(--accent-primary);
    transition: color 0.3s ease;
}

a:hover {
    color: var(--accent-secondary);
}

/* Buttons */
.btn-primary {
    background: var(--gradient-primary);
    color: var(--text-primary);
    border: none;
    box-shadow: var(--shadow-md);
}

.btn-primary:hover {
    box-shadow: var(--glow-strong);
    transform: translateY(-2px);
}

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

.btn-outline:hover {
    background: var(--accent-primary);
    color: var(--text-primary);
}

/* Cards */
.card, 
.model-card, 
.product-card,
.category-card,
.collection-card,
.service-card,
.value-card,
.guideline-card,
.quick-link,
.forum-post,
.faq-item,
.comment-item,
.timeline-content,
.team-member {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: var(--shadow-md) !important;
}

.card:hover, 
.model-card:hover, 
.product-card:hover,
.category-card:hover,
.collection-card:hover {
    border-color: var(--accent-primary) !important;
    box-shadow: var(--glow-primary) !important;
}

/* Inputs */
input, 
textarea, 
select,
.form-input,
.form-textarea,
.form-select,
.search-input {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

input:focus, 
textarea:focus, 
select:focus,
.form-input:focus,
.form-textarea:focus,
.form-select:focus,
.search-input:focus {
    border-color: var(--accent-primary) !important;
    box-shadow: var(--glow-primary) !important;
    outline: none !important;
}

input::placeholder, 
textarea::placeholder,
.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--text-muted) !important;
}

/* Navbar */
.navbar {
    background: var(--bg-secondary) !important;
    border-bottom: 1px solid var(--border-color) !important;
    box-shadow: var(--shadow-sm) !important;
}

.nav-container {
    background: transparent !important;
}

.nav-menu {
    background: transparent !important;
}

/* Footer */
.footer {
    background: var(--steel-gray);
    color: var(--text-secondary);
}