:root {
    color-scheme: light;
    --bg-color: #e8ebf0;
    --text-color: #17202a;
    --card-bg: #f7f9fc;
    --card-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    --ball-bg: #ffffff;
    --ball-text: #1f2d3d;
    --button-bg: #0d6efd;
    --button-hover: #0a58ca;
}

:root[data-theme='dark'] {
    color-scheme: dark;
    --bg-color: #0f1720;
    --text-color: #e6edf5;
    --card-bg: #1b2531;
    --card-shadow: 0 0 24px rgba(0, 0, 0, 0.45);
    --ball-bg: #243242;
    --ball-text: #f1f5f9;
    --button-bg: #3b82f6;
    --button-hover: #2563eb;
}

body {
    display: grid;
    place-items: center;
    min-height: 100vh;
    margin: 0;
    gap: 1rem;
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: sans-serif;
    transition: background-color 0.25s ease, color 0.25s ease;
}

#theme-toggle {
    justify-self: end;
    margin: 1rem 1rem 0 0;
    padding: 0.6rem 0.9rem;
    border: none;
    border-radius: 0.5rem;
    background-color: var(--button-bg);
    color: #fff;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

#theme-toggle:hover {
    background-color: var(--button-hover);
}