/* File: vill.au/assets/css/themes.css */

/* VILL.AU - Theme System */
/* Light and Dark theme variations */

/* Light Theme (Default) */
:root,
[data-theme="light"] {
    /* Color Palette */
    --primary-teal: #006B5D;
    --primary-teal-light: #008A73;
    --primary-teal-dark: #004A3F;
    --coral: #FF6B6B;
    --coral-light: #FF8E8E;
    --coral-dark: #E55252;
    --golden: #FFD93D;
    --golden-light: #FFE666;
    --golden-dark: #E6C235;
    --charcoal: #2C3E50;
    --charcoal-light: #34495E;
    --soft-gray: #F8F9FA;
    --light-gray: #E9ECEF;
    --dark-gray: #6C757D;
    --white: #FFFFFF;
    --black: #000000;
    
    /* Semantic Colors */
    --background-primary: #FFFFFF;
    --background-secondary: #F8F9FA;
    --background-tertiary: #E9ECEF;
    --text-primary: #2C3E50;
    --text-secondary: #6C757D;
    --text-muted: #ADB5BD;
    --border-color: #E9ECEF;
    --shadow-color: rgba(0, 0, 0, 0.1);
    
    /* Interactive Elements */
    --hover-overlay: rgba(0, 0, 0, 0.05);
    --active-overlay: rgba(0, 0, 0, 0.1);
    --focus-ring: rgba(0, 107, 93, 0.2);
    
    /* Status Colors */
    --success-color: #28A745;
    --warning-color: #FFC107;
    --error-color: #DC3545;
    --info-color: #17A2B8;
}

/* Dark Theme */
[data-theme="dark"] {
    /* Color Palette - Adjusted for dark mode */
    --primary-teal: #00A693;
    --primary-teal-light: #00C7A6;
    --primary-teal-dark: #007B6A;
    --coral: #FF8A8A;
    --coral-light: #FFB3B3;
    --coral-dark: #FF6B6B;
    --golden: #FFE066;
    --golden-light: #FFEB99;
    --golden-dark: #FFD93D;
    --charcoal: #F8F9FA;
    --charcoal-light: #FFFFFF;
    --soft-gray: #1A1D23;
    --light-gray: #2D3139;
    --dark-gray: #9CA3AF;
    --white: #1F2937;
    --black: #FFFFFF;
    
    /* Semantic Colors */
    --background-primary: #111827;
    --background-secondary: #1F2937;
    --background-tertiary: #374151;
    --text-primary: #F9FAFB;
    --text-secondary: #D1D5DB;
    --text-muted: #9CA3AF;
    --border-color: #374151;
    --shadow-color: rgba(0, 0, 0, 0.3);
    
    /* Interactive Elements */
    --hover-overlay: rgba(255, 255, 255, 0.05);
    --active-overlay: rgba(255, 255, 255, 0.1);
    --focus-ring: rgba(0, 166, 147, 0.3);
    
    /* Status Colors */
    --success-color: #10B981;
    --warning-color: #F59E0B;
    --error-color: #EF4444;
    --info-color: #3B82F6;
}

/* Auto Theme (System Preference) */
[data-theme="auto"] {
    /* Light theme by default */
    --primary-teal: #006B5D;
    --primary-teal-light: #008A73;
    --primary-teal-dark: #004A3F;
    --coral: #FF6B6B;
    --coral-light: #FF8E8E;
    --coral-dark: #E55252;
    --golden: #FFD93D;
    --golden-light: #FFE666;
    --golden-dark: #E6C235;
    --charcoal: #2C3E50;
    --charcoal-light: #34495E;
    --soft-gray: #F8F9FA;
    --light-gray: #E9ECEF;
    --dark-gray: #6C757D;
    --white: #FFFFFF;
    --black: #000000;
    
    /* Semantic Colors */
    --background-primary: #FFFFFF;
    --background-secondary: #F8F9FA;
    --background-tertiary: #E9ECEF;
    --text-primary: #2C3E50;
    --text-secondary: #6C757D;
    --text-muted: #ADB5BD;
    --border-color: #E9ECEF;
    --shadow-color: rgba(0, 0, 0, 0.1);
    
    /* Interactive Elements */
    --hover-overlay: rgba(0, 0, 0, 0.05);
    --active-overlay: rgba(0, 0, 0, 0.1);
    --focus-ring: rgba(0, 107, 93, 0.2);
}

/* Auto theme dark mode */
@media (prefers-color-scheme: dark) {
    [data-theme="auto"] {
        --primary-teal: #00A693;
        --primary-teal-light: #00C7A6;
        --primary-teal-dark: #007B6A;
        --coral: #FF8A8A;
        --coral-light: #FFB3B3;
        --coral-dark: #FF6B6B;
        --golden: #FFE066;
        --golden-light: #FFEB99;
        --golden-dark: #FFD93D;
        --charcoal: #F8F9FA;
        --charcoal-light: #FFFFFF;
        --soft-gray: #1A1D23;
        --light-gray: #2D3139;
        --dark-gray: #9CA3AF;
        --white: #1F2937;
        --black: #FFFFFF;
        
        /* Semantic Colors */
        --background-primary: #111827;
        --background-secondary: #1F2937;
        --background-tertiary: #374151;
        --text-primary: #F9FAFB;
        --text-secondary: #D1D5DB;
        --text-muted: #9CA3AF;
        --border-color: #374151;
        --shadow-color: rgba(0, 0, 0, 0.3);
        
        /* Interactive Elements */
        --hover-overlay: rgba(255, 255, 255, 0.05);
        --active-overlay: rgba(255, 255, 255, 0.1);
        --focus-ring: rgba(0, 166, 147, 0.3);
    }
}

/* Theme-specific component overrides */

/* Header theme adjustments */
.header {
    background: var(--gradient-primary);
    border-bottom: 1px solid var(--border-color);
}

[data-theme="dark"] .header {
    background: linear-gradient(135deg, var(--primary-teal), var(--coral));
}

/* Card theme adjustments */
.card {
    background: var(--background-primary);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 6px var(--shadow-color);
}

/* Button theme adjustments */
.btn-primary {
    background: var(--primary-teal);
    border-color: var(--primary-teal);
    color: var(--white);
}

.btn-primary:hover {
    background: var(--primary-teal-dark);
    border-color: var(--primary-teal-dark);
}

.btn-secondary {
    background: var(--coral);
    border-color: var(--coral);
    color: var(--white);
}

.btn-secondary:hover {
    background: var(--coral-dark);
    border-color: var(--coral-dark);
}

/* Form theme adjustments */
.form-control {
    background: var(--background-primary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.form-control:focus {
    border-color: var(--primary-teal);
    box-shadow: 0 0 0 3px var(--focus-ring);
    background: var(--background-primary);
    color: var(--text-primary);
}

.form-control::placeholder {
    color: var(--text-muted);
}

/* Message bubble theme adjustments */
.message-bubble {
    background: var(--background-primary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.message.own .message-bubble {
    background: var(--primary-teal);
    color: var(--white);
    border-color: var(--primary-teal);
}

/* Sidebar theme adjustments */
.chat-sidebar,
.sidebar {
    background: var(--background-primary);
    border-color: var(--border-color);
}

/* Navigation theme adjustments */
.nav-item {
    color: var(--text-primary);
}

.nav-item:hover,
.nav-item.active {
    background: var(--hover-overlay);
    color: var(--primary-teal);
}

/* Alert theme adjustments */
.alert-success {
    background: rgba(0, 107, 93, 0.1);
    border-color: var(--primary-teal);
    color: var(--primary-teal-dark);
}

[data-theme="dark"] .alert-success {
    background: rgba(0, 166, 147, 0.2);
    color: var(--primary-teal-light);
}

.alert-error {
    background: rgba(255, 107, 107, 0.1);
    border-color: var(--coral);
    color: var(--coral-dark);
}

[data-theme="dark"] .alert-error {
    background: rgba(255, 138, 138, 0.2);
    color: var(--coral-light);
}

/* Theme toggle button */
.theme-toggle {
    background: none;
    border: none;
    font-size: var(--fs-lg);
    cursor: pointer;
    padding: var(--spacing-sm);
    border-radius: 50%;
    color: var(--text-secondary);
    transition: all 0.3s ease;
}

.theme-toggle:hover {
    background: var(--hover-overlay);
    color: var(--text-primary);
}

/* Loading spinner theme */
.loading-spinner {
    border-color: var(--light-gray);
    border-top-color: var(--primary-teal);
}

/* Toast notifications theme */
.toast {
    background: var(--background-primary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    box-shadow: 0 4px 6px var(--shadow-color);
}

.toast-success {
    border-left-color: var(--success-color);
}

.toast-error {
    border-left-color: var(--error-color);
}

.toast-warning {
    border-left-color: var(--warning-color);
}

.toast-info {
    border-left-color: var(--info-color);
}

/* Dropdown theme */
.user-dropdown,
.dropdown-menu {
    background: var(--background-primary);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 6px var(--shadow-color);
}

.dropdown-item {
    color: var(--text-primary);
}

.dropdown-item:hover {
    background: var(--hover-overlay);
    color: var(--text-primary);
}

/* Modal theme */
.modal-content {
    background: var(--background-primary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

.modal-header {
    border-bottom-color: var(--border-color);
}

.modal-footer {
    border-top-color: var(--border-color);
}

/* Scrollbar theme */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--background-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--text-muted);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

/* Selection theme */
::selection {
    background: var(--primary-teal);
    color: var(--white);
}

::-moz-selection {
    background: var(--primary-teal);
    color: var(--white);
}

/* Focus outline theme */
*:focus {
    outline: 2px solid var(--primary-teal);
    outline-offset: 2px;
}

/* Theme transition */
* {
    transition: background-color 0.3s ease, 
                border-color 0.3s ease, 
                color 0.3s ease,
                box-shadow 0.3s ease;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --border-color: var(--black);
        --text-muted: var(--text-secondary);
    }
    
    [data-theme="dark"] {
        --border-color: var(--white);
        --text-muted: var(--text-secondary);
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}