@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
    --md-sys-color-primary: #6750A4;
    --md-sys-color-on-primary: #FFFFFF;
    --md-sys-color-primary-container: #EADDFF;
    --md-sys-color-on-primary-container: #21005E;
    --md-sys-color-surface: #FEF7FF;
    --md-sys-color-on-surface: #1D1B20;
    --md-sys-color-surface-variant: #E7E0EC;
    --md-sys-color-on-surface-variant: #49454F;
    --md-sys-color-outline: #79747E;
    --md-sys-color-background: #FEF7FF;
    --md-sys-color-on-background: #1D1B20;
    --md-sys-color-error: #B3261E;
}

body {
    background-color: var(--md-sys-color-background);
    color: var(--md-sys-color-on-background);
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
}

/* Sidebar Styling & Collapse behavior */
aside#sidebar {
    width: 280px;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

aside#sidebar.collapsed {
    width: 80px;
}

aside#sidebar.collapsed .nav-text,
aside#sidebar.collapsed .sidebar-title {
    display: none;
}

aside#sidebar.collapsed .nav-item {
    justify-content: center;
}