* {
  box-sizing: border-box;
}

html,
body,
#app {
  margin: 0;
  height: 100%;
  width: 100%;
}

body {
  background: var(--surface-0);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: var(--font-size-base);
}

button {
  font-family: var(--font-ui);
  font-size: var(--font-size-base);
  color: var(--text-primary);
  background: var(--surface-2);
  border: var(--panel-border);
  border-radius: var(--panel-radius);
  padding: var(--space-1) var(--space-3);
  cursor: pointer;
}

button:hover:not(:disabled) {
  background: var(--surface-3);
}

button:disabled {
  opacity: 0.5;
  cursor: default;
}

input,
select,
textarea {
  font-family: var(--font-ui);
  font-size: var(--font-size-base);
  color: var(--text-primary);
  background: var(--surface-0);
  border: var(--panel-border);
  border-radius: 4px;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-thumb {
  background: var(--surface-3);
  border-radius: 5px;
}
::-webkit-scrollbar-track {
  background: transparent;
}