.hanko-dark {
  --color: #ffffff;
  --color-shade-1: #d8dee3;
  --color-shade-2: #555555;
  --brand-color: #506cf0;
  --brand-color-shade-1: #555555;
  --background-color: #000000;
  --headline1-font-size: 29px;
  --headline2-font-size: 16px;
  --headline1-margin: 10px 40px;
  --border-radius: 6px;
  --font-size: 14px;
  --item-height: 36px;
  --link-color: #1c73e8;
  --divider-padding: 0 15px;
}

hanko-auth {
  --container-max-width: 640px;
  --container-padding: 40px;
}

hanko-profile {
  --container-max-width: 550px;
  --container-padding: 30px;
}

.hanko-dark::part(container) {
  border: solid 1px var(--color-shade-1);
  border-radius: 6px;
}

.hanko-dark::part(headline1),
.hanko-dark::part(headline2) {
  color: var(--color);
  line-height: 36px;
}

.hanko-dark::part(form-item) {
  min-width: 100%;
}

.hanko-dark::part(input) {
  background-color: var(--background-color);
  margin-bottom: 12px;
}

.hanko-dark::part(secondary-button) {
  border-color: var(--color-shade-1);
}

.hanko-dark::part(divider) {
  margin: 24px 0;
}