/* Apparat Design Guide v2.5 applied to the keycloak.v2 login theme (PatternFly 5, dark).
   Black and white carry the page; Bernsteingelb is the accent. Keep in sync with brand/tokens.css. */

@font-face { font-family: "Garant Apparat"; src: url("../fonts/GarantApparat-Light.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Garant Apparat"; src: url("../fonts/GarantApparat-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Garant Apparat"; src: url("../fonts/GarantApparat-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Garant Apparat"; src: url("../fonts/GarantApparat-Black.woff2") format("woff2"); font-weight: 900; font-display: swap; }

:root {
  --apparat-yellow: #ffcd00;
  --apparat-black: #0f0f0f;
  --apparat-white: #ffffff;
  --apparat-surface: #1a1a1a;
  --apparat-line: #3a3a3a;

  --keycloak-logo-url: url("../img/logo-8e27d99e06.svg");
  --keycloak-logo-height: 56px;
  --keycloak-logo-width: 190px;
  --keycloak-card-top-color: var(--apparat-yellow);
}

/* Applies on top of PatternFly's dark theme tokens. */
:root.pf-v5-theme-dark {
  --pf-v5-global--FontFamily--text: "Garant Apparat", system-ui, sans-serif;
  --pf-v5-global--FontFamily--heading: "Garant Apparat", system-ui, sans-serif;
  --pf-v5-global--BackgroundColor--100: var(--apparat-surface);
  --pf-v5-global--BackgroundColor--dark-100: var(--apparat-black);
  --pf-v5-global--Color--100: var(--apparat-white);
  --pf-v5-global--Color--200: #c8c8c8;
  --pf-v5-global--BorderColor--100: var(--apparat-line);
  --pf-v5-global--primary-color--100: var(--apparat-yellow);
  --pf-v5-global--link--Color: var(--apparat-white);
  --pf-v5-global--link--Color--hover: var(--apparat-yellow);
  --pf-v5-global--active-color--100: var(--apparat-yellow);
  --pf-v5-global--BorderRadius--sm: 0;
}

.login-pf body {
  background: var(--apparat-black);
  color: var(--apparat-white);
}

.pf-v5-c-login__main {
  background: var(--apparat-surface);
  border-radius: 0;
  box-shadow: none;
}

.pf-v5-c-login__main-header .pf-v5-c-title,
#kc-page-title {
  color: var(--apparat-white);
  font-weight: 900;
}

/* Primary action is the yellow accent: black text on Bernsteingelb. */
.pf-v5-c-button.pf-m-primary {
  --pf-v5-c-button--m-primary--BackgroundColor: var(--apparat-yellow);
  --pf-v5-c-button--m-primary--hover--BackgroundColor: #e6b800;
  --pf-v5-c-button--m-primary--focus--BackgroundColor: #e6b800;
  --pf-v5-c-button--m-primary--active--BackgroundColor: #e6b800;
  --pf-v5-c-button--m-primary--Color: var(--apparat-black);
  --pf-v5-c-button--m-primary--hover--Color: var(--apparat-black);
  --pf-v5-c-button--m-primary--focus--Color: var(--apparat-black);
  --pf-v5-c-button--m-primary--active--Color: var(--apparat-black);
  --pf-v5-c-button--BorderRadius: 0;
  font-weight: 700;
}

.pf-v5-c-form-control {
  --pf-v5-c-form-control--BorderRadius: 0;
  --pf-v5-c-form-control--BackgroundColor: var(--apparat-black);
  --pf-v5-c-form-control--before--BorderColor: var(--apparat-line);
  --pf-v5-c-form-control--after--BorderBottomColor: var(--apparat-line);
  --pf-v5-c-form-control--hover--after--BorderBottomColor: var(--apparat-white);
  --pf-v5-c-form-control--focus--after--BorderBottomColor: var(--apparat-yellow);
}

a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

:focus-visible {
  outline: 2px solid var(--apparat-yellow);
  outline-offset: 2px;
}

/* Claim below the card. */
.pf-v5-c-login__container::after {
  content: "iGaming with a German Accent";
  display: block;
  margin-top: 1.5rem;
  text-align: center;
  font-weight: 700;
  color: var(--apparat-white);
  opacity: 0.8;
}