/**
 * vv3B Theme System
 * Dark and light theme definitions
 */

/* Default Dark Theme */
:root {
    --bg-primary: #1a1a1a;
    --bg-secondary: #2d2d2d;
    --text-primary: #ffffff;
    --text-secondary: #b0b0b0;
    --accent: #6366f1;
    --accent-hover: #5855eb;
    --border: #404040;
    --success: #10b981;
    --warning: #f59e0b;
    --error: #ef4444;
    
    /* Message colors */
    --message-bg: var(--bg-secondary);
    --message-own-bg: var(--accent);
    --message-system-bg: rgba(255, 255, 255, 0.05);
    
    /* Modal backdrop */
    --modal-backdrop: rgba(0, 0, 0, 0.8);
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
    
    /* Animation easing */
    --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
}

/* Light Theme */
[data-theme="light"] {
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --text-primary: #1a1a1a;
    --text-secondary: #6b7280;
    --accent: #6366f1;
    --accent-hover: #5855eb;
    --border: #e5e7eb;
    --success: #10b981;
    --warning: #f59e0b;
    --error: #ef4444;
    
    /* Message colors */
    --message-bg: var(--bg-secondary);
    --message-own-bg: var(--accent);
    --message-system-bg: rgba(0, 0, 0, 0.05);
    
    /* Modal backdrop */
    --modal-backdrop: rgba(0, 0, 0, 0.6);
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.15);
}

/* Theme-specific component adjustments */
[data-theme="light"] .loading-screen {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

[data-theme="light"] .connection-status .status-indicator.connecting {
    background: var(--warning);
}

[data-theme="light"] .connection-status .status-indicator.connected {
    background: var(--success);
}

[data-theme="light"] .connection-status .status-indicator.disconnected {
    background: var(--error);
}

[data-theme="light"] .message-sealed .message-content {
    background: linear-gradient(45deg, var(--bg-secondary), var(--border));
    border: 1px solid var(--border);
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --border: #606060;
        --text-secondary: #d0d0d0;
    }
    
    [data-theme="light"] {
        --border: #999999;
        --text-secondary: #404040;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .loading-spinner {
        animation: none;
    }
    
    .status-indicator.connecting,
    .status-indicator.error {
        animation: none;
    }
}

/* Color scheme preference detection */
@media (prefers-color-scheme: light) {
    :root {
        --bg-primary: #ffffff;
        --bg-secondary: #f8f9fa;
        --text-primary: #1a1a1a;
        --text-secondary: #6b7280;
        --border: #e5e7eb;
        --modal-backdrop: rgba(0, 0, 0, 0.6);
        --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
        --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.15);
    }
}

/* Custom accent colors */
:root[data-accent="red"] {
    --accent: #ef4444;
    --accent-hover: #dc2626;
}

:root[data-accent="green"] {
    --accent: #10b981;
    --accent-hover: #059669;
}

:root[data-accent="yellow"] {
    --accent: #f59e0b;
    --accent-hover: #d97706;
}

:root[data-accent="purple"] {
    --accent: #8b5cf6;
    --accent-hover: #7c3aed;
}

:root[data-accent="cyan"] {
    --accent: #06b6d4;
    --accent-hover: #0891b2;
}

/* Theme transition animations */
html {
    transition: 
        background-color 0.3s var(--ease-out),
        color 0.3s var(--ease-out);
}

* {
    transition: 
        background-color 0.2s var(--ease-out),
        border-color 0.2s var(--ease-out),
        color 0.2s var(--ease-out),
        box-shadow 0.2s var(--ease-out);
}

/* Ensure theme changes affect all components */
.app-container,
.loading-screen,
.modal-overlay,
.modal,
.message,
.peer-item,
.form-input,
.form-select,
.button {
    transition: 
        background-color 0.2s var(--ease-out),
        border-color 0.2s var(--ease-out),
        color 0.2s var(--ease-out),
        box-shadow 0.2s var(--ease-out);
}