:root {
    --color-background: #ffffff;
    --color-text: #000000;
    --color-nav-bg: #282828;
    --color-nav-text: #ffffff;
    --color-primary: #1DB954;
    --color-primary-hover: #1ed760;
    --color-primary-transparent: rgba(29, 185, 84, 0.1);
    --color-error: #ff0000;
    --color-action-secondary: #a0a0a0;
    --color-text-secondary: #101010;
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-background: #121212;
        --color-text: #ffffff;
        --color-nav-bg: #282828;
        --color-nav-text: #ffffff;
        --color-primary: #1DB954;
        --color-primary-hover: #1ed760;
        --color-primary-transparent: rgba(29, 185, 84, 0.1);
        --color-error: #ff4444;
        --color-action-secondary: #606060;
        --color-text-secondary: #e0e0e0;
    }
}

input {
    width: 100%;
    padding: 0.5rem;
    border-radius: 4px;
    font-size: 0.9rem;
    background-color: var(--color-action-secondary);
    color: var(--color-text-secondary);
    border: none;
    outline: none;
    box-sizing: border-box;
}
input::placeholder {
    color: var(--color-text-secondary);
}

select {
    border-radius: 4px;
    background-color: var(--color-action-secondary);
    color: var(--color-text-secondary);
}