/* Fae Briar Chat: extra styling on top of the "Fae Briar" custom theme */

@font-face {
  font-family: "Cinzel Decorative";
  font-weight: 400;
  font-display: swap;
  src: url("fonts/cinzel-decorative-400.woff2") format("woff2");
}
@font-face {
  font-family: "Cinzel Decorative";
  font-weight: 700;
  font-display: swap;
  src: url("fonts/cinzel-decorative-700.woff2") format("woff2");
}

/* Triple class so these beat the theme's own token definitions */
.cpd-theme-dark.cpd-theme-dark.cpd-theme-dark {
  --cpd-color-bg-canvas-default: #000000;
  --cpd-color-bg-subtle-secondary: #0a0a0a;

  /* pale yellow buttons need dark text on top */
  --cpd-color-bg-action-primary-rest: #f5f9c6;
  --cpd-color-bg-action-primary-hovered: #fcffe0;
  --cpd-color-text-on-solid-primary: #000000;

  --cpd-color-text-action-accent: #f5f9c6;
  --cpd-color-icon-accent-primary: #f5f9c6;
  --cpd-color-border-interactive-primary: #ffffff84;

  --cpd-font-family-sans: Georgia, "Times New Roman", serif;
}

/* Site-style headings (dialog titles, welcome and login screens) */
h1,
h2 {
  font-family: "Cinzel Decorative", serif;
}

a:hover {
  color: #f5f9c6;
}

/* --- login screen --- */
.mx_AuthFooter a {
  color: #f5f9c6;
  font-family: "Cinzel Decorative", serif;
  font-size: 0.8rem;
  text-shadow: 0 1px 4px #000;
}
.mx_AuthFooter a:hover {
  color: #fff;
}
.mx_AuthPage_modal {
  border: 1px solid #f5f9c640;
}

/* --- falling petals (login screens) --- */
.mx_AuthPage {
  background-color: #000 !important; /* black even if a background image fails to load */
}
#petal-layer {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}
.falling-petal {
  position: absolute;
  top: -5vh;
  color: #f5f9c6;
  font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", "Noto Sans Symbols", "DejaVu Sans", "Apple Symbols", sans-serif;
  animation-name: petal-fall;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  user-select: none;
}
@keyframes petal-fall {
  to { transform: translate(var(--drift, 0), 110vh) rotate(360deg); }
}