/*
 * KeycloakPro brand layer for the admin and account consoles (PatternFly v5).
 * Light only (darkMode=false in theme.properties), matching the KeycloakPro landing site:
 * indigo brand, navy "steel" neutrals, white surfaces, Manrope headings, Instrument Sans body.
 */

@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --kp-brand: #4f46e5;
  --kp-brand-hover: #4338ca;
  --kp-brand-50: #eef2ff;
  --kp-accent: #06b6d4;
  --kp-steel-50: #f7f8fc;
  --kp-steel-200: #d9dcec;
  --kp-steel-600: #545e83;
  --kp-steel-900: #1b2240;

  --pf-v5-global--FontFamily--text: "Instrument Sans", -apple-system, "Segoe UI", helvetica, arial, sans-serif;
  --pf-v5-global--FontFamily--heading: "Manrope", "Instrument Sans", -apple-system, "Segoe UI", helvetica, arial, sans-serif;

  /*
   * Instrument Sans and Manrope render larger and heavier than PatternFly's Red Hat fonts at
   * the same size, so the type scale steps down one notch (14px UI text, like the landing
   * site) and "bold" is semibold. PatternFly defaults: xs 12, sm 14, md 16, lg 18, xl 20,
   * 2xl 24, 3xl 28, 4xl 36px; bold 700.
   */
  --pf-v5-global--FontSize--xs: 0.75rem;
  --pf-v5-global--FontSize--sm: 0.8125rem;
  --pf-v5-global--FontSize--md: 0.875rem;
  --pf-v5-global--FontSize--lg: 1rem;
  --pf-v5-global--FontSize--xl: 1.125rem;
  --pf-v5-global--FontSize--2xl: 1.25rem;
  --pf-v5-global--FontSize--3xl: 1.5rem;
  --pf-v5-global--FontSize--4xl: 1.75rem;
  --pf-v5-global--FontWeight--bold: 600;

  /* Text in the landing site's navy neutrals instead of PatternFly's near-black. The light
     masthead/sidebar variants read the *--dark-* tokens, so those are set here too. */
  --pf-v5-global--Color--dark-100: var(--kp-steel-900);
  --pf-v5-global--Color--dark-200: var(--kp-steel-600);
  --pf-v5-global--Color--100: var(--kp-steel-900);
  --pf-v5-global--Color--200: var(--kp-steel-600);

  /* The masthead/sidebar light variants below read the *--dark-* tokens, so brand those too. */
  --pf-v5-global--primary-color--dark-100: var(--kp-brand);
  --pf-v5-global--link--Color--dark: var(--kp-brand);
  --pf-v5-global--link--Color--dark--hover: var(--kp-brand-hover);
  --pf-v5-global--primary-color--100: var(--kp-brand);
  --pf-v5-global--primary-color--200: var(--kp-brand-hover);
  --pf-v5-global--link--Color: var(--kp-brand);
  --pf-v5-global--link--Color--hover: var(--kp-brand-hover);
  --pf-v5-global--active-color--100: var(--kp-brand);
  --pf-v5-global--BorderRadius--sm: 8px;
  --pf-v5-global--BackgroundColor--200: var(--kp-steel-50);
}

/*
 * PatternFly 5's own light variants (.pf-m-light) of the masthead, nav and page sidebar,
 * applied by default so every nested text/icon color flips to its light-surface value.
 * Copied from the PatternFly 5 stylesheet with `.pf-m-light` removed from the selectors.
 */
.pf-v5-c-masthead{--pf-v5-global--Color--100:var(--pf-v5-global--Color--dark-100);--pf-v5-global--Color--200:var(--pf-v5-global--Color--dark-200);--pf-v5-global--BorderColor--100:var(--pf-v5-global--BorderColor--dark-100);--pf-v5-global--primary-color--100:var(--pf-v5-global--primary-color--dark-100);--pf-v5-global--link--Color:var(--pf-v5-global--link--Color--dark);--pf-v5-global--link--Color--hover:var(--pf-v5-global--link--Color--dark--hover);--pf-v5-global--BackgroundColor--100:var(--pf-v5-global--BackgroundColor--light-100);--pf-v5-global--icon--Color--light:var(--pf-v5-global--icon--Color--light--dark);--pf-v5-global--icon--Color--dark:var(--pf-v5-global--icon--Color--dark--dark)}
.pf-v5-c-masthead{color:var(--pf-v5-global--Color--100);--pf-v5-c-masthead--BackgroundColor:var(--pf-v5-c-masthead--m-light--BackgroundColor);--pf-v5-c-masthead__main--BorderBottomColor:var(--pf-v5-c-masthead--m-light__main--BorderBottomColor)}
.pf-v5-c-nav{--pf-v5-c-nav__item--before--BorderColor:var(--pf-v5-c-nav--m-light__item--before--BorderColor);--pf-v5-c-nav__item--m-current--not--m-expanded__link--BackgroundColor:var(--pf-v5-c-nav--m-light__item--m-current--not--m-expanded__link--BackgroundColor);--pf-v5-c-nav__link--Color:var(--pf-v5-c-nav--m-light__link--Color);--pf-v5-c-nav__link--hover--Color:var(--pf-v5-c-nav--m-light__link--hover--Color);--pf-v5-c-nav__link--focus--Color:var(--pf-v5-c-nav--m-light__link--focus--Color);--pf-v5-c-nav__link--active--Color:var(--pf-v5-c-nav--m-light__link--active--Color);--pf-v5-c-nav__link--m-current--Color:var(--pf-v5-c-nav--m-light__link--m-current--Color);--pf-v5-c-nav__link--hover--BackgroundColor:var(--pf-v5-c-nav--m-light__link--hover--BackgroundColor);--pf-v5-c-nav__link--focus--BackgroundColor:var(--pf-v5-c-nav--m-light__link--focus--BackgroundColor);--pf-v5-c-nav__link--active--BackgroundColor:var(--pf-v5-c-nav--m-light__link--active--BackgroundColor);--pf-v5-c-nav__link--m-current--BackgroundColor:var(--pf-v5-c-nav--m-light__link--m-current--BackgroundColor);--pf-v5-c-nav__link--before--BorderColor:var(--pf-v5-c-nav--m-light__link--before--BorderColor);--pf-v5-c-nav__link--after--BorderColor:var(--pf-v5-c-nav--m-light__link--after--BorderColor);--pf-v5-c-nav__link--m-current--after--BorderColor:var(--pf-v5-c-nav--m-light__link--m-current--after--BorderColor);--pf-v5-c-nav__subnav__link--hover--after--BorderColor:var(--pf-v5-c-nav--m-light__subnav__link--hover--after--BorderColor);--pf-v5-c-nav__subnav__link--focus--after--BorderColor:var(--pf-v5-c-nav--m-light__subnav__link--focus--after--BorderColor);--pf-v5-c-nav__subnav__link--active--after--BorderColor:var(--pf-v5-c-nav--m-light__subnav__link--active--after--BorderColor);--pf-v5-c-nav__subnav__link--m-current--after--BorderColor:var(--pf-v5-c-nav--m-light__subnav__link--m-current--after--BorderColor);--pf-v5-c-nav__section-title--Color:var(--pf-v5-c-nav--m-light__section-title--Color);--pf-v5-c-nav__section-title--BorderBottomColor:var(--pf-v5-c-nav--m-light__section-title--BorderBottomColor)}
.pf-v5-c-nav .pf-v5-c-divider{--pf-v5-c-divider--after--BackgroundColor:var(--pf-v5-c-nav--m-light--c-divider--BackgroundColor)}
.pf-v5-c-page__sidebar{--pf-v5-global--Color--100:var(--pf-v5-global--Color--dark-100);--pf-v5-global--Color--200:var(--pf-v5-global--Color--dark-200);--pf-v5-global--BorderColor--100:var(--pf-v5-global--BorderColor--dark-100);--pf-v5-global--primary-color--100:var(--pf-v5-global--primary-color--dark-100);--pf-v5-global--link--Color:var(--pf-v5-global--link--Color--dark);--pf-v5-global--link--Color--hover:var(--pf-v5-global--link--Color--dark--hover);--pf-v5-global--BackgroundColor--100:var(--pf-v5-global--BackgroundColor--light-100);--pf-v5-global--icon--Color--light:var(--pf-v5-global--icon--Color--light--dark);--pf-v5-global--icon--Color--dark:var(--pf-v5-global--icon--Color--dark--dark)}
.pf-v5-c-page__sidebar{color:var(--pf-v5-global--Color--100);--pf-v5-c-page__sidebar--BackgroundColor:var(--pf-v5-c-page__sidebar--m-light--BackgroundColor);border-inline-end:var(--pf-v5-c-page__sidebar--m-light--BorderRightWidth)solid var(--pf-v5-c-page__sidebar--m-light--BorderRightColor)}

/* White masthead with a hairline border, like the landing site's navbar. */
.pf-v5-c-masthead {
  --pf-v5-c-masthead--BackgroundColor: #ffffff;
  border-bottom: 1px solid var(--kp-steel-200);
  box-shadow: 0 1px 2px rgba(27, 34, 64, 0.06);
}

.pf-v5-c-masthead .pf-v5-c-toolbar {
  --pf-v5-c-toolbar--BackgroundColor: transparent;
}

.pf-v5-c-page__sidebar {
  --pf-v5-c-page__sidebar--BackgroundColor: #ffffff;
  border-inline-end: 1px solid var(--kp-steel-200);
}

/* Current page in the sidebar: indigo tint and accent bar. */
.pf-v5-c-nav {
  --pf-v5-c-nav--m-light__link--m-current--BackgroundColor: var(--kp-brand-50);
  --pf-v5-c-nav--m-light__item--m-current--not--m-expanded__link--BackgroundColor: var(--kp-brand-50);
  --pf-v5-c-nav--m-light__link--m-current--Color: var(--kp-brand);
  --pf-v5-c-nav--m-light__link--m-current--after--BorderColor: var(--kp-brand);
  --pf-v5-c-nav--m-light__link--hover--BackgroundColor: var(--kp-steel-50);
}

/* The console's pre-React loading screen switches to dark with the OS; keep it light. */
@media (prefers-color-scheme: dark) {
  .keycloak__loading-container {
    color: var(--kp-steel-900);
    background-color: #ffffff;
  }
}

h1,
h2,
h3,
.pf-v5-c-title {
  letter-spacing: -0.02em;
}

.pf-v5-c-button.pf-m-primary {
  font-weight: 600;
  box-shadow: 0 4px 16px -4px rgba(79, 70, 229, 0.45);
}

.pf-v5-c-button.pf-m-primary:hover {
  box-shadow: 0 6px 20px -4px rgba(79, 70, 229, 0.55);
}

.pf-v5-c-card {
  border-radius: 16px;
}

/* Realm dashboard "Get started" cards. */
.keycloakpro__get-started-card {
  border: 1px solid var(--kp-steel-200);
  box-shadow: 0 1px 2px rgba(27, 34, 64, 0.06);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.keycloakpro__get-started-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(27, 34, 64, 0.08);
}