/* ========================================
   BASE STYLES - Variables, Resets, Global
   ======================================== */

/* Import modern font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&display=swap');

/* Global Resets */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* CSS Variables */
:root {
    /* Cool Modern Color Palette */
    --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    --dark-bg: #0f0f23;
    --card-bg: rgb(20, 20, 38);
    --glass-bg: rgb(25, 25, 45);
    --text-primary: #ffffff;
    --text-secondary: #a0aec0;
    --accent-blue: #4a90e2;
    --accent-purple: #9f7aea;
    --accent-pink: #f093fb;
    --accent-green: #48bb78;
    --neon-glow: 0 0 0px rgba(102, 126, 234, 0.6);
    --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.4);

    /* Unified control height for inputs and buttons */
    --control-height: 44px;
}

/* Prevent horizontal scrolling at document level */
html {
    overflow-x: hidden;
    width: 100%;
}

/* Body - Global Styles */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--dark-bg);
    min-height: 100vh;
    padding: 20px;
    position: relative;
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
}

/* Smooth Scrollbar */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #764ba2 0%, #f093fb 100%);
}

/* Selection Color */
::selection {
    background: rgba(159, 122, 234, 0.3);
    color: var(--text-primary);
}