/*
 * Template Switcher CSS
 * Automatically loads template-specific styles based on data-template attribute
 */

/* Import all template styles */
@import url('templates/default.css');
@import url('templates/minimal.css');
@import url('templates/cyberpunk.css');
@import url('templates/sunset.css');
@import url('templates/neon.css');
@import url('templates/ocean.css');
@import url('templates/darkpro.css');
@import url('templates/cosmos.css');

/* Template Transition Effects */
html {
    transition: background-color 0.5s ease, color 0.5s ease;
}

body {
    transition: background 0.5s ease;
}

/* Template-specific body background overrides */
body[data-template="default"] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

body[data-template="cyberpunk"] {
    background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
}

body[data-template="sunset"] {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 50%, #ff6b9d 100%);
}

body[data-template="neon"] {
    background: #0a0e27;
}

body[data-template="ocean"] {
    background: linear-gradient(135deg, #0093E9 0%, #80D0C7 100%);
}

body[data-template="darkpro"] {
    background: #000000;
}

body[data-template="cosmos"] {
    background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);
}

body[data-template="minimal"] {
    background: var(--bg-primary);
}

/* Smooth transitions for all color changes */
* {
    transition-property: background-color, color, border-color, box-shadow;
    transition-duration: 0.3s;
    transition-timing-function: ease;
}

/* Preserve specific transitions */
a, button, .btn, [class*="hover"] {
    transition-property: all;
    transition-duration: 0.3s;
}