@import 'open-props/postcss/style';

@import 'open-props/colors-hsl';
@import 'open-props/shadows';
@import 'open-props/zindex';

html {
  --brand-1: #035aa1;
  --brand-2: #f50000;
  --border-color: var(--gray-4);
  --foreground: black;
  --background: var(--gray-1);
  --surface-0: var(--background);
  --surface-1: white;
  --surface-2: var(--gray-1);
  --surface-3: var(--gray-2);
  --text-mute: var(--stone-4-hsl);
  --info-fg: 0 0% 100%;
  --info-bg: var(--blue-6-hsl);
  --negative: var(--red-9-hsl);
  --gender-male: var(--blue-5-hsl);
  --gender-female: var(--pink-7-hsl);

  color: var(--foreground);
  background-color: var(--background);
}

:where(.dark, .body--dark) {
  --brand-1: var(--blue-7);
  --brand-2: #f50000;
  --border-color: var(--gray-8);
  --foreground: white;
  --background: var(--gray-10);
  --surface-0: var(--background);
  --surface-1: var(--gray-11);
  --surface-2: var(--gray-10);
  --surface-3: var(--gray-9);
  --text-mute: var(--stone-8-hsl);
}

::-webkit-scrollbar {
  width: 0.5rem;
  height: 0.5rem;
}

::-webkit-scrollbar-thumb {
  border: 0.15rem solid rgba(0, 0, 0, 0);
  background-color: hsla(0, 0%, 50%, 0.75);
  background-clip: padding-box;
  border-radius: 0.5rem;
}

.bordered {
  border: 1px solid var(--border-color);
}

.rounded {
  border-radius: var(--radius-3);
}

.surface-1 {
  background-color: var(--surface-1) !important;
}

.surface-2 {
  background-color: var(--surface-2) !important;
}

.surface-3 {
  background-color: var(--surface-3) !important;
}