/*
 * Certifactua's Keycloak login theme.
 *
 * ============================================================================================
 *  WHY THIS EXISTS
 * ============================================================================================
 *
 *  The sign-in page is the FIRST screen anybody sees, and it was Keycloak's stock theme: a plain
 *  text wordmark, Red Hat's typeface, Keycloak's blue. A person arriving from certifactua.com and
 *  landing on that has been handed to somebody else, and the whole product reads as unfinished
 *  because of the one page that is not ours.
 *
 * ============================================================================================
 *  ⛔ THE TOKENS ARE COPIED, AND THAT IS A REAL COST, STATED
 * ============================================================================================
 *
 *  Every value below is duplicated from `packages/ui/src/styles/tokens.css`. Keycloak serves this
 *  stylesheet from its own JAR-like theme directory: it cannot import from a pnpm workspace, and
 *  there is no build step wiring the two together.
 *
 *  So these WILL drift. The mitigation is that each one names its token, so a person changing
 *  `--ctf-teal` can grep for it and find this file. That is weaker than a shared source and it is
 *  the honest state; a build step that generated this from tokens.css would be better and is not
 *  what today needed.
 *
 * ============================================================================================
 *  ⛔ SELF-HOSTED INTER, NOT A CDN
 * ============================================================================================
 *
 *  `packages/ui/src/styles/fonts.css`: "never a webfont CDN; an operator may run this where
 *  Google Fonts is not reachable, and a login page that falls back to Times because a third party
 *  is unreachable is a login page that looks broken." The same woff2 file the portals use is
 *  copied into this theme's own resources.
 */

@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('../fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

:root {
  /* --ctf-navy-900 */   --c-navy: #0a1d3a;
  /* --ctf-navy-700 */   --c-navy-700: #132e5e;
  /* --ctf-teal */       --c-teal: #00a79d;
  /* --ctf-teal-text */  --c-teal-text: #0b7e76;
  /* --ctf-ink */        --c-ink: #0a1d3a;
  /* --ctf-ink-muted */  --c-ink-muted: #55657d;
  /* --ctf-line */       --c-line: #e2e8f0;
  /* --ctf-surface */    --c-surface: #ffffff;
  /* --ctf-surface-2 */  --c-surface-2: #f6f8fb;
  /* --ctf-focus-halo */ --c-focus-halo: rgb(11 126 118 / 22%);
  --c-radius: 12px;
}

/* ------------------------------------------------------------------ the page */

body,
.login-pf body {
  /*
   * ⛔ A LIGHT GROUND, replacing Keycloak's dark photographic background. That background is a
   * raster image served from the parent theme; leaving it and drawing a light card on top gives a
   * page that flashes dark then light on every load.
   */
  background: var(--c-surface-2) !important;
  font-family: 'Inter Variable', Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--c-ink);
}

.login-pf-page {
  padding-top: 48px;
}

/* ------------------------------------------------------------------ the mark */

/*
 * ⛔ THE WORDMARK IS AN IMAGE, AND THE TEXT IS HIDDEN RATHER THAN REMOVED. Keycloak renders the
 * realm's displayName here from a template this theme deliberately does not fork. `font-size: 0`
 * keeps the element — and its text — in the accessibility tree for a screen reader while showing
 * the logo to everybody else.
 */
#kc-header,
.login-pf-page .login-pf-header {
  margin-bottom: 22px;
}

#kc-header-wrapper {
  font-size: 0 !important;
  line-height: 0 !important;
  padding: 0 !important;
  height: 46px;
  background: url('../img/logo.svg') center / contain no-repeat;
}

/* ------------------------------------------------------------------ the card */

.card-pf {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--c-radius);
  /* Keycloak's stock card has a 4px accent stripe on top. Ours is the brand teal, not its blue. */
  border-top: 3px solid var(--c-teal);
  box-shadow: 0 1px 2px rgb(10 29 58 / 6%), 0 8px 24px rgb(10 29 58 / 6%);
  padding: 32px 34px 30px;
  max-width: 27rem;
  margin: 0 auto;
}

#kc-page-title {
  font-size: 1.4rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--c-ink);
  margin-bottom: 4px;
}

/* ------------------------------------------------------------------ fields */

.pf-c-form-control,
input[type='text'],
input[type='email'],
input[type='password'] {
  /*
   * ⛔ A REAL BORDER, not Keycloak's bottom-rule-only field. A single underline reads as a form
   * that has not loaded its styles, which on a sign-in page is exactly the wrong impression.
   */
  border: 1px solid var(--c-line) !important;
  border-radius: 8px !important;
  padding: 11px 13px !important;
  height: auto !important;
  font-size: 0.95rem;
  color: var(--c-ink);
  background: var(--c-surface);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.pf-c-form-control:focus,
input[type='text']:focus,
input[type='email']:focus,
input[type='password']:focus {
  border-color: var(--c-teal-text) !important;
  box-shadow: 0 0 0 3px var(--c-focus-halo) !important;
  outline: none;
}

.pf-c-form__label-text,
label {
  font-weight: 550;
  font-size: 0.88rem;
  color: var(--c-ink);
}

/* ------------------------------------------------------------------ buttons */

.pf-c-button.pf-m-primary,
input[type='submit'] {
  background: var(--c-navy) !important;
  border: 1px solid var(--c-navy) !important;
  border-radius: 9px !important;
  padding: 12px 20px !important;
  font-weight: 620;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
}

.pf-c-button.pf-m-primary:hover,
input[type='submit']:hover {
  background: var(--c-navy-700) !important;
  border-color: var(--c-navy-700) !important;
}

.pf-c-button.pf-m-primary:focus-visible,
input[type='submit']:focus-visible {
  outline: 2px solid var(--c-teal-text);
  outline-offset: 2px;
}

/* ------------------------------------------------------------------ links */

a,
#kc-registration a,
#kc-form-options a {
  color: var(--c-teal-text);
  font-weight: 550;
}

a:hover {
  color: var(--c-navy-700);
}

/* ------------------------------------------------------------------ messages */

.pf-c-alert,
#kc-content .alert {
  border-radius: 9px;
  border: 1px solid var(--c-line);
  font-size: 0.9rem;
}

.pf-c-form__helper-text.pf-m-error,
.input-error {
  color: #b4243a; /* not a token: --ctf-danger is not defined in tokens.css */
  font-size: 0.85rem;
}

#kc-info-message,
#kc-registration,
#kc-form-options {
  color: var(--c-ink-muted);
  font-size: 0.9rem;
}

/* ------------------------------------------------------------------ dark */

/*
 * ⛔ ONLY WHAT KEYCLOAK'S MARKUP LETS US REACH. The portals have a full dark palette; this theme
 * inherits templates it does not control, so it inverts the surfaces it can name and no more —
 * and uses the REVERSE wordmark so the logo does not disappear into a dark card.
 */
@media (prefers-color-scheme: dark) {
  :root {
    --c-ink: #f6f8fb;
    --c-ink-muted: #8fa7c6;
    --c-line: #1e3457;
    --c-surface: #0b1626;
    --c-surface-2: #0a1d3a;
    --c-teal-text: #16b8a8;
    --c-focus-halo: rgb(22 184 168 / 28%);
  }

  #kc-header-wrapper {
    background-image: url('../img/logo-reverse.svg');
  }

  .pf-c-button.pf-m-primary,
  input[type='submit'] {
    background: var(--c-teal) !important;
    border-color: var(--c-teal) !important;
    color: #04231f !important;
  }
}