/* ============================================
   BASE.CSS - Global Variables, Resets, Typography & Helpers
   Holo Studio | XR/VR Solutions
   ============================================ */

/* ===== CSS Variables ===== */
:root {
    --bg: #020408;
    --accent: #25f4ff;
    --secondary: #bd00ff;
    --glass: rgba(255, 255, 255, 0.03);
    --glassBorder: rgba(255, 255, 255, 0.08);
    --textMuted: #94a3b8;
}

/* ===== Base Styles ===== */
body {
    font-family: 'Cairo', sans-serif;
    background-color: #020408;
    color: white;
    overflow-x: hidden;
}

/* ===== Typography ===== */
.gradient-text {
    background: linear-gradient(to right, #ffffff, #94a3b8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.gradient-accent {
    background: linear-gradient(135deg, #25f4ff, #bd00ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-neon {
    text-shadow: 0 0 10px rgba(37, 244, 255, 0.4);
}

/* ===== Custom Scrollbar ===== */
::-webkit-scrollbar { 
    width: 8px; 
}

::-webkit-scrollbar-track { 
    background: #020408; 
}

::-webkit-scrollbar-thumb { 
    background: #334155; 
    border-radius: 4px; 
}

::-webkit-scrollbar-thumb:hover { 
    background: #25f4ff; 
}

/* ===== Selection ===== */
::selection {
    background-color: var(--accent);
    color: black;
}