@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap');

:root {
    --primary: #adc6ff;
    --on-primary: #002e6a;
    --primary-container: #004494;
    --secondary: #c0c1ff;
    --tertiary: #ffb786;
    --surface: #10131a;
    --surface-container: #1d2027;
    --surface-container-low: #191b23;
    --surface-container-high: #272a31;
    --outline: #8c909f;
    --outline-variant: #424754;
    --bg-lowest: #0b0e15;
}

body {
    background-color: var(--bg-lowest);
    color: #e1e2ec;
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
}

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

.fill-icon {
    font-variation-settings: 'FILL' 1 !important;
}

/* Glass & Glow Effects */
.glass-panel {
    background: rgba(20, 20, 20, 0.7);
    backdrop-filter: blur(12px);
    border: 1px solid var(--outline-variant);
}

.inner-glow {
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
}

/* Bento Cards */
.bento-card {
    background: var(--surface-container);
    border: 1px solid var(--outline-variant);
    border-radius: 24px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.bento-card:hover {
    border-color: var(--primary);
    background: var(--surface-container-high);
    transform: translateY(-2px);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: var(--bg-lowest);
}
::-webkit-scrollbar-thumb {
    background: var(--outline-variant);
    border-radius: 10px;
}

/* Animations */
.ease-spring {
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.skeleton {
    background: linear-gradient(90deg, #111111 25%, #1A1A1A 50%, #111111 75%);
    background-size: 200% 100%;
    animation: shimmer 2s infinite linear;
}

/* Input Overrides */
input, select, textarea {
    background: var(--bg-lowest) !important;
    border: 1px solid var(--outline-variant) !important;
    color: white !important;
}

input:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 2px rgba(173, 198, 255, 0.2) !important;
}