/* Charte graphique Timeless Gravestone appliquée aux pages Keycloak (PatternFly 5). */

:root {
  --tg-fond: #f7f5f1;
  --tg-surface: #ffffff;
  --tg-texte: #2b2925;
  --tg-texte-doux: #6b665d;
  --tg-trait: #ddd7cc;
  --tg-accent: #5b6b4e;
  --tg-accent-fonce: #4a5840;
  --tg-titre: "Source Serif 4", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --tg-texte-police: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --pf-v5-global--primary-color--100: var(--tg-accent);
  --pf-v5-global--primary-color--200: var(--tg-accent-fonce);
  --pf-v5-global--link--Color: var(--tg-accent);
  --pf-v5-global--link--Color--hover: var(--tg-accent-fonce);
  --pf-v5-global--FontFamily--text: var(--tg-texte-police);
  --pf-v5-global--FontFamily--heading: var(--tg-titre);
  --pf-v5-global--Color--100: var(--tg-texte);
  --pf-v5-global--Color--200: var(--tg-texte-doux);
  --pf-v5-global--BorderRadius--sm: 6px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --tg-fond: #1b1a18;
    --tg-surface: #242320;
    --tg-texte: #ebe7df;
    --tg-texte-doux: #a8a296;
    --tg-trait: #3d3a34;
    --tg-accent: #9fb38d;
    --tg-accent-fonce: #b6c7a7;
  }
}

body,
.pf-v5-c-login,
.pf-v5-c-login__container {
  background: var(--tg-fond) !important;
  color: var(--tg-texte);
}

.pf-v5-c-login__main {
  background: var(--tg-surface);
  border: 1px solid var(--tg-trait);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.06), 0 4px 16px rgb(0 0 0 / 0.04);
}

/* Nom du service à la place du logo Keycloak */
.pf-v5-c-brand,
div.kc-logo-text {
  background: none !important;
}

#kc-header-wrapper,
.pf-v5-c-login__main-header h1,
.pf-v5-c-title {
  font-family: var(--tg-titre);
  font-weight: 400;
  color: var(--tg-texte);
}

#kc-header-wrapper {
  /* Le thème keycloak.v2 l'écrit en blanc avec !important : illisible sur le fond clair */
  color: var(--tg-texte) !important;
  font-size: 1.6rem;
  letter-spacing: 0;
  text-transform: none;
}

.pf-v5-c-button.pf-m-primary {
  background: var(--tg-accent);
  color: #fff;
  min-height: 44px;
}

.pf-v5-c-button.pf-m-primary:hover {
  background: var(--tg-accent-fonce);
}

.pf-v5-c-form-control {
  border-radius: 6px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--tg-accent);
  outline-offset: 2px;
}