@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap');

:root {
  --font-sora: 'Sora', sans-serif;
}

body {
  font-family: var(--font-sora);
  background-color: #fcf8fa;
  color: #1b1b1d;
  -webkit-font-smoothing: antialiased;
}

.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

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

.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: #e4e2e4;
  border-radius: 20px;
}

.touch-target {
  min-height: 48px;
  min-width: 48px;
}

.elevation-lvl1 {
  background-color: #f8fafc;
}

.elevation-lvl2 {
  box-shadow: 0px 4px 20px rgba(15, 23, 42, 0.08);
}

.elevation-lvl3 {
  box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.15);
}

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

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