@import url("/laughfeelings/fonts.css");

:root {
  --lf-gold: #AD8B4C;
  --lf-gold-strong: #8F7138;
  --lf-greige: #DAD6D1;
  --lf-soft: #E9E3DD;
  --lf-stone: #CEC7C0;
  --lf-text: #4E4233;
}

html, body, #matrixchat {
  font-family: "Poppins", Inter, Arial, sans-serif !important;
  background: var(--lf-greige) !important;
}

h1, h2, h3, .mx_AuthHeader h1, .mx_AuthBody h1, .mx_Welcome h1 {
  font-family: "Libre Baskerville", Georgia, serif !important;
  color: var(--lf-gold) !important;
  font-weight: 400 !important;
}

.mx_AuthPage,
.mx_WelcomePage,
.mx_HomePage,
.mx_MatrixChat_wrapper {
  background: var(--lf-greige) url("/laughfeelings/background.svg") center/cover fixed no-repeat !important;
}

.mx_AuthPage_modal,
.mx_AuthBody,
.mx_Dialog,
.mx_Dialog_fixedWidth,
.mx_RoomPreviewBar,
.mx_ErrorView_box {
  background: rgba(255, 255, 255, 0.94) !important;
  border: 1px solid rgba(173, 139, 76, 0.24) !important;
  box-shadow: 0 18px 48px rgba(78, 66, 51, 0.16) !important;
}

.mx_AuthHeaderLogo img,
.mx_DefaultWelcome img[src*="logo"],
.mx_Welcome img[src*="logo"] {
  content: url("/laughfeelings/logo.png");
  width: min(300px, 82vw) !important;
  height: auto !important;
  max-height: 92px !important;
  object-fit: contain !important;
}

.mx_AuthHeaderLogo,
.mx_AuthHeader,
.mx_DefaultWelcome {
  color: var(--lf-text) !important;
}

.mx_Button,
.mx_AccessibleButton_kind_primary,
.mx_AccessibleButton_kind_primary_outline:hover,
.mx_Dialog_primary,
button[type="submit"] {
  background-color: var(--lf-gold) !important;
  border-color: var(--lf-gold) !important;
  color: #fff !important;
}

.mx_Button:hover,
.mx_AccessibleButton_kind_primary:hover,
.mx_Dialog_primary:hover,
button[type="submit"]:hover {
  background-color: var(--lf-gold-strong) !important;
  border-color: var(--lf-gold-strong) !important;
}

a, .mx_AccessibleButton_kind_link, .mx_AccessibleButton_kind_link_inline {
  color: var(--lf-gold) !important;
}

.mx_LeftPanel,
.mx_RoomSublist,
.mx_SpacePanel,
.mx_RoomList,
.mx_RoomSearch,
.mx_ResizeHandle {
  background-color: var(--lf-greige) !important;
  color: var(--lf-text) !important;
}

.mx_LeftPanel .mx_RoomTile_selected,
.mx_LeftPanel .mx_RoomTile:hover,
.mx_SpaceButton_active,
.mx_SpaceButton_selectionWrapper:hover {
  background-color: var(--lf-soft) !important;
}

.mx_RoomHeader,
.mx_MainSplit,
.mx_TimelinePanel,
.mx_MessageComposer,
.mx_MessageComposer_wrapper,
.mx_RoomView_body {
  background-color: #F8F5F1 !important;
}

.mx_MessageComposer_wrapper,
.mx_BasicMessageComposer,
.mx_Field input,
.mx_Field textarea,
.mx_Field select {
  border-color: rgba(173, 139, 76, 0.32) !important;
}

.mx_EventTile_line,
.mx_RoomHeader_heading,
.mx_RoomTile_name,
.mx_MessageComposer,
.mx_Field input,
.mx_Field textarea {
  color: var(--lf-text) !important;
}