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

:root {
  --color-background: 251 249 248;
  --color-on-background: 27 28 28;
  --color-surface: 251 249 248;
  --color-on-surface: 27 28 28;
  --color-surface-dim: 219 218 217;
  --color-surface-bright: 251 249 248;
  --color-surface-container-lowest: 255 255 255;
  --color-surface-container-low: 245 243 243;
  --color-surface-container: 239 237 237;
  --color-surface-container-high: 233 232 231;
  --color-surface-container-highest: 228 226 226;
  --color-surface-variant: 228 226 226;
  --color-on-surface-variant: 68 71 72;
  --color-outline: 116 120 120;
  --color-outline-variant: 196 199 199;
  --color-inverse-surface: 48 48 49;
  --color-inverse-on-surface: 242 240 240;
  --color-inverse-primary: 201 198 197;
  --color-primary: 0 0 0;
  --color-on-primary: 255 255 255;
  --color-secondary: 122 89 0;
  --color-on-secondary: 255 255 255;
  --color-error: 186 26 26;
  --color-on-error: 255 255 255;
  --color-error-container: 255 218 214;
  --color-on-error-container: 147 0 10;
}

.dark {
  --color-background: 19 19 19;
  --color-on-background: 242 240 240;
  --color-surface: 27 28 28;
  --color-on-surface: 242 240 240;
  --color-surface-dim: 13 13 13;
  --color-surface-bright: 58 58 58;
  --color-surface-container-lowest: 10 10 10;
  --color-surface-container-low: 28 28 28;
  --color-surface-container: 33 33 33;
  --color-surface-container-high: 43 43 43;
  --color-surface-container-highest: 54 54 54;
  --color-surface-variant: 68 71 72;
  --color-on-surface-variant: 196 199 199;
  --color-outline: 142 145 146;
  --color-outline-variant: 68 71 72;
  --color-inverse-surface: 228 226 226;
  --color-inverse-on-surface: 48 48 49;
  --color-inverse-primary: 0 0 0;
  --color-primary: 242 240 240;
  --color-on-primary: 27 28 28;
  --color-secondary: 246 190 60;
  --color-on-secondary: 61 46 0;
  --color-error: 255 180 171;
  --color-on-error: 105 0 5;
  --color-error-container: 147 0 10;
  --color-on-error-container: 255 218 214;
}

:root {
  color-scheme: light;
}

.dark {
  color-scheme: dark;
}

body {
  background-color: rgb(var(--color-background));
  transition: background-color 0.2s ease;
}

.styled-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: rgb(var(--color-secondary)) rgb(var(--color-surface-container-low));
}
.styled-scrollbar::-webkit-scrollbar {
  width: 8px;
}
.styled-scrollbar::-webkit-scrollbar-track {
  background: rgb(var(--color-surface-container-low));
}
.styled-scrollbar::-webkit-scrollbar-thumb {
  background-color: rgb(var(--color-secondary));
  border-radius: 4px;
  border: 2px solid rgb(var(--color-surface-container-low));
}
.styled-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: rgb(var(--color-secondary) / 0.8);
}