/* 
 * Spielewerkstatt - Professional Dark Theme & Sleek Animations
 * Complete refactor with proper color inversion and professional animations
 */

/* ============================================
   DARK MODE COLOR VARIABLES
   ============================================ */
[data-theme="dark"],
.dark-theme {
    /* Background colors - pure inversion */
    --background-color: #0a0a0a;
    --surface-color: #121212;
    --surface-color-light: #1a1a1a;
    --surface-color-dark: #0d0d0d;
    
    /* Text colors - all white/light for contrast */
    --text-primary: #ffffff;
    --text-secondary: #e0e0e0;
    --text-tertiary: #b0b0b0;
    --text-disabled: #6e6e6e;
    
    /* Gray scale for dark theme */
    --gray-50: #1a1a1a;
    --gray-100: #242424;
    --gray-200: #2a2a2a;
    --gray-300: #333333;
    --gray-400: #404040;
    --gray-500: #525252;
    
    /* Border colors */
    --border-color: #2a2a2a;
    --border-color-light: #333333;
    
    /* Keep brand colors */
    --primary-color: #7c4dff;
    --primary-light: #9d74ff;
    --primary-dark: #4527a0;
    --secondary-color: #ff5722;
    --accent-color: #00bcd4;
    
    /* NO SHADOWS - flat design */
    --shadow: none;
    --shadow-hover: none;
    --shadow-light: none;
    
    /* Overlay colors */
    --overlay-dark: rgba(0, 0, 0, 0.7);
    --overlay-light: rgba(255, 255, 255, 0.05);
}

/* ============================================
   BASE BODY STYLING
   ============================================ */
[data-theme="dark"] body,
.dark-theme body {
    background-color: var(--background-color);
    color: var(--text-primary);
}

/* All text elements white in dark mode */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6,
.dark-theme h1,
.dark-theme h2,
.dark-theme h3,
.dark-theme h4,
.dark-theme h5,
.dark-theme h6 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] p,
.dark-theme p {
    color: var(--text-secondary);
}

[data-theme="dark"] span,
.dark-theme span {
    color: var(--text-secondary);
}

[data-theme="dark"] label,
.dark-theme label {
    color: var(--text-secondary);
}

/* ============================================
   HEADER - NO SHADOWS
   ============================================ */
[data-theme="dark"] .header,
.dark-theme .header {
    background-color: var(--surface-color);
    border-bottom: 1px solid var(--border-color);
    box-shadow: none !important;
}

[data-theme="dark"] .header.scrolled,
.dark-theme .header.scrolled {
    background-color: rgba(18, 18, 18, 0.98) !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-color-light);
    box-shadow: none !important;
}

/* Header text always white */
[data-theme="dark"] .header .nav-link,
.dark-theme .header .nav-link {
    color: #ffffff !important;
}

[data-theme="dark"] .header .brand-name,
.dark-theme .header .brand-name {
    color: #ffffff !important;
}

[data-theme="dark"] .header .nav-link:hover,
.dark-theme .header .nav-link:hover {
    color: var(--primary-light) !important;
}

/* ============================================
   CARDS & SURFACES
   ============================================ */
[data-theme="dark"] .project-card,
.dark-theme .project-card {
    background-color: var(--surface-color-light);
    border: 1px solid var(--border-color);
    box-shadow: none !important;
}

[data-theme="dark"] .project-card:hover,
.dark-theme .project-card:hover {
    border-color: var(--border-color-light);
    transform: translateY(-4px);
}

[data-theme="dark"] .featured-projects,
.dark-theme .featured-projects {
    background-color: var(--surface-color);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

/* ============================================
   FORMS & INPUTS
   ============================================ */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea,
.dark-theme input,
.dark-theme select,
.dark-theme textarea {
    background-color: var(--surface-color-light);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] input:focus,
[data-theme="dark] select:focus,
[data-theme="dark"] textarea:focus,
.dark-theme input:focus,
.dark-theme select:focus,
.dark-theme textarea:focus {
    border-color: var(--primary-color);
    outline: none;
}

[data-theme="dark"] input::placeholder,
.dark-theme input::placeholder,
[data-theme="dark"] textarea::placeholder,
.dark-theme textarea::placeholder {
    color: var(--text-disabled);
}

/* ============================================
   BUTTONS
   ============================================ */
[data-theme="dark"] .cta-button,
.dark-theme .cta-button {
    color: #ffffff !important;
}

[data-theme="dark"] .cta-button:hover,
.dark-theme .cta-button:hover {
    color: #ffffff !important;
}

[data-theme="dark"] .view-all-button,
.dark-theme .view-all-button {
    color: var(--primary-light) !important;
}

[data-theme="dark"] .view-all-button:hover,
.dark-theme .view-all-button:hover {
    color: var(--primary-color) !important;
}

[data-theme="dark"] .back-home-button,
.dark-theme .back-home-button {
    color: var(--primary-light) !important;
}

[data-theme="dark"] .back-home-button:hover,
.dark-theme .back-home-button:hover {
    color: var(--primary-color) !important;
}

/* ============================================
   SECTIONS
   ============================================ */
[data-theme="dark"] .newsletter-section,
.dark-theme .newsletter-section {
    background: linear-gradient(135deg, var(--primary-color) 0%, #3949ab 100%) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .login-section,
.dark-theme .login-section {
    background-color: var(--background-color);
}

[data-theme="dark"] .login-container,
.dark-theme .login-container {
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
}

/* ============================================
   MESSAGES & ALERTS
   ============================================ */
[data-theme="dark"] .error-message,
.dark-theme .error-message {
    background-color: rgba(244, 67, 54, 0.1);
    border: 1px solid #f44336;
    color: #ef5350;
}

[data-theme="dark"] .success-message,
.dark-theme .success-message {
    background-color: rgba(76, 175, 80, 0.1);
    border: 1px solid #4caf50;
    color: #66bb6a;
}

/* ============================================
   DROPDOWNS & MENUS
   ============================================ */
[data-theme="dark"] .settings-dropdown-menu,
.dark-theme .settings-dropdown-menu {
    background-color: var(--surface-color);
    border: 1px solid var(--border-color-light);
    box-shadow: none;
}

[data-theme="dark"] .settings-section,
.dark-theme .settings-section {
    border-bottom: 1px solid var(--border-color);
}

[data-theme="dark"] .settings-language-select,
[data-theme="dark"] .settings-theme-select,
.dark-theme .settings-language-select,
.dark-theme .settings-theme-select {
    background-color: var(--surface-color-light);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

/* Custom dropdowns (e.g., genre selection in developer hub) */
[data-theme="dark"] .custom-dropdown select,
.dark-theme .custom-dropdown select {
    background-color: var(--surface-color-light) !important;
    color: var(--text-primary) !important;
    border: 2px solid var(--border-color-light) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
}

[data-theme="dark"] .custom-dropdown select:hover,
.dark-theme .custom-dropdown select:hover {
    background-color: var(--gray-200) !important;
}

[data-theme="dark"] .custom-dropdown select:focus,
.dark-theme .custom-dropdown select:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(124, 77, 255, 0.2) !important;
}

[data-theme="dark"] .custom-dropdown select option,
.dark-theme .custom-dropdown select option {
    background-color: var(--surface-color-light);
    color: var(--text-primary);
}

/* ============================================
   FOOTER
   ============================================ */
[data-theme="dark"] .footer,
.dark-theme .footer {
    background-color: var(--surface-color);
    border-top: 1px solid var(--border-color);
}

[data-theme="dark"] .footer-description,
.dark-theme .footer-description {
    color: var(--text-secondary);
}

[data-theme="dark"] .footer-links h4,
[data-theme="dark"] .footer-social h4,
.dark-theme .footer-links h4,
.dark-theme .footer-social h4 {
    color: var(--text-primary);
}

[data-theme="dark"] .footer-links a,
.dark-theme .footer-links a {
    color: var(--text-secondary);
}

[data-theme="dark"] .footer-links a:hover,
.dark-theme .footer-links a:hover {
    color: var(--primary-light);
}

/* ============================================
   CONTAINER - Always transparent
   ============================================ */
[data-theme="dark"] .container,
.dark-theme .container {
    background-color: transparent !important;
}

/* ============================================
   SCROLLBAR (Dark Theme)
   ============================================ */
[data-theme="dark"] ::-webkit-scrollbar,
.dark-theme ::-webkit-scrollbar {
    width: 10px;
}

[data-theme="dark"] ::-webkit-scrollbar-track,
.dark-theme ::-webkit-scrollbar-track {
    background: var(--surface-color);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb,
.dark-theme ::-webkit-scrollbar-thumb {
    background: var(--gray-500);
    border-radius: 5px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover,
.dark-theme ::-webkit-scrollbar-thumb:hover {
    background: var(--gray-400);
}

/* ============================================
   SELECTION (Dark Theme)
   ============================================ */
[data-theme="dark"] ::selection,
.dark-theme ::selection {
    background: var(--primary-color);
    color: #ffffff;
}