/* ── Lejer login theme (from Team Ledger) ──────────────────────────────────────────────────
   Restyles the classic Keycloak login page to match the app. Tokens here are
   mirrored from apps/web/lib/tokens.ts / apps/web/app/globals.css. Loaded last
   in theme.properties so these rules override PatternFly + the base login.css.

   Login happens before we know the user's role, so we use the app's DEFAULT
   accent (green / manager), matching --accent in globals.css. */

@import url("https://fonts.googleapis.com/css2?family=Familjen+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

/* Lejer: the card is a sheet of paper on the green desk (DESIGN-SYSTEM-LEJER.md §1).
   Variable names are Team Ledger's so the rules below carry over unchanged. */
:root {
  --page-bg: #0F2E24;
  --surface: #F7F3E9;
  --input-bg: #EFEADC;
  --on-accent: #F7F3E9;
  --text: #3B3A32;
  --muted: #6B6855;       /* 5.1:1 on the paper card (WCAG 2.2 AA) */
  --muted-on-desk: rgba(247, 243, 233, .7);
  --hairline: #E5DFCE;
  --border: #E5DFCE;
  --accent: #0F2E24;
  --accent-hover: #1B4636;
  --red-text: #A8413B;
  --red-soft-bg: #F9E9E5;
  --red-soft-border: #EBC4BB;
  --amber: #8A5A10;
  --amber-soft-bg: #FBF0DC;
  --green-soft-bg: #E4F1E7;
  --green-soft-border: #CBE3D2;
  --font-sans: "Familjen Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-serif: "Familjen Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", "SF Mono", Consolas, monospace;
  --font-size-micro: 0.68rem;
  --font-size-xs: 0.72rem;
  --font-size-sm: 0.76rem;
  --font-size-body: 0.85rem;
  --font-size-base: 0.9rem;
  --font-size-heading: 0.95rem;
  --font-size-auth-brand: 1.7rem;
  --font-size-page-title: 2rem;
  --radius-input: 11px;
  --radius-button: 11px;
  --radius-card: 16px;
  --shadow-card: 0 14px 30px -12px rgba(0, 0, 0, 0.5);
}

/* The brand above the card sits on the desk: paper-coloured, set in the voice font. */
#kc-header-wrapper { color: #F7F3E9 !important; font-weight: 600 !important; letter-spacing: -0.01em; }


/* ── Page canvas ─────────────────────────────────────────────────────────────
   Kill PatternFly's dark hero/background image; use the warm app canvas. */
html {
  background: var(--page-bg);
}
body.login-pf,
.login-pf body {
  background: var(--page-bg);
}
.login-pf-page {
  background: var(--page-bg);
  color: var(--text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  padding-top: 7vh;
  padding-bottom: 6vh;
  /* The app's gutters: on a phone the card keeps 16px from each edge, as every screen of the app does. */
  padding-left: 16px;
  padding-right: 16px;
  box-sizing: border-box;
}
/* PatternFly paints a full-bleed background image on this pseudo element. */
.login-pf body::before,
.login-pf-page::before {
  background: none !important;
  content: none !important;
}

/* ── Brand header (realm display name) ───────────────────────────────────────
   Rendered above the card. Presented as the app's serif wordmark. */
#kc-header {
  width: min(100%, 460px);
  margin: 0 auto 18px;
  padding: 0 4px;
}
#kc-header-wrapper {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--font-size-auth-brand);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text);
  text-align: left;
  padding: 0;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

/* ── Card ────────────────────────────────────────────────────────────────────*/
.login-pf-page .card-pf {
  width: min(100%, 460px);
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 30px 32px 32px;
}
@media (max-width: 480px) {
  .login-pf-page .card-pf { padding: 24px 20px 26px; }
}

/* ── Card title / eyebrow ────────────────────────────────────────────────────*/
#kc-content-wrapper {
  margin-top: 0;
}
#kc-page-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--font-size-page-title);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0 0 20px;
  text-align: left;
}
/* "Sign in to your account" area / username hint above the form. */
#kc-username,
#kc-username .kc-login-tooltip {
  color: var(--muted);
}

/* ── Labels ──────────────────────────────────────────────────────────────────*/
.login-pf-page label,
.login-pf-page .control-label {
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.01em;
  margin-bottom: 6px;
}

/* ── Inputs ──────────────────────────────────────────────────────────────────*/
.login-pf-page input[type="text"],
.login-pf-page input[type="email"],
.login-pf-page input[type="password"],
.login-pf-page input[type="number"],
.login-pf-page .form-control {
  height: auto;
  background: var(--input-bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--font-size-heading);
  border: 1px solid var(--border);
  border-radius: var(--radius-input);
  padding: 10px 12px;
  box-shadow: none;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.login-pf-page input::placeholder {
  color: color-mix(in srgb, var(--muted) 70%, transparent);
}
.login-pf-page input:focus,
.login-pf-page .form-control:focus {
  border-color: var(--accent);
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  box-shadow: none;
}
.login-pf-page .form-group {
  margin-bottom: 18px;
}

/* Password reveal button — inside the field: one region, one outline, the
   eye at its end (PatternFly draws the control's own borders with ::after). */
.login-pf-page .pf-c-input-group,
.login-pf-page .pf-v5-c-input-group {
  align-items: stretch;
  /* PatternFly paints the group white; it showed at the field's rounded corners on a dark card. */
  background: transparent;
}
.login-pf-page .pf-c-input-group > input,
.login-pf-page .pf-v5-c-input-group > input {
  border-right: none;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.login-pf-page .kc-login-tooltip,
.login-pf-page button.pf-c-button.pf-m-control {
  color: var(--muted);
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-left: none;
  border-radius: 0 var(--radius-input) var(--radius-input) 0;
  padding: 0 14px;
}
.login-pf-page button.pf-c-button.pf-m-control::after {
  border: none;
}
/* Focused, the field and its eye are outlined as one. */
.login-pf-page .pf-c-input-group:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-radius: var(--radius-input);
}
.login-pf-page .pf-c-input-group > input:focus {
  outline: none;
}
.login-pf-page .pf-c-input-group:focus-within > input,
.login-pf-page .pf-c-input-group:focus-within > button.pf-c-button.pf-m-control {
  border-color: var(--accent);
}

/* ── Primary button ──────────────────────────────────────────────────────────*/
.login-pf-page #kc-form-buttons {
  margin-top: 22px;
}
.login-pf-page .btn-primary,
.login-pf-page input[type="submit"].btn-primary,
.login-pf-page .pf-c-button.pf-m-primary,
.login-pf-page #kc-login {
  width: 100%;
  background: var(--accent);
  border: 1px solid var(--accent);
  color: var(--on-accent);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--font-size-base);
  line-height: 1.2;
  border-radius: var(--radius-button);
  padding: 11px 16px;
  box-shadow: none;
  text-shadow: none;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.login-pf-page .btn-primary:hover,
.login-pf-page .pf-c-button.pf-m-primary:hover,
.login-pf-page .pf-c-button.pf-m-primary:focus,
.login-pf-page #kc-login:hover,
.login-pf-page .btn-primary:focus,
.login-pf-page #kc-login:focus {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--on-accent);
}

/* Secondary / default buttons (e.g. "Cancel", "Back"). */
.login-pf-page .btn-default,
.login-pf-page .btn-secondary {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-button);
  font-weight: 600;
  box-shadow: none;
}
.login-pf-page .btn-default:hover,
.login-pf-page .btn-secondary:hover {
  border-color: var(--text);
}

/* ── Checkbox: "Remember me" ─────────────────────────────────────────────────*/
.login-pf-page .checkbox {
  color: var(--muted);
  font-size: var(--font-size-body);
}
.login-pf-page .checkbox input[type="checkbox"] {
  accent-color: var(--accent);
}
#kc-form-options {
  margin-top: 4px;
}

/* ── Links ───────────────────────────────────────────────────────────────────*/
.login-pf-page a,
.login-pf-page #kc-registration a,
.login-pf-page #kc-info-wrapper a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}
.login-pf-page a:hover {
  color: var(--accent-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Alerts / messages ───────────────────────────────────────────────────────*/
.login-pf-page .alert,
.login-pf-page .pf-c-alert {
  border-radius: var(--radius-button);
  font-size: var(--font-size-body);
  border: 1px solid transparent;
  box-shadow: none;
}
.login-pf-page .alert-error,
.login-pf-page .pf-m-danger {
  background: var(--red-soft-bg);
  border-color: var(--red-soft-border);
  color: var(--red-text);
}
.login-pf-page .alert-warning {
  background: var(--amber-soft-bg);
  border-color: color-mix(in srgb, var(--amber) 35%, var(--amber-soft-bg));
  color: var(--amber);
}
.login-pf-page .alert-success {
  background: var(--green-soft-bg);
  border-color: var(--green-soft-border);
  color: var(--accent);
}
.login-pf-page .alert a {
  color: inherit;
  text-decoration: underline;
}

/* ── Footer / info area under the card ───────────────────────────────────────*/
#kc-info {
  width: min(100%, 460px);
  margin: 16px auto 0;
}
#kc-info-wrapper {
  background: none;
  border: none;
  color: var(--muted);
  font-size: var(--font-size-body);
  text-align: center;
}

/* Language selector, if enabled, stays subdued — at the card's top right,
   within its padding (PatternFly measures it from the page, so on a phone it
   sat against the card's edge). */
.login-pf-page .card-pf {
  position: relative;
}
.login-pf-page #kc-locale {
  position: absolute;
  top: 18px;
  right: 24px;
}
@media (max-width: 480px) {
  .login-pf-page #kc-locale { right: 20px; }
}
#kc-locale ul {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-button);
}
#kc-locale a {
  color: var(--muted-on-desk);
}
#kc-locale ul a {
  color: var(--muted);
}

/* Monospace numerals utility, mirroring the app (used if codes/OTP appear). */
.login-pf-page .mono,
.login-pf-page input[name="totp"],
.login-pf-page #kc-otp-login-form input {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ══ The welcome page, on the sign-in screen ═════════════════════════════════
   Drawn by template.ftl when `pageId` is "login" (after Collegeuur's theme).
   Everything is scoped to [data-pcp-welcome], so registration, password reset
   and the error pages keep the plain card on the desk. The desk is the app's:
   paper text on the green, data in mono, paper cards (DESIGN-SYSTEM-LEJER.md). */

[data-pcp-welcome] {
  --pcp-grid: rgba(247, 243, 233, .035);
  --pcp-aurora: .22;
}
[data-pcp-welcome] .login-pf-page {
  /* The sections below pad themselves to the full width. */
  padding: 0;
  position: relative;
  min-height: 100dvh;
}
/* The desk's fine grain and its light from above, as AppShell draws them. */
[data-pcp-welcome] .login-pf-page::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(247, 243, 233, .05), transparent 55%),
    repeating-linear-gradient(115deg, rgba(247, 243, 233, .022) 0 1px, transparent 1px 9px);
}
[data-pcp-welcome] .login-pf-page > * {
  position: relative;
  z-index: 1;
}
/* Above the hero's glows, which reach up under it. */
[data-pcp-welcome] .pcp-top {
  z-index: 2;
}
/* The realm's name above the card: the top bar carries the brand instead. */
[data-pcp-welcome] #kc-header {
  display: none;
}

/* ── Top bar ─────────────────────────────────────────────────────────────── */
.pcp-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1180px;
  margin: 0 auto;
  padding: 22px 24px;
}
.pcp-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.pcp-mark {
  display: inline-flex;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(247, 243, 233, .14);
  overflow: hidden;
}
.pcp-mark svg {
  width: 100%;
  height: 100%;
}
.pcp-mark-sm {
  width: 24px;
  height: 24px;
  border-radius: 6px;
}
.pcp-brand-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.pcp-brand-name {
  color: #F7F3E9;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.pcp-theme-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 10px;
  border: 1px solid rgba(247, 243, 233, .18);
  background: transparent;
  color: #F7F3E9;
  cursor: pointer;
}
.pcp-theme-btn svg {
  width: 18px;
  height: 18px;
}
.pcp-theme-btn:hover {
  border-color: rgba(247, 243, 233, .4);
}
.pcp-theme-btn:focus-visible {
  outline: 2px solid #7CCB9B;
  outline-offset: 2px;
}
/* Without JavaScript the button would do nothing: it shows only once the script has drawn it. */
.pcp-theme-btn:empty {
  display: none;
}
.pcp-brand-sub {
  color: var(--muted-on-desk);
  font-size: 0.8rem;
  line-height: 1.3;
}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.pcp-hero {
  position: relative;
  isolation: isolate;
  padding: 56px 24px 64px;
}
/* The glows run past the hero, under the top bar, without a cut at its edge;
   the page clips them sideways so nothing scrolls. */
[data-pcp-welcome] .login-pf-page {
  overflow-x: clip;
}
/* The light behind the introduction, after Collegeuur's: a fine grid fading out
   from the headline, and three blurred glows — the registry's green, the leaf,
   a little of the stamp's blue. Each theme sets how strong. */
.pcp-hero-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--pcp-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--pcp-grid) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 78% 62% at 40% 34%, #000 30%, transparent 78%);
  mask-image: radial-gradient(ellipse 78% 62% at 40% 34%, #000 30%, transparent 78%);
}
.pcp-aurora {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(80px);
  opacity: var(--pcp-aurora);
}
.pcp-aurora-a { width: 460px; height: 460px; background: #1B6B45; top: -150px; left: -90px; }
.pcp-aurora-b { width: 380px; height: 380px; background: #3FA268; top: 120px; right: 8%; }
.pcp-aurora-c { width: 300px; height: 300px; background: #2B4EC9; bottom: -140px; left: 34%; }
.pcp-hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(340px, 0.85fr);
  gap: 64px;
  align-items: center;
  max-width: 1180px;
  margin: 0 auto;
}
.pcp-eyebrow {
  margin: 0;
  color: var(--muted-on-desk);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.pcp-h1 {
  margin: 14px 0 0;
  color: #F7F3E9;
  font-family: var(--font-sans);
  /* A sentence a line: sized so the longer fits the column. */
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
/* The promise, in the desk's positive green — the colour of „la zi”. */
.pcp-accent {
  color: #7CCB9B;
}
.pcp-hero-body {
  max-width: 56ch;
  margin: 20px 0 0;
  color: rgba(247, 243, 233, .78);
  font-size: 1.02rem;
  line-height: 1.6;
  text-wrap: pretty;
}
/* Three fixed columns sharing the width: the labels take a second line where
   they must, the figures stay in a row. */
.pcp-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px dashed rgba(247, 243, 233, .22);
}
.pcp-stat-value {
  color: #F7F3E9;
  font-family: var(--font-mono);
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.pcp-stat-label {
  margin-top: 4px;
  color: var(--muted-on-desk);
  font-size: 0.8rem;
  line-height: 1.4;
}

/* The column holding Keycloak's card: the card fills it instead of centring itself at 460px. */
.pcp-signin-col {
  min-width: 0;
}
[data-pcp-welcome] .login-pf-page .card-pf {
  width: 100%;
  max-width: none;
  margin: 0;
}
[data-pcp-welcome] #kc-info {
  width: 100%;
}

/* ── Features: three paper cards on the desk ─────────────────────────────── */
.pcp-features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px 56px;
  box-sizing: content-box;
}
.pcp-card {
  background: var(--surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 22px 22px 24px;
}
.pcp-feat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--input-bg);
  color: var(--accent);
}
.pcp-feat-icon svg {
  width: 20px;
  height: 20px;
}
.pcp-feat-title {
  margin: 14px 0 0;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.pcp-feat-body {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.55;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.pcp-foot {
  border-top: 1px solid rgba(247, 243, 233, .12);
}
.pcp-foot-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 20px 24px 28px;
  color: var(--muted-on-desk);
  font-size: 0.8rem;
}
.pcp-foot-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #F7F3E9;
  font-weight: 600;
}

/* ── Narrow ──────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .pcp-hero-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
  /* The card first once the columns stack: whoever came to sign in finds the
     form on the first screen, and the introduction below it. */
  .pcp-signin-col {
    order: -1;
  }
  .pcp-hero {
    padding: 8px 16px 40px;
  }
  .pcp-top {
    padding: 18px 16px;
  }
  .pcp-features {
    grid-template-columns: minmax(0, 1fr);
    padding: 0 16px 32px;
  }
  .pcp-foot-inner {
    padding: 18px 16px 24px;
  }
}
/* On a phone the figures become a list: value and label on one line, the values in a column they share. */
@media (max-width: 600px) {
  .pcp-stats {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px 14px;
    align-items: baseline;
    margin-top: 32px;
  }
  .pcp-stats > div {
    display: contents;
  }
  .pcp-stat-value {
    font-size: 1.3rem;
  }
  .pcp-stat-label {
    margin-top: 0;
  }
}

/* ── Wide screens: the presentation page's paper, not the desk ──────────────
   A whole laptop screen of the desk's green is heavy. Above 900px the page
   takes the design system's background for a presentation page (--page,
   DESIGN-SYSTEM-LEJER.md §1.1) and the green stays only as a faint glow
   behind the introduction; the words turn to the green ink. On a phone the
   page keeps the desk, as the app does. */
@media (min-width: 901px) {
  html:has(body[data-pcp-welcome]),
  body[data-pcp-welcome],
  [data-pcp-welcome] .login-pf-page {
    background: #F1ECDF;
  }
  [data-pcp-welcome] {
    --pcp-grid: rgba(15, 46, 36, .055);
    --pcp-aurora: .16;
  }
  [data-pcp-welcome] .login-pf-page::after {
    background: none;
  }
  [data-pcp-welcome] .pcp-theme-btn {
    border-color: #D9D2BF;
    color: #0F2E24;
  }
  [data-pcp-welcome] .pcp-theme-btn:hover {
    border-color: #0F2E24;
  }
  [data-pcp-welcome] .pcp-mark {
    box-shadow: none;
  }
  [data-pcp-welcome] .pcp-brand-name,
  [data-pcp-welcome] .pcp-h1,
  [data-pcp-welcome] .pcp-stat-value,
  [data-pcp-welcome] .pcp-foot-brand {
    color: #0F2E24;
  }
  [data-pcp-welcome] .pcp-accent {
    color: #276B45;
  }
  [data-pcp-welcome] .pcp-brand-sub,
  [data-pcp-welcome] .pcp-eyebrow,
  [data-pcp-welcome] .pcp-stat-label,
  [data-pcp-welcome] .pcp-foot-inner {
    color: #6B6855;
  }
  [data-pcp-welcome] .pcp-hero-body {
    color: #2A5443;
  }
  [data-pcp-welcome] .pcp-stats {
    border-top-color: #D9D2BF;
  }
  [data-pcp-welcome] .pcp-foot {
    border-top-color: #E0D9C6;
  }
  /* Paper on paper: the cards keep their edge with a hairline and a softer shadow. */
  [data-pcp-welcome] .login-pf-page .card-pf,
  [data-pcp-welcome] .pcp-card {
    border: 1px solid #E5DFCE;
    box-shadow: 0 18px 40px -22px rgba(15, 46, 36, .35);
  }
}

/* ══ The dark theme ══════════════════════════════════════════════════════════
   Set by resources/js/theme.js on <html> (the person's choice, else the
   system's), on the welcome page only, at every width. After Collegeuur's dark
   theme: a near-black canvas with a little of the registry's green in it,
   dark cards with a hairline and a light top edge, darker fields, and the
   leaf's green as the accent — a light colour, so the button's words are in
   the registry's ink, as Collegeuur writes maroon on its gold. The Keycloak
   card restyles itself through the variables at the top of this file. */
html[data-theme="dark"]:has(body[data-pcp-welcome]) {
  --page-bg: #0A110E;
  --surface: #121A16;
  --input-bg: #0D1411;
  --on-accent: #0F2E24;
  --text: #EDE8DC;
  --muted: #A39F90;
  --hairline: rgba(247, 243, 233, .09);
  --border: rgba(247, 243, 233, .13);
  --accent: #7CCB9B;
  --accent-hover: #9BDAB3;
  --red-text: #F0958F;
  --red-soft-bg: rgba(192, 80, 74, .12);
  --red-soft-border: rgba(192, 80, 74, .32);
  --amber: #F2C077;
  --amber-soft-bg: rgba(222, 154, 50, .12);
  --green-soft-bg: rgba(63, 162, 104, .12);
  --green-soft-border: rgba(63, 162, 104, .3);
  --shadow-card: 0 8px 16px rgba(0, 0, 0, .36), 0 24px 56px rgba(0, 0, 0, .46);
  color-scheme: dark;
  background: #0A110E;
}
html[data-theme="dark"] body[data-pcp-welcome],
html[data-theme="dark"] [data-pcp-welcome] .login-pf-page {
  background: #0A110E;
}
html[data-theme="dark"] [data-pcp-welcome] {
  --pcp-grid: rgba(247, 243, 233, .045);
  --pcp-aurora: .42;
}
html[data-theme="dark"] [data-pcp-welcome] .login-pf-page::after {
  background: none;
}
html[data-theme="dark"] [data-pcp-welcome] .pcp-brand-name,
html[data-theme="dark"] [data-pcp-welcome] .pcp-h1,
html[data-theme="dark"] [data-pcp-welcome] .pcp-stat-value,
html[data-theme="dark"] [data-pcp-welcome] .pcp-foot-brand,
html[data-theme="dark"] [data-pcp-welcome] #kc-page-title {
  color: #F7F3E9;
}
/* The promise as a gradient, as Collegeuur draws its gold: leaf to mint, a touch of the stamp's blue. */
html[data-theme="dark"] [data-pcp-welcome] .pcp-accent {
  background: linear-gradient(96deg, #9BDAB3, #3FA268 55%, #6F8BEA);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
html[data-theme="dark"] [data-pcp-welcome] .pcp-brand-sub,
html[data-theme="dark"] [data-pcp-welcome] .pcp-eyebrow,
html[data-theme="dark"] [data-pcp-welcome] .pcp-stat-label,
html[data-theme="dark"] [data-pcp-welcome] .pcp-foot-inner {
  color: #948F80;
}
html[data-theme="dark"] [data-pcp-welcome] .pcp-hero-body {
  color: #C9C4B6;
}
html[data-theme="dark"] [data-pcp-welcome] .pcp-stats {
  border-top: 1px solid rgba(247, 243, 233, .09);
}
html[data-theme="dark"] [data-pcp-welcome] .pcp-foot {
  border-top-color: rgba(247, 243, 233, .08);
}
html[data-theme="dark"] [data-pcp-welcome] .pcp-mark {
  box-shadow: 0 0 0 1px rgba(247, 243, 233, .12);
}
html[data-theme="dark"] [data-pcp-welcome] .pcp-theme-btn {
  border-color: rgba(247, 243, 233, .16);
  color: #F7F3E9;
}
html[data-theme="dark"] [data-pcp-welcome] .pcp-theme-btn:hover {
  border-color: rgba(247, 243, 233, .4);
}
/* Dark cards: a hairline and a light top edge instead of paper on paper. */
html[data-theme="dark"] [data-pcp-welcome] .login-pf-page .card-pf,
html[data-theme="dark"] [data-pcp-welcome] .pcp-card {
  background: #121A16;
  border: 1px solid rgba(247, 243, 233, .09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 8px 16px rgba(0, 0, 0, .36), 0 24px 56px rgba(0, 0, 0, .46);
}
html[data-theme="dark"] [data-pcp-welcome] .pcp-feat-icon {
  background: rgba(124, 203, 155, .1);
  color: #7CCB9B;
}
html[data-theme="dark"] [data-pcp-welcome] #kc-locale a {
  color: #A39F90;
}