:root {
  --bg-page: oklch(97.5% 0.004 75);
  --bg-sidebar: oklch(96% 0.005 75);
  --bg-card: oklch(99% 0.003 75);
  --bg-white: oklch(100% 0 0);

  --border: oklch(90% 0.006 75);
  --border-soft: oklch(89% 0.006 75);

  --text: oklch(24% 0.01 75);
  --text-muted: oklch(55% 0.01 75);
  --text-muted-2: oklch(60% 0.01 75);
  --text-muted-3: oklch(52% 0.01 75);

  --accent: oklch(62% 0.13 35);
  --accent-text: oklch(99% 0 0);

  --dot-online: oklch(65% 0.15 145);
  --dot-offline: oklch(75% 0.01 75);

  --shadow: oklch(0% 0 0 / 0.06);
  --empty-accent-tint: oklch(91% 0.03 35);

  --row-selected-bg: oklch(91% 0.02 35);
  --message-row-hover-bg: oklch(24% 0.01 75 / 0.035);

  --avatar-bg-1: oklch(90% 0.05 25);
  --avatar-text-1: oklch(35% 0.09 25);
  --avatar-bg-2: oklch(90% 0.05 205);
  --avatar-text-2: oklch(35% 0.09 205);
  --avatar-bg-3: oklch(90% 0.05 140);
  --avatar-text-3: oklch(35% 0.09 140);
  --avatar-bg-4: oklch(90% 0.05 280);
  --avatar-text-4: oklch(35% 0.09 280);
  --avatar-bg-5: oklch(90% 0.05 340);
  --avatar-text-5: oklch(35% 0.09 340);
}

html[data-theme='dark'] {
  --bg-page: oklch(20% 0.006 75);
  --bg-sidebar: oklch(23% 0.007 75);
  --bg-card: oklch(26% 0.007 75);
  --bg-white: oklch(27% 0.007 75);

  --border: oklch(33% 0.008 75);
  --border-soft: oklch(33% 0.008 75);

  --text: oklch(92% 0.005 75);
  --text-muted: oklch(68% 0.01 75);
  --text-muted-2: oklch(63% 0.01 75);
  --text-muted-3: oklch(65% 0.01 75);

  --accent: oklch(68% 0.13 35);
  --accent-text: oklch(99% 0 0);

  --dot-offline: oklch(45% 0.01 75);

  --shadow: oklch(0% 0 0 / 0.5);
  --empty-accent-tint: oklch(32% 0.06 35);

  --row-selected-bg: oklch(33% 0.04 35);
  --message-row-hover-bg: oklch(92% 0.005 75 / 0.045);
}