@font-face {
    font-family: 'Vazirmatn';
    src: url('../fonts/Vazirmatn-Regular.woff2') format('woff2');
    font-weight: 400;
}
@font-face {
    font-family: 'Vazirmatn';
    src: url('../fonts/Vazirmatn-Medium.woff2') format('woff2');
    font-weight: 500;
}
@font-face {
    font-family: 'Vazirmatn';
    src: url('../fonts/Vazirmatn-Bold.woff2') format('woff2');
    font-weight: 700;
}

/* Themes */
:root {
    --color-base: #F8FAFC;
    --color-surface: #FFFFFF;
    --color-card: #FFFFFF;
    --color-sidebar: #F1F5F9;
    --color-border: #E2E8F0;
    --color-txt: #0F172A;
    --color-muted: #64748B;
    --color-accent: #7C5CFC;
    --color-accent2: #E040A0;
}

[data-theme="dark"] {
    --color-base: #0D0F14;
    --color-surface: #151820;
    --color-card: #1C202B;
    --color-sidebar: #13161F;
    --color-border: #252A38;
    --color-txt: #F0F2F8;
    --color-muted: #8B92A8;
}

body { 
    font-family: 'Vazirmatn', sans-serif; 
    background-color: var(--color-base);
    color: var(--color-txt);
}

/* Scrollbars */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--color-base); }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-accent); }

.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* Animations */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}

.animate-fade-in {
    animation: fadeInUp 0.4s ease both;
}

/* Select option dark background for browsers that support it */
select option {
    background: var(--color-sidebar);
    color: var(--color-txt);
}

/* Custom range slider styling */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    background: #2D313F; /* Custom grey track */
    border-radius: 9999px;
    height: 4px;
    outline: none;
    transition: background 0.2s ease;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #7C5CFC; /* Custom Accent Purple */
    cursor: pointer;
    transition: transform 0.15s ease, background-color 0.15s ease;
    box-shadow: 0 0 8px rgba(124,92,252,0.5);
}
input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.35);
    background-color: #E040A0; /* Gradient accent shade */
}
input[type="range"]::-webkit-slider-thumb:active {
    transform: scale(1.15);
}
input[type="range"]::-moz-range-thumb {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #7C5CFC;
    cursor: pointer;
    border: none;
    transition: transform 0.15s ease, background-color 0.15s ease;
    box-shadow: 0 0 8px rgba(124,92,252,0.5);
}
input[type="range"]::-moz-range-thumb:hover {
    transform: scale(1.35);
    background-color: #E040A0;
}
input[type="range"]::-moz-range-thumb:active {
    transform: scale(1.15);
}