:root {
    /* Light theme variables */
    --light-background: #f0f2f5;
    --light-surface: #ffffff;
    --light-text-primary: rgba(0, 0, 0, 0.87);
    --light-text-secondary: rgba(0, 0, 0, 0.6);
    --light-border: rgba(0, 0, 0, 0.12);
    --light-hover: rgba(0, 0, 0, 0.04);
}

:root[data-theme="light"] {
    --background: var(--light-background);
    --surface: var(--light-surface);
    --text-primary: var(--light-text-primary);
    --text-secondary: var(--light-text-secondary);
    --border: var(--light-border);
    --hover: var(--light-hover);
}

:root[data-theme="dark"] {
    --background: #121212;
    --surface: #1e1e1e;
    --text-primary: rgba(255, 255, 255, 0.87);
    --text-secondary: rgba(255, 255, 255, 0.6);
    --border: rgba(255, 255, 255, 0.12);
    --hover: rgba(255, 255, 255, 0.04);
}

body {
    background-color: var(--background);
    color: var(--text-primary);
}

/* MUI overrides for theme */
.MuiPaper-root {
    background-color: var(--surface) !important;
    color: var(--text-primary) !important;
}

.MuiAppBar-root {
    background-color: var(--surface) !important;
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--border) !important;
}

.MuiDrawer-paper {
    background-color: var(--surface) !important;
    color: var(--text-primary) !important;
    border-right: 1px solid var(--border) !important;
}

.MuiTypography-root {
    color: var(--text-primary) !important;
}

.MuiIconButton-root {
    color: var(--text-primary) !important;
}

.MuiListItemText-primary {
    color: var(--text-primary) !important;
}

.MuiListItemText-secondary {
    color: var(--text-secondary) !important;
}

.MuiDivider-root {
    border-color: var(--border) !important;
}
