/* Login pages in bovender.de's style: its fonts and backgrounds, with a
   petrol blue accent (#104250; lighter shades of it in the dark scheme).
   Keycloak adds the class pf-v5-theme-dark to <html> when the OS prefers a
   dark scheme. */

@font-face {
  font-family: "IBM Plex Sans Light";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/IBMPlexSans-Light.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans Light";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/IBMPlexSans-Bold.woff2") format("woff2");
}

:root {
  --bov-page: #eef1f3;
  --bov-text: #2c3e50;
  --bov-accent: #104250;
  --bov-accent-hover: #165b6f;
  --bov-logo: url("../img/gaenseliesel.svg");

  --keycloak-bg-logo-url: none;
  --keycloak-card-top-color: var(--bov-accent);

  --pf-v5-global--FontFamily--text: "IBM Plex Sans Light", system-ui, sans-serif;
  --pf-v5-global--FontFamily--heading: "IBM Plex Sans Light", system-ui, sans-serif;
  --pf-v5-global--primary-color--100: var(--bov-accent);
  --pf-v5-global--primary-color--200: var(--bov-accent-hover);
  --pf-v5-global--link--Color: var(--bov-accent);
  --pf-v5-global--link--Color--hover: var(--bov-accent-hover);
}

:root.pf-v5-theme-dark {
  --bov-page: #292e32;
  --bov-text: #eeeeee;
  --bov-accent: #48b3d1;
  --bov-accent-hover: #7cc9de;
  --bov-logo: url("../img/gaenseliesel-dark.svg");
}

.login-pf body {
  background-color: var(--bov-page);
}

/* PatternFly centres logo, title and form as one block, with 4rem above
   the logo and 3rem between title and form on wide screens, so the form
   sat well below the middle. Without the top margin and with extra
   padding at the bottom, the form sits just below the centre. */
.login-pf .pf-v5-c-login {
  --pf-v5-c-login__header--xl--MarginTop: 0;
  --pf-v5-c-login__header--xl--MarginBottom: var(--pf-v5-global--spacer--xl);
  --pf-v5-c-login--PaddingBottom: 6rem;
}

/* The page title (realm display name). keycloak.v2 sets white, uppercase,
   wide letter spacing, the colour with !important. */
#kc-header-wrapper {
  color: var(--bov-text) !important;
  font-size: 26px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
  text-align: center;
}

#kc-header-wrapper::before {
  content: "";
  display: block;
  width: 88px;
  height: 88px;
  margin: 0 auto 1rem;
  background: var(--bov-logo) no-repeat center / contain;
}

/* Primary buttons: white text in both schemes; in the dark scheme on a
   mid tone of the accent (the light link colour would be too pale). */
.pf-v5-c-button.pf-m-primary {
  --pf-v5-c-button--m-primary--Color: #ffffff;
  --pf-v5-c-button--m-primary--hover--Color: #ffffff;
}
:root.pf-v5-theme-dark .pf-v5-c-button.pf-m-primary {
  --pf-v5-c-button--m-primary--BackgroundColor: #196a80;
  --pf-v5-c-button--m-primary--hover--BackgroundColor: #15586a;
}