:root {
    --background-color: #121212;
    --text-color: #e0e0e0;
    --dark-theme-header-gradient: linear-gradient(45deg, #2196F3, #E91E63);
    --light-theme-header-gradient: linear-gradient(45deg, #FF8C00, #FFD700, #FF4500);
    --header-gradient: var(--dark-theme-header-gradient); /* For current page header */
    --icon-gradient: var(--light-theme-header-gradient); /* For icon, representing the theme to switch TO */
    --header-text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
    --button-bg-color: #333;
    --button-text-color: white;
    --button-hover-bg-color: #555;
    --input-border-color: #ddd;
    --input-bg-color: #2c2c2c; 
    --input-text-color: var(--text-color);
}

.light-theme {
    --background-color: #f8f4e8; /* Warmer parchment color */
    --text-color: #3a3a3a; /* Darker gray for better contrast */
    --header-gradient: var(--light-theme-header-gradient); /* For current page header */
    --icon-gradient: var(--dark-theme-header-gradient); /* For icon, representing the theme to switch TO */
    --button-bg-color: #e0d8c0; /* Lighter button background */
    --button-text-color: #2a2a2a; /* Darker text for buttons */
    --button-hover-bg-color: #d0c8b0;
    --input-border-color: #c0b8a0;
    --input-bg-color: #ffffff;
    --input-text-color: #2a2a2a;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Work Sans', sans-serif;
    line-height: 1.6;
    background-color: var(--background-color);
    color: var(--text-color);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Make sure the main content has proper contrast with the background */
main {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 2rem;
    background-color: transparent; /* Allow the background to show through */
}

.manifesto {
    max-width: 800px;
    margin: 0 auto;
    padding: 4rem 2rem;
    text-align: center;
}

.manifesto h2 {
    font-size: 2.5rem;
    margin-bottom: 3rem;
    font-weight: 600;
}

.manifesto-items {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.manifesto-items p {
    font-size: 1.25rem;
    line-height: 1.8;
    opacity: 0.9;
}

.join {
    margin-top: 3rem;
    font-size: 1.25rem;
}

.join a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.25em;
}

.hero {
    text-align: center;
    padding: 4rem 0;
}

.unicode-title {
    font-size: 4.5rem;
    margin-bottom: 2rem;
    text-align: center;
    line-height: 1.2;
    background: var(--header-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    text-shadow: none;
    padding: 2rem 1rem;
}

form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 500px;
    margin: 2rem auto;
}

input, textarea {
    padding: 0.8rem;
    border: 1px solid var(--input-border-color);
    background-color: var(--input-bg-color);
    color: var(--input-text-color);
    border-radius: 4px;
    font-size: 1rem;
}

textarea {
    height: 150px;
    resize: vertical;
}

button {
    background: var(--button-bg-color);
    color: var(--button-text-color);
    border: none;
    padding: 0.8rem 1.5rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
}

button:hover {
    background: var(--button-hover-bg-color);
}

@media (max-width: 768px) {
    .unicode-title {
        font-size: 3.5rem; /* Corrected responsive font size */
    }

    .manifesto-items {
        flex-direction: column;
    }

    main {
        padding: 0 1rem;
    }

    .manifesto {
        padding: 2rem 1rem;
    }
}

@media (max-width: 480px) {
    .unicode-title {
        font-size: 2.5rem; /* Corrected responsive font size */
    }
}

#theme-toggle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: var(--icon-gradient); /* Use icon-gradient */
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent; /* Fallback, text-fill-color is preferred */
    border: none; /* Removed border */
    border-radius: 50%; /* Circular */
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
    cursor: pointer;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
}

#theme-toggle:hover {
    background: var(--icon-gradient); /* Keep icon-gradient on hover */
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    /* Optional: Add a subtle effect on hover, e.g., slightly change icon opacity or scale */
    /* opacity: 0.8; */
}

/* Glowing purple text selection -- REMOVED */
/*
::selection {
    background-color: #8A2BE2; 
    color: #FFFFFF; 
    text-shadow: 0 0 5px #DA70D6, 0 0 10px #DA70D6; 
}

::-moz-selection { 
    background-color: #8A2BE2;
    color: #FFFFFF;
    text-shadow: 0 0 5px #DA70D6, 0 0 10px #DA70D6;
}
*/

canvas#fluid-canvas {
    background-color: var(--background-color);
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1; /* Ensure it's in the background */
    margin: 0;
    padding: 0;
    background-color: var(--background-color); /* Use the theme background color */
}

/* Ensure good contrast for text on the light background */
.light-theme h1,
.light-theme h2,
.light-theme h3,
.light-theme p,
.light-theme li,
.light-theme a {
    color: var(--text-color);
    text-shadow: none; /* Remove any text shadows in light mode */
}