/* ===========================================
   BASE.CSS - Variables, Body, Scrollbar
   =========================================== */

:root {
    /* Brand Colors - Default Dark (Red) */
    --primary: #EF4444;
    --primary-dark: #B91C1C;
    --primary-glow: rgba(239, 68, 68, 0.4);

    /* Semantic Colors - Dark (Default) */
    --bg-body: #000;
    --bg-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/static/assets/bg/bg_final.webp?v=20260302');
    --bg-overlay: rgba(0, 0, 0, 0.5);
    /* Kept for other uses if any */

    --text-main: #E0E0E0;
    --text-secondary: #aaaaaa;
    --text-inverse: #000000;

    --card-bg: rgba(0, 0, 0, 0.85);
    /* Restored Deep Dark */
    --card-border: rgba(255, 255, 255, 0.08);
    --card-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);

    --nav-bg: rgba(0, 0, 0, 0.95);
    /* Deep Dark Nav */
    --nav-border: rgba(255, 255, 255, 0.1);

    --user-menu-bg: rgba(10, 10, 10, 0.7);
    --user-menu-border: rgba(255, 255, 255, 0.1);

    --modal-overlay: rgba(0, 0, 0, 0.6);
    --modal-bg: #141414;

    /* Legacy Glass vars (keeping for compatibility) */
    --bg-glass: rgba(12, 12, 12, 0.9);
    --border-glass: transparent;
    --nav-glass: rgba(8, 8, 8, 0.98);

    /* Layout Constants - Source of Truth */
    --content-width: 520px;
    --page-padding: 0px;
    --card-padding: 32px;
    --nav-height: 78px;
    --nav-bottom-spacing: 30px;
    --z-nav: 10000;
    --z-modal: 20000;
}

/* Light Theme Overrides */
[data-theme="light"] {
    /* Brand Colors - Light Theme (Red) */
    --primary: #EF4444;
    --primary-dark: #B91C1C;
    --primary-glow: rgba(239, 68, 68, 0.4);

    --bg-body: #F0F2F5;
    /* Standard raw wallpaper with 20% dark overlay */
    --bg-image: url('/static/assets/bg/bg_final.webp?v=20260302');
    --bg-overlay: rgba(0, 0, 0, 0.2);

    --text-main: #1A1D1E;
    --text-secondary: #555A60;
    --text-inverse: #ffffff;

    /* Pure white, fully opaque */
    --card-bg: #ffffff;
    --card-border: rgba(0, 0, 0, 0.08);
    --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);

    --nav-bg: var(--bg-glass);
    --nav-border: rgba(0, 0, 0, 0.05);

    --user-menu-bg: var(--bg-glass);
    --user-menu-border: rgba(0, 0, 0, 0.05);

    --modal-overlay: rgba(0, 0, 0, 0.2);
    --modal-bg: #ffffff;

    --bg-glass: #ffffff;
    --nav-glass: #ffffff;
}

/* Avoid downloading heavy desktop wallpaper on mobile. */
@media (max-width: 768px) {
    :root {
        --bg-image: linear-gradient(rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.72));
    }

    [data-theme="light"] {
        --bg-image: linear-gradient(rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.72));
    }
}

* {
    box-sizing: border-box;
    /* Transition for theme switch (no background-color to avoid transparency issues) */
    transition: border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

/* Exclude transition for transforms to avoid jank */
*::before,
*::after {
    transition: border-color 0.3s ease, color 0.3s ease;
}

/* Text Selection Color */
::selection {
    background: var(--primary-glow);
    color: var(--text-inverse);
}

::-moz-selection {
    background: var(--primary-glow);
    color: var(--text-inverse);
}

body {
    /* Fallback */
    background-color: #000;

    /* Configurable Background */
    background-color: var(--bg-body);
    background-image: var(--bg-image);
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;

    color: var(--text-main);
    font-family: 'Inter', sans-serif;
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: none;
    padding-bottom: 0;
}

/* Custom Scrollbar */
/* Custom Scrollbar - Global Dark Theme */
::-webkit-scrollbar {
    width: 0px;
    background: transparent;
    display: none;
    /* Hide globally */
}

/* Global Scrollbar Handling */
html {
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: auto;
    /* smooth causes issues with fixed */
    overflow-x: hidden !important;
    overflow-y: auto !important;
    min-height: 100%;
    overscroll-behavior: none;
    touch-action: pan-y;
}

body {
    background-color: #000;
    background-color: var(--bg-body);
    background-image: var(--bg-image);
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;

    color: var(--text-main);
    font-family: 'Inter', sans-serif;
    margin: 0;
    min-height: 100vh;
    height: auto;
    overflow-x: hidden;
    overflow-y: auto !important;
    overscroll-behavior: none;
    touch-action: pan-y;
}