@layer base, components, utilities;

@layer base {
    :root {
        --bg-color: #f0f2f5;
        --text-color: #1c1e21;
        --card-bg: #ffffff;
        --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        --btn-bg: #007bff;
        --btn-hover: #0056b3;
        --btn-text: #ffffff;
        --number-bg: #e4e6eb;
        --number-text: #050505;
        --toggle-bg: #ddd;
        --toggle-icon-color: #333;
        --transition-speed: 0.3s;
    }

    body.dark-theme {
        --bg-color: #18191a;
        --text-color: #e4e6eb;
        --card-bg: #242526;
        --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        --btn-bg: #2d88ff;
        --btn-hover: #1b74e4;
        --btn-text: #ffffff;
        --number-bg: #3a3b3c;
        --number-text: #e4e6eb;
        --toggle-bg: #3a3b3c;
        --toggle-icon-color: #f5f6f7;
    }

    body {
        background-color: var(--bg-color);
        color: var(--text-color);
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        transition: background-color var(--transition-speed), color var(--transition-speed);
    }
}

@layer components {
    .theme-toggle {
        position: fixed;
        top: 20px;
        right: 20px;
        background-color: var(--toggle-bg);
        border: none;
        border-radius: 50%;
        width: 44px;
        height: 44px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        transition: background-color var(--transition-speed), transform 0.2s;
        z-index: 1000;
    }

    .theme-toggle:hover {
        transform: scale(1.1);
    }

    .theme-toggle svg {
        width: 24px;
        height: 24px;
        fill: var(--toggle-icon-color);
        transition: fill var(--transition-speed);
    }

    /* Hide sun by default, show moon */
    .theme-toggle .sun-icon { display: none; }
    .theme-toggle .moon-icon { display: block; }

    body.dark-theme .theme-toggle .sun-icon { display: block; }
    body.dark-theme .theme-toggle .moon-icon { display: none; }
}