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

body {
    background-color: #f9f9ff;
    color: #181c23;
    font-family: 'Lexend', sans-serif;
    min-height: max(884px, 100dvh);
}

.positive-text { color: #10b981; }
.negative-text { color: #e11d48; }

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #f1f3fe; /* surface-container-low */
}
::-webkit-scrollbar-thumb {
    background: #bec6e0; /* secondary-fixed-dim */
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #565e74; /* secondary */
}

/* Base UI Components */
.input-field {
    @apply w-full bg-surface-container-lowest border border-outline-variant rounded-xl px-4 py-3 text-on-surface focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition shadow-sm font-body-md;
}
.btn-primary {
    @apply bg-primary text-on-primary font-label-md font-bold py-3 px-6 rounded-xl hover:opacity-90 active:scale-95 transition shadow-sm disabled:opacity-50 flex items-center justify-center gap-2;
}
.btn-secondary {
    @apply border-2 border-primary text-primary bg-surface-container-lowest font-label-md font-bold py-3 px-6 rounded-xl hover:bg-primary/5 active:scale-95 transition shadow-sm disabled:opacity-50 flex items-center justify-center gap-2;
}
.card {
    @apply bg-surface-container-lowest border border-outline-variant rounded-xl p-md shadow-sm;
}