:root {
  --color-bg: light-dark(#f2f2f2, #1f1f1f);
  --color-surface: light-dark(white, var(--zinc-900));
  --color-text: light-dark(var(--zinc-950), white);
  --color-text-reversed: light-dark(white, var(--zinc-950));
  --color-text-subtle: light-dark(var(--zinc-500), var(--zinc-400));
  --color-link: light-dark(var(--blue-700), var(--blue-400));
  --color-border-light: light-dark(var(--zinc-100), var(--zinc-800));
  --color-border: light-dark(var(--zinc-200), var(--zinc-700));
  --color-border-dark: light-dark(var(--zinc-400), var(--zinc-600));
  --color-selected: light-dark(#c0d2ed, #7e96ba);
  --color-selected-dark: light-dark(var(--blue-300), var(--blue-800));
  --color-highlight: light-dark(var(--yellow-200), var(--yellow-900));

  --color-primary: light-dark(#023047, var(--zinc-50));
  --color-secondary: light-dark(#e9ecf1, var(--zinc-800));
  --color-negative: light-dark(var(--red-800), var(--red-900));
  --color-positive: light-dark(var(--emerald-700), var(--green-800));
  --color-warning: var(--amber-600);

  /* customizations */
  --color-standout: #3b5d8e;
  --color-link: light-dark(#3b5d8e, #b3c5de);
  --color-admin: var(--fuchsia-700);
  --color-user: var(--gray-600);
  --color-developer: var(--amber-600);

  --default-font-family: "JetBrains Mono";

  --text-xs: 0.7rem;
  --text-md: 0.76rem;
  --text-sm: 0.8rem;
  --text-base: 0.875rem;
  --text-lg: 1rem;

  --shadow-sm: 0px .125rem .25rem 0px light-dark(rgb(0 0 0 / 7.5%), rgb(255 255 255 / 7%));
  --shadow-md: 1px .2rem .5rem 1px light-dark(rgb(0 0 0 / 10%), rgb(255 255 255 / 7%));
}

.text-warning {
  color: var(--color-warning);
}

.text-standout {
  color: var(--color-standout);
}

.text-developer {
  color: var(--color-developer);
}

.text-underline {
  text-decoration: underline;
}

* {
  border-color: var(--color-border);
  scrollbar-color: #C1C1C1 transparent;
  scrollbar-width: thin;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-synthesis-weight: none;
  overscroll-behavior: none;
  text-rendering: optimizeLegibility;
}

.turbo-progress-bar {
  background-color: var(--color-primary);
}

::selection {
  background-color: var(--color-selected);
}

/* customizations */
body[data-color-scheme="light"] {
  background-image: linear-gradient(180deg, #f8f9fa, rgb(255 255 255 / 55%));
}