/* OctoVyre brand layer over keycloak.v2. Colours match design-system/octovyre/MASTER.md. */
:root {
  --ov-navy: #00235b;
  --ov-midnight: #071d43;
  --ov-champagne: #e8c6b1;
  --ov-canvas: #f7f8fa;
  --ov-text: #0b1a33;
  --ov-muted: #5b6578;

  /* The realm's displayNameHtml renders <div class="kc-logo-text">: show the official wordmark. */
  --keycloak-logo-url: url('../img/octovyre-wordmark-white.png');
  --keycloak-bg-logo-url: none;
  --keycloak-logo-height: 48px;
  --keycloak-logo-width: 222px;
  --keycloak-card-top-color: var(--ov-champagne);

  --pf-v5-global--primary-color--100: var(--ov-navy);
  --pf-v5-global--primary-color--200: var(--ov-midnight);
  --pf-v5-global--link--Color: var(--ov-navy);
  --pf-v5-global--link--Color--hover: var(--ov-midnight);
  --pf-v5-global--FontFamily--text:
    Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', 'Noto Sans Arabic', sans-serif;
  --pf-v5-global--FontFamily--heading: var(--pf-v5-global--FontFamily--text);
}

.login-pf body,
.pf-v5-c-login {
  background:
    radial-gradient(60rem 40rem at 85% 110%, rgb(232 198 177 / 0.1), transparent 60%),
    var(--ov-midnight);
}

.pf-v5-c-login__header {
  margin-block-end: 1.75rem;
}

.pf-v5-c-login__main {
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 24px 48px -12px rgb(0 0 0 / 0.35),
    0 2px 6px rgb(0 0 0 / 0.12);
}

.pf-v5-c-login__main-header {
  border-top-width: 3px;
  padding-block-start: 2rem;
}

.pf-v5-c-login__main-header .pf-v5-c-title,
#kc-page-title {
  color: var(--ov-text);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.pf-v5-c-form__label-text {
  color: var(--ov-text);
  font-weight: 500;
}

.pf-v5-c-form-control {
  border-radius: 8px;
  --pf-v5-c-form-control--focus--after--BorderBottomColor: var(--ov-navy);
}

.pf-v5-c-button.pf-m-primary {
  --pf-v5-c-button--m-primary--BackgroundColor: var(--ov-navy);
  --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--ov-midnight);
  --pf-v5-c-button--m-primary--focus--BackgroundColor: var(--ov-midnight);
  --pf-v5-c-button--m-primary--active--BackgroundColor: var(--ov-midnight);
  border-radius: 8px;
  font-weight: 500;
  min-height: 44px;
}

.pf-v5-c-button:focus-visible,
.pf-v5-c-form-control:focus-within,
a:focus-visible {
  outline: 2px solid #2b54a8;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}