/* Anmeldeseiten im Erscheinungsbild von Ventastiq (docs/BRAND.md, Tokens wie packages/ui/src/tokens.css),
   auf PatternFly-Variablen abgebildet. Theme-Ordner heißt weiter „alinax“ (Realm-Einstellung loginTheme). */
:root {
  --vq-background: #f6f7fb;
  --vq-foreground: #0c1222;
  --vq-muted: #5d6578;
  --vq-card: #ffffff;
  --vq-border: #e3e6ef;
  --vq-accent: #4f46e5;
  --vq-accent-hover: #4338ca;
  --vq-accent-foreground: #ffffff;
  --vq-ring: rgb(79 70 229 / 0.22);
  --vq-danger: #d92d20;
  --pf-v5-global--primary-color--100: var(--vq-accent);
  --pf-v5-global--primary-color--200: var(--vq-accent-hover);
  --pf-v5-global--link--Color: var(--vq-accent);
  --pf-v5-global--link--Color--hover: var(--vq-accent-hover);
  --pf-v5-global--danger-color--100: var(--vq-danger);
  --pf-v5-global--FontFamily--text: Geist, Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --pf-v5-global--FontFamily--heading: Geist, Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --vq-background: #0a0d16;
    --vq-foreground: #eef0f7;
    --vq-muted: #949bb0;
    --vq-card: #11151f;
    --vq-border: #232938;
    --vq-accent: #8b8cff;
    --vq-accent-hover: #a3a4ff;
    --vq-accent-foreground: #0a0d16;
    --vq-ring: rgb(139 140 255 / 0.3);
    --vq-danger: #f97066;
  }
}
body,
.pf-v5-c-login {
  background:
    radial-gradient(60rem 30rem at 85% -10%, rgb(91 91 247 / 0.12), transparent 60%),
    radial-gradient(50rem 30rem at -10% 110%, rgb(22 185 160 / 0.1), transparent 60%), var(--vq-background);
  color: var(--vq-foreground);
}
.pf-v5-c-login__main {
  background: var(--vq-card);
  border: 1px solid var(--vq-border);
  border-radius: 20px;
  box-shadow:
    0 1px 2px rgb(12 18 34 / 0.04),
    0 10px 30px -12px rgb(12 18 34 / 0.12);
}
.pf-v5-c-button.pf-m-primary {
  background: var(--vq-accent);
  color: var(--vq-accent-foreground);
  border-radius: 10px;
  min-height: 44px;
  font-weight: 600;
}
.pf-v5-c-button.pf-m-primary:hover {
  background: var(--vq-accent-hover);
}
.pf-v5-c-form-control {
  border-radius: 10px;
}
.pf-v5-c-form-control:focus-within {
  box-shadow: 0 0 0 4px var(--vq-ring);
}

/* Kopfzeile: Bildmarke vor dem Namen, dunkle Schrift auf hellem Grund */
#kc-header,
#kc-header-wrapper,
.pf-v5-c-login__header,
.pf-v5-c-brand {
  color: var(--vq-foreground);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-transform: lowercase;
  font-size: 22px;
}
#kc-header-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  /* Keycloak setzt die Kopfzeilenfarbe mit !important über diese Variable; daher die Variable selbst umbelegen */
  --pf-v5-global--Color--light-100: var(--vq-foreground);
}
#kc-header-wrapper::before {
  content: "";
  width: 36px;
  height: 36px;
  flex: none;
  background: url("../img/logo-mark.svg") center / contain no-repeat;
}
/* Akzentlinien in Markenfarbe statt PatternFly-Blau */
.pf-v5-c-login__main {
  --pf-v5-c-login__main--BorderTopColor: var(--vq-border);
  border-top: 1px solid var(--vq-border);
}
.pf-v5-c-form-control {
  --pf-v5-c-form-control--after--BorderBottomColor: var(--vq-border);
  --pf-v5-c-form-control--hover--after--BorderBottomColor: var(--vq-accent);
  --pf-v5-c-form-control--focus--after--BorderBottomColor: var(--vq-accent);
}
.pf-v5-c-login__main-header {
  border-top-color: transparent !important;
}