/* ============================================
   Fanbase Design System — Shared CSS
   ============================================ */

/* --- CSS Custom Properties --- */
:root {
    --primary: #6200EA;
    --secondary: #FF00CC;
    --tertiary: #FF9966;
}

/* --- Material Symbols --- */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* --- Base Typography --- */
body {
    font-family: 'Inter', sans-serif;
    background-color: #0e0e0e;
    color: #ffffff;
}

.plus-jakarta,
.brand-font,
.font-headline {
    font-family: 'Plus Jakarta Sans', sans-serif;
}

h1, h2, h3 {
    font-family: 'Plus Jakarta Sans', sans-serif;
}

/* --- Scrollbar Utilities --- */
.hide-scrollbar::-webkit-scrollbar,
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.hide-scrollbar,
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.custom-scrollbar::-webkit-scrollbar {
    width: 4px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #262626;
    border-radius: 10px;
}

/* Premium scrollbar (global) */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: #0e0e0e;
}
::-webkit-scrollbar-thumb {
    background: #262626;
    border-radius: 10px;
}

/* --- Glassmorphism --- */
.glass-panel {
    background: rgba(26, 25, 25, 0.6);
    backdrop-filter: blur(20px);
}
.glass-card {
    background: rgba(26, 25, 25, 0.6);
    backdrop-filter: blur(20px);
}
.glass-nav {
    background: rgba(14, 14, 14, 0.8);
    backdrop-filter: blur(20px);
}

/* --- Scroll Snap --- */
.snap-y-mandatory {
    scroll-snap-type: y mandatory;
}
.snap-start {
    scroll-snap-align: start;
}

/* --- Audio Room Speaking Glow --- */
.speaking-glow {
    box-shadow: 0 0 0 4px var(--primary), 0 0 25px rgba(98, 0, 234, 0.6);
}

/* --- Gradient Border Mask --- */
.gradient-border-mask {
    position: relative;
}
.gradient-border-mask::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(to right, var(--primary), var(--secondary));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

/* --- Locked Content Blur --- */
.premium-blur {
    backdrop-filter: blur(40px) saturate(180%);
    background: rgba(14, 14, 14, 0.7);
}

/* --- Content Mask --- */
.content-mask {
    mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
}

/* --- Bottom Navigation Shadow --- */
.bottom-nav-shadow {
    box-shadow: 0 -8px 30px rgba(98, 0, 234, 0.08);
}