/* app/static/css/cyberpunk.css */

/* Base Cyberpunk Styles (will override or complement style.css when active) */

body.theme-cyberpunk {
    --primary-color: #00FFC0; /* Neon Green */
    --secondary-color: #FF00FF; /* Neon Magenta */
    --text-color: #00FFC0; /* Neon Green */
    --background-color: #1a0033; /* Dark Purple/Black */
    --card-bg: #2b004d; /* Slightly lighter dark purple */
    --border-color: #008060; /* Darker neon green */
    --shadow: 0 0 15px rgba(0, 255, 192, 0.5), 0 0 5px rgba(255, 0, 255, 0.3); /* Neon glow */
    color: var(--text-color);
    font-family: 'monospace', 'Courier New', Courier, sans-serif; /* More futuristic/techy font */
    text-shadow: 0 0 5px rgba(0, 255, 192, 0.3);
}

body.theme-cyberpunk header {
    background-color: #0d001a; /* Even darker purple */
    border-bottom: 2px solid var(--primary-color);
    box-shadow: var(--shadow);
}

body.theme-cyberpunk h1,
body.theme-cyberpunk h2 {
    color: var(--secondary-color);
    text-shadow: 0 0 8px var(--secondary-color), 0 0 15px rgba(255, 0, 255, 0.5);
    border-bottom-color: var(--primary-color);
}

body.theme-cyberpunk .container {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow);
}

body.theme-cyberpunk li {
    background: #1f003a; /* Darker card bg */
    border-color: var(--border-color);
    color: var(--primary-color);
}

body.theme-cyberpunk form {
    background: #1f003a;
    border-color: var(--border-color);
}

body.theme-cyberpunk form input[type="text"],
body.theme-cyberpunk form input[type="email"] {
    background-color: #0d001a;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    box-shadow: inset 0 0 5px rgba(0, 255, 192, 0.2);
}

body.theme-cyberpunk form input[type="text"]::placeholder,
body.theme-cyberpunk form input[type="email"]::placeholder {
    color: rgba(0, 255, 192, 0.6);
}

body.theme-cyberpunk form button {
    background-color: var(--secondary-color);
    box-shadow: 0 0 10px rgba(255, 0, 255, 0.4);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

body.theme-cyberpunk form button:hover {
    background-color: #c000c0; /* Darker magenta */
    box-shadow: 0 0 15px rgba(255, 0, 255, 0.8);
}

body.theme-cyberpunk footer {
    background-color: #0d001a;
    border-top: 1px solid var(--primary-color);
    box-shadow: 0 0 10px rgba(0, 255, 192, 0.2) inset;
    color: var(--primary-color);
}

/* Optional: Subtle glitch effect on hover for elements */
body.theme-cyberpunk button:hover,
body.theme-cyberpunk li:hover {
    animation: glitch 0.2s infinite;
}

@keyframes glitch {
    0% { transform: translate(0); }
    20% { transform: translate(-2px, 2px); }
    40% { transform: translate(-2px, -2px); }
    60% { transform: translate(2px, 2px); }
    80% { transform: translate(2px, -2px); }
    100% { transform: translate(0); }
}