:root {
  --teal-500: #03989e;
  --teal-600: #03858a;
  --teal-700: #026c70;
  --teal-800: #025457;
  --blue-400: #8280f6;
  --blue-500: #5350ef;
  --pink-200: #fce8e6;
  --pink-900: #6c4843;
  --green-500: #97c076;
  --yellow-500: #f5c572;
  --red-500: #f84464;
  --teal-primary: var(--teal-500);
  --teal-secondary: var(--teal-600);
  --blue-primary: var(--blue-500);
  --pink-primary: var(--pink-200);
}

html[data-theme="dark"] {
  --teal-primary: var(--teal-800);
  --teal-secondary: var(--teal-700);
  --blue-primary: var(--blue-400);
  --pink-primary: var(--pink-900);
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] {
    --teal-primary: var(--teal-800);
    --teal-secondary: var(--teal-700);
    --blue-primary: var(--blue-400);
    --pink-primary: var(--pink-900);
  }
}

html[data-theme="auto"],
html[data-theme="light"],
html[data-theme="dark"],
:root {
  --primary: var(--teal-primary);
  --secondary: var(--teal-secondary);
  --link-hover-color: var(--blue-primary);
  --object-tools-bg: var(--blue-500);
  --accent: #fff;
  --header-color: var(--pink-200);
  --selected-row: var(--pink-primary);
  --link-selected-fg: var(--link-hover-color);
  --font-family-primary: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui,
    Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", "Noto Color Emoji";
}