:root {
    --primary-color-light: #007BFF;
    --secondary-color-light: #6C757D;
    --background-color-light: #f8f9fa;
    --component-background-light: #fff;
    --text-color-light: #343a40;

    --primary-color-dark: #00A8FF;
    --secondary-color-dark: #495057;
    --background-color-dark: #121212;
    --component-background-dark: #2c2c2c;
    --text-color-dark: #e0e0e0;

    --primary-color-pink: #FF69B4;
    --secondary-color-pink: #C71585;
    --background-color-pink: #FFF0F5;
    --component-background-pink: #FFC0CB;
    --text-color-pink: #333;

    --font-family: 'Arial', sans-serif;

    --primary-color: var(--primary-color-light);
    --secondary-color: var(--secondary-color-light);
    --background-color: var(--background-color-light);
    --component-background: var(--component-background-light);
    --text-color: var(--text-color-light);
    --white: #fff;
}

body {
    font-family: var(--font-family);
    background-color: var(--background-color);
    color: var(--text-color);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"%3E%3Cg fill="%23d9d9d9" fill-opacity="0.1"%3E%3Crect x="50" width="50" height="50" /%3E%3Crect y="50" width="50" height="50" /%3E%3C/g%3E%3C/svg%3E');
    transition: background-color 0.3s ease, color 0.3s ease;
}

body[data-theme="light"] {
    --primary-color: var(--primary-color-light);
    --secondary-color: var(--secondary-color-light);
    --background-color: var(--background-color-light);
    --component-background: var(--component-background-light);
    --text-color: var(--text-color-light);
}

body[data-theme="dark"] {
    --primary-color: var(--primary-color-dark);
    --secondary-color: var(--secondary-color-dark);
    --background-color: var(--background-color-dark);
    --component-background: var(--component-background-dark);
    --text-color: var(--text-color-dark);
}

body[data-theme="pink"] {
    --primary-color: var(--primary-color-pink);
    --secondary-color: var(--secondary-color-pink);
    --background-color: var(--background-color-pink);
    --component-background: var(--component-background-pink);
    --text-color: var(--text-color-pink);
}

.theme-toggle-container {
    position: absolute;
    top: 1rem;
    right: 1rem;
}

#theme-toggle {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 0.5rem;
    background-color: var(--primary-color);
    color: var(--white);
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#theme-toggle:hover {
    opacity: 0.8;
}