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

:root {
    /* Brand Colors - Default Dark */
    --primary: #C5A580;
    --primary-dark: #7A5C3E;
    --primary-glow: rgba(197, 165, 128, 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');
    --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"] {
    --primary: #94724d;
    --primary-dark: #7A5C3E;
    --primary-glow: rgba(148, 114, 77, 0.3);

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

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

    /* Darker White (20% darker than pure white) with same transparency as dark theme */
    --card-bg: rgba(230, 230, 230, 0.85);
    --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: rgba(255, 255, 255, 0.9);
    --nav-glass: rgba(255, 255, 255, 0.95);
}

* {
    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 */
/* Global Scrollbar Handling - KILL ALL SCROLL */
html {
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: auto;
    /* smooth causes issues with fixed */
    overflow: hidden !important;
    /* Force no scroll */
    height: 100%;
    /* Fix height */
    overscroll-behavior: none;
    /* Kill bounce */
    touch-action: none;
    /* Kill touch scroll globally (re-enable on specific elements) */
}

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;
    height: 100%;
    /* Fix height */
    overflow: hidden !important;
    /* Force no scroll */
    overscroll-behavior: none;
    touch-action: none;
}

/* Mobile Scroll Fix - REMOVED OVERRIDES, KEEP HIDDEN */
@media (max-width: 480px) {
    body {
        height: 100%;
        min-height: 100vh;
        padding-bottom: 0;
    }

    /* Kill auto-scroll re-enabling */
}