@font-face {
  font-family: 'Readex Pro';
  src: url('../fonts/ReadexPro.woff2') format('woff2');
}

:root {
  --wp-text: #121212;
  --wp-background: #ffffff;
  --wp-paper: #fef6f5;
  --wp-border: rgba(18, 18, 18, 0.23);

  --pf-global--FontFamily--sans-serif: 'Readex Pro', sans-serif;
  --pf-global--FontFamily--heading--sans-serif: 'Readex Pro', sans-serif;
  --pf-global--primary-color--100: #f04b30;
  --pf-global--primary-color--200: #d63d24;
}

@media (prefers-color-scheme: dark) {
  :root {
    --wp-text: #ffffff;
    --wp-background: #121212;
    --wp-paper: #1d1514;
    --wp-border: rgba(255, 255, 255, 0.23);
  }

  .pf-c-form__helper-text.pf-m-error {
    color: #f55926;
  }
}

.login-pf body {
  background: var(--wp-background);
  color: var(--wp-text);
  font-family: 'Readex Pro', sans-serif;
}

.login-pf a,
.login-pf a:hover {
  color: var(--pf-global--primary-color--100);
}

#kc-header-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--wp-text);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

#kc-header-wrapper::before {
  content: '';
  width: 40px;
  height: 40px;
  background-color: currentColor;
  mask: url('../img/logo.svg') center / contain no-repeat;
}

.pf-c-form-control,
.pf-c-button.pf-m-control {
  background-color: var(--wp-background);
  color: var(--wp-text);
}

.card-pf {
  background: var(--wp-paper);
  border: 1px solid var(--wp-border);
  border-radius: 8px;
  box-shadow: none;
}