:root {
  --color-surface: 251 248 252;
  --color-on-surface: 49 50 58;
  --color-surface-container-lowest: 255 255 255;
  --color-surface-container-low: 245 242 248;
  --color-surface-container: 239 237 244;
  --color-surface-container-high: 233 231 240;
  --color-surface-container-highest: 227 225 236;
  --color-surface-variant: 227 225 236;
  --color-on-surface-variant: 94 94 103;
  --color-primary: 0 76 237;
  --color-primary-dim: 0 66 209;
  --color-on-primary: 248 247 255;
  --color-primary-container: 221 225 255;
  --color-on-primary-container: 0 65 208;
  --color-error: 158 63 78;
  --color-error-container: 255 139 154;
  --color-on-error-container: 120 34 50;
  --color-outline-variant: 178 177 187;
  --color-scrim: 0 0 0;
}

.dark {
  /* Pure dark monochromatic matching screenshot */
  --color-surface: 24 24 27;
  --color-on-surface: 228 228 231;
  --color-surface-container-lowest: 18 18 20;
  --color-surface-container-low: 15 15 17;
  --color-surface-container: 39 39 42;
  --color-surface-container-high: 63 63 70;
  --color-surface-container-highest: 82 82 91;
  --color-surface-variant: 63 63 70;
  --color-on-surface-variant: 161 161 170;
  --color-primary: 137 180 250;
  --color-primary-dim: 116 160 230;
  --color-on-primary: 17 24 39;
  --color-primary-container: 30 58 138;
  --color-on-primary-container: 219 234 254;
  --color-error: 252 165 165;
  --color-error-container: 153 27 27;
  --color-on-error-container: 254 226 226;
  --color-outline-variant: 63 63 70;
  --color-scrim: 0 0 0;
}

body {
  font-family: 'Inter', sans-serif;
}

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

.material-symbols-outlined.fill {
  font-variation-settings: 'FILL' 1;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgb(var(--color-surface-container-highest));
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgb(var(--color-outline-variant));
}