/* Root variables for theming - Dark theme as default */
:root {
    --bg-light: #f5f5f5;
    --bg-dark: #181818;
    --card-light: #fff;
    --card-dark: #282828;
    --text-light: #030303;
    --text-dark: #f1f1f1;
    --accent: #ff0000;
    --hover: rgba(255, 255, 255, 0.05);
    --shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    --background: var(--bg-dark);
    --card: var(--card-dark);
    --text: var(--text-dark);
}

/* Force dark theme for light-preferring devices */
@media (prefers-color-scheme: light) {
    :root {
        --background: var(--bg-dark);
        --card: var(--card-dark);
        --text: var(--text-dark);
        --hover: rgba(255, 255, 255, 0.05);
    }
}

/* Light mode override */
.light-mode {
    --background: var(--bg-light);
    --card: var(--card-light);
    --text: var(--text-light);
    --hover: rgba(0, 0, 0, 0.05);
}

/* Theme toggle button */
.themetogglebutton {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79Z" stroke="%23f1f1f1" stroke-width="2"/></svg>') center/contain no-repeat;
    cursor: pointer;
    transition: background 0.3s ease;
}

.light-mode .themetogglebutton {
    background: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="5" stroke="%23030303" stroke-width="2"/><path d="M12 2V4" stroke="%23030303" stroke-width="2"/><path d="M12 20V22" stroke="%23030303" stroke-width="2"/><path d="M12 12H4" stroke="%23030303" stroke-width="2"/><path d="M20 12H22" stroke="%23030303" stroke-width="2"/><path d="M5.636 5.636L7.05 7.05" stroke="%23030303" stroke-width="2"/><path d="M16.95 16.95L18.364 18.364" stroke="%23030303" stroke-width="2"/><path d="M5.636 18.364L7.05 16.95" stroke="%23030303" stroke-width="2"/><path d="M16.95 7.05L18.364 5.636" stroke="%1" stroke-width="2"/></svg>') center/contain no-repeat;
}

/* Enhanced Mobile Responsiveness */
@media (max-width: 480px) {
    .themetogglebutton {
        width: 28px;
        height: 28px;
        font-size: 18px;
    }
}

@media (max-width: 360px) {
    .themetogglebutton {
        width: 28px;
        height: 28px;
        font-size: 18px;
    }
}

```