:root {
    --primary-color: #4a90e2;
    --secondary-color: #f5a623;
    --background-color: #f3f6fb;
    --text-color: #1f2937;
    --ball-size: 50px;
    --panel-background: rgba(255, 255, 255, 0.92);
    --panel-text: #111827;
    --panel-border: rgba(148, 163, 184, 0.28);
    --toggle-background: rgba(148, 163, 184, 0.16);
    --toggle-background-hover: rgba(148, 163, 184, 0.26);
}

:root[data-theme='dark'] {
    --primary-color: #7dd3fc;
    --secondary-color: #facc15;
    --background-color: #020617;
    --text-color: #e2e8f0;
    --panel-background: rgba(15, 23, 42, 0.88);
    --panel-text: #f8fafc;
    --panel-border: rgba(148, 163, 184, 0.2);
    --toggle-background: rgba(51, 65, 85, 0.72);
    --toggle-background-hover: rgba(71, 85, 105, 0.88);
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--background-color);
    color: var(--text-color);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    padding: 1.5rem;
    background-image:
        radial-gradient(circle at top, rgba(74, 144, 226, 0.18), transparent 32%),
        radial-gradient(circle at bottom right, rgba(245, 166, 35, 0.2), transparent 28%);
    transition: background-color 0.25s ease, color 0.25s ease;
}