/* Pipoquinha — tema de login (paleta vívida/infantil sobre papel claro).
   Estende keycloak.v2 (PatternFly v5); este arquivo só sobrescreve. */

@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-normal-100-900-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-italic-100-900-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Atkinson Hyperlegible';
  src: url('../fonts/atkinson-hyperlegible-normal-400-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Atkinson Hyperlegible';
  src: url('../fonts/atkinson-hyperlegible-normal-700-latin.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --pipo-paper: #fdf6ea;
  --pipo-card: #fffefa;
  --pipo-ink: #33291f;
  --pipo-ink-soft: #6b5d4c;
  --pipo-line: #ebdfc8;
  --pipo-vermelho: #f0513c;
  --pipo-milho: #ffb019;
  --pipo-milho-deep: #8a5f00;
  --pipo-folha: #33b065;
  --pipo-ceu: #3a8fe8;
  --pipo-uva: #8a5cf6;
  --pipo-rosa: #f26fae;
}

html,
body {
  height: 100%;
}

body,
.pf-v5-c-login {
  font-family: 'Atkinson Hyperlegible', sans-serif !important;
  color: var(--pipo-ink);
  background-color: var(--pipo-paper) !important;
  /* confete sutil */
  background-image:
    radial-gradient(circle, rgba(240, 81, 60, 0.12) 2px, transparent 2.6px),
    radial-gradient(circle, rgba(58, 143, 232, 0.12) 2px, transparent 2.6px),
    radial-gradient(circle, rgba(51, 176, 101, 0.12) 2px, transparent 2.6px),
    radial-gradient(circle, rgba(255, 176, 25, 0.16) 2.4px, transparent 3px) !important;
  background-size: 64px 64px, 64px 64px, 64px 64px, 64px 64px !important;
  background-position: 0 0, 17px 33px, 33px 9px, 49px 24px !important;
}

/* marca (displayNameHtml do realm injeta as letras coloridas) */
#kc-header-wrapper,
.pf-v5-c-login__header,
.pf-v5-c-brand {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 650;
  font-size: 2.1rem !important;
  color: var(--pipo-ink);
  text-align: center;
  padding-bottom: 0.4rem;
}

/* cartão central */
.pf-v5-c-login__main {
  background: var(--pipo-card) !important;
  border: 1px solid var(--pipo-line);
  border-radius: 18px !important;
  box-shadow: 0 22px 48px -18px rgba(72, 48, 12, 0.35);
  overflow: hidden;
}

.pf-v5-c-login__main::before {
  /* fita colorida no topo do cartão */
  content: '';
  display: block;
  height: 6px;
  background: linear-gradient(
    90deg,
    var(--pipo-vermelho) 0 20%,
    var(--pipo-milho) 0 40%,
    var(--pipo-folha) 0 60%,
    var(--pipo-ceu) 0 80%,
    var(--pipo-uva) 0 100%
  );
}

#kc-page-title,
.pf-v5-c-login__main-header h1 {
  font-family: 'Fraunces', serif !important;
  font-weight: 600;
  color: var(--pipo-ink) !important;
  letter-spacing: -0.01em;
}

.pf-v5-c-form__label-text,
.pf-v5-c-form__label {
  color: var(--pipo-ink-soft) !important;
  font-weight: 700;
}

.pf-v5-c-form-control {
  border-radius: 10px !important;
}

.pf-v5-c-form-control:focus-within,
.pf-v5-c-form-control:focus {
  --pf-v5-c-form-control--m-focus--BorderBottomColor: var(--pipo-milho);
  outline-color: var(--pipo-milho) !important;
}

/* botão principal: milho vívido com tinta escura */
.pf-v5-c-button.pf-m-primary {
  background-color: var(--pipo-milho) !important;
  color: #2c1f04 !important;
  font-weight: 800 !important;
  border-radius: 999px !important;
  border: 1px solid #d99005 !important;
  box-shadow: 0 4px 0 #d99005;
}

.pf-v5-c-button.pf-m-primary:hover {
  background-color: #ffc24a !important;
  transform: translateY(-1px);
}

.pf-v5-c-button.pf-m-primary:active {
  transform: translateY(1px);
  box-shadow: 0 2px 0 #d99005;
}

a,
.pf-v5-c-button.pf-m-link {
  color: var(--pipo-ceu) !important;
}

.pf-v5-c-login__main-footer-band,
.pf-v5-c-login__footer {
  color: var(--pipo-ink-soft);
}

/* alertas de erro mais amigáveis */
.pf-v5-c-alert.pf-m-danger {
  border-radius: 12px;
}