@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

html:root {
  --family-primary: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --body-family: var(--family-primary);
  --radius: .5rem;
  --radius-small: .375rem;
  --radius-large: .75rem;
  --menu-item-radius: .5rem;
}

html:root.dark {
  --grey-900-hsl: 0, 0%, 98%;
  --grey-900: hsl(var(--grey-900-hsl));
  --grey-800: hsl(0, 0%, 92%);
  --grey-700: hsl(0, 0%, 82%);
  --grey-600: hsl(0, 0%, 70%);
  --grey-500-hsl: 0, 0%, 57%;
  --grey-500: hsl(var(--grey-500-hsl));
  --grey-400: hsl(0, 0%, 40%);
  --grey-300: hsl(0, 0%, 24%);
  --grey-200: hsl(0, 0%, 13.5%);
  --grey-100-hsl: 0, 0%, 8%;
  --grey-100: hsl(var(--grey-100-hsl));
  --grey-50-hsl: 0, 0%, 4.3%;
  --grey-50: hsl(var(--grey-50-hsl));

  --site-background: #000;
  --white: var(--grey-50);
  --scheme-main: var(--grey-50);
  --scheme-main-bis: var(--grey-100);
  --scheme-main-ter: var(--grey-100);
  --background: var(--grey-100);
  --border: var(--grey-200);
  --border-rgb: 34, 34, 34;
  --border-hover: var(--grey-300);
  --border-light: var(--grey-200);
  --card-border-color: var(--grey-200);
  --input-border-color: var(--grey-200);
  --input-hover-border-color: var(--grey-300);
  --input-background-color: var(--grey-50);
  --input-placeholder-color: var(--grey-400);
  --input-disabled-background-color: var(--grey-100);
  --input-disabled-border-color: var(--grey-200);
  --input-shadow: none;

  --text: var(--grey-800);
  --text-light: var(--grey-500);
  --text-strong: var(--grey-900);
  --text-muted: var(--grey-500);
  --logo-text-color: var(--grey-900);

  --primary-h: 160deg;
  --primary-s: 84%;
  --primary-l: 39%;
  --primary-invert: #052e1f;
  --switch-view-active-background: hsl(var(--primary-h), var(--primary-s), 34%);
  --switch-view-color: var(--grey-900);

  --success-h: 160deg;
  --success-s: 84%;
  --success-l: 39%;
  --danger-h: 350deg;
  --danger-s: 89%;
  --danger-l: 60%;
  --danger-text: hsl(351, 95%, 71%);
  --warning-h: 38deg;
  --warning-s: 92%;
  --warning-l: 50%;
  --info-h: 217deg;
  --info-s: 91%;
  --info-l: 60%;

  --shadow-xs: none;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;

  --table-row-hover-background-color: var(--grey-100);
  --dropdown-item-hover-background-color: var(--grey-100);
  --tag-color: var(--grey-700);
  --pre-background: var(--grey-100);
  --code-background: var(--grey-100);
  --button-text-hover-background-color: var(--grey-100);
  --button-hover-color: var(--grey-900);
}

html.dark,
html.dark body {
  background: #000 !important;
}

html.dark body,
html.dark button,
html.dark input,
html.dark optgroup,
html.dark select,
html.dark textarea,
html.dark h1,
html.dark h2,
html.dark h3,
html.dark h4,
html.dark h5,
html.dark h6,
html.dark .title,
html.dark .subtitle,
html.dark .input.title,
html.dark .username,
html.dark .top-menu .menu-list li,
html.dark .result-item-button,
html.dark .notifications .notifications-list .head,
html.dark .notifications .notifications-list .single-notification .user span {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html.dark body {
  letter-spacing: -0.011em;
}

html.dark h1,
html.dark h2,
html.dark h3,
html.dark .title,
html.dark .input.title {
  font-weight: 600 !important;
  letter-spacing: -0.02em;
}

html.dark .card,
html.dark .box,
html.dark .notifications .notifications-list,
html.dark .task-glance-tooltip,
html.dark .flatpickr-calendar,
html.dark .v-popper--theme-dropdown .v-popper__inner {
  background-color: var(--grey-50) !important;
  border: 1px solid var(--grey-200) !important;
  border-radius: .75rem !important;
  box-shadow: none !important;
}

html.dark .card-header {
  border-radius: .75rem .75rem 0 0 !important;
  border-inline-end: none !important;
  border-block-end: 1px solid var(--grey-200) !important;
}

html.dark .card-footer {
  background-color: var(--grey-100) !important;
  border-radius: 0 0 .75rem .75rem !important;
}

html.dark .button {
  border-radius: .5rem !important;
  box-shadow: none !important;
  text-transform: none !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em;
}

html.dark .button.is-primary,
html.dark .button.is-success {
  --button-text-color: #052e1f !important;
  color: #052e1f !important;
}

html.dark input[type="checkbox"],
html.dark input[type="radio"] {
  accent-color: var(--primary);
}

html.dark .button.is-outlined {
  border: 1px solid var(--grey-200) !important;
}

html.dark .button.is-outlined:hover {
  background-color: var(--grey-100) !important;
  border-color: var(--grey-300) !important;
}

html.dark .input,
html.dark .textarea,
html.dark .select select {
  border-radius: .5rem !important;
  box-shadow: none !important;
}

html.dark .input:focus,
html.dark .textarea:focus,
html.dark .select select:focus {
  border-color: var(--grey-400) !important;
  box-shadow: 0 0 0 3px hsla(0, 0%, 100%, .08) !important;
}

html.dark .task,
html.dark .task-view,
html.dark .switch-view,
html.dark .switch-view-button,
html.dark .task-ghost {
  border-radius: .75rem !important;
}

html.dark .switch-view {
  border: 1px solid var(--grey-200) !important;
}

html.dark .switch-view-button {
  border-radius: .5rem !important;
}

html.dark .kanban .bucket {
  background: var(--grey-100) !important;
  border: 1px solid var(--grey-200) !important;
  border-radius: .75rem !important;
}

html.dark .kanban .bucket .task {
  border: 1px solid var(--grey-200) !important;
  border-radius: .5rem !important;
}

html.dark .kanban .bucket .task:hover {
  border-color: var(--grey-300) !important;
}

html.dark .kanban .bucket-footer {
  border-radius: 0 0 .75rem .75rem !important;
}

html.dark .kanban .bucket.new-bucket {
  background: transparent !important;
  border: none !important;
}

html.dark .gantt-timeline-days .timeunit .timeunit-wrapper.today {
  color: #052e1f !important;
}

html.dark .tag:not(body) {
  border-radius: .375rem !important;
}

html.dark .v-popper--theme-tooltip .v-popper__inner {
  background: var(--grey-100) !important;
  color: var(--grey-900) !important;
  border: 1px solid var(--grey-200) !important;
  border-radius: .5rem !important;
}

html.dark .modal-dialog {
  background: hsla(0, 0%, 0%, .8) !important;
}

html.dark .update-notification {
  background: var(--grey-100) !important;
  color: var(--grey-900) !important;
  border: 1px solid var(--grey-200) !important;
}

html.dark .flatpickr-day.selected,
html.dark .flatpickr-day.startRange,
html.dark .flatpickr-day.endRange,
html.dark .flatpickr-day.selected:hover {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #052e1f !important;
}

html.dark .flatpickr-day.today {
  border-color: var(--grey-500) !important;
}

html.dark .flatpickr-day.today:hover,
html.dark .flatpickr-day.today:focus {
  background: var(--grey-200) !important;
  border-color: var(--grey-300) !important;
  color: var(--grey-900) !important;
}

html.dark .flatpickr-day.inRange {
  background: var(--grey-100) !important;
  border-color: var(--grey-100) !important;
  box-shadow: -5px 0 0 var(--grey-100), 5px 0 0 var(--grey-100) !important;
}

html.dark ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

html.dark ::-webkit-scrollbar-track {
  background: transparent;
}

html.dark ::-webkit-scrollbar-thumb {
  background: var(--grey-200);
  border-radius: 999px;
  border: 2px solid #000;
}

html.dark ::-webkit-scrollbar-thumb:hover {
  background: var(--grey-300);
}

html.dark ::selection {
  background: hsla(var(--primary-h), var(--primary-s), var(--primary-l), .35);
}