html,
body {
  background: var(--wg-bg);
  color: var(--wg-text-soft);
}

body {
  font-family: var(--wg-font-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#panel {
  background: var(--wg-bg);
}

.layout-container,
#content {
  color: var(--wg-text-soft);
}

a {
  color: var(--wg-gold);

  &:hover,
  &:focus {
    color: #e0c878;
  }
}

.text-muted,
.text-secondary,
.link-secondary {
  color: var(--wg-text-muted) !important;
}

.bg-body,
.bg-light,
.card,
.card-header,
.list-group-item {
  background-color: var(--wg-panel) !important;
  color: var(--wg-text-soft);
  border-color: var(--wg-border-soft) !important;
}

.westgate-surface,
.topic-list-header > .card,
.category-header,
li[component="categories/category"],
li[component="category/topic"],
li[component="post"] .post-container,
.quick-reply textarea,
textarea[component="topic/quickreply/text"] {
  background: var(--wg-velvet-panel) !important;
  border: 1px solid var(--wg-border) !important;
  border-radius: 8px !important;
  box-shadow: var(--wg-velvet-shadow) !important;
}

.westgate-surface-hover,
li[component="categories/category"]:hover,
li[component="category/topic"]:hover,
li[component="post"] .post-container:hover {
  background: var(--wg-velvet-panel-hover) !important;
  border-color: rgba(194, 163, 90, 0.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    inset 0 0 38px rgba(120, 36, 84, 0.14),
    0 12px 30px rgba(0, 0, 0, 0.3) !important;
}

.badge,
.btn,
.dropdown-menu,
.form-control,
.form-select,
.pagination,
.topic-list-header,
.category-tools,
.meta.stats,
.timeago {
  font-family: var(--wg-font-ui);
  letter-spacing: 0;
}

h1,
h2,
h3,
h4,
h5,
.category-title,
.topic-title,
li[component="categories/category"] h2.title,
li[component="category/topic"] h3[component="topic/header"] {
  color: var(--wg-text);
  font-family: var(--wg-font-display);
  font-weight: 600;
  letter-spacing: 0;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.9),
    0 0 10px rgba(104, 32, 76, 0.16);
}

p,
li,
.description,
.post-content,
.topic-text,
[component="post/content"],
[component="chat/message/body"] {
  font-family: var(--wg-font-text);
}

code,
kbd,
pre,
samp,
.text-tabular {
  font-family: var(--wg-font-code) !important;
}

.breadcrumb {
  --bs-breadcrumb-divider-color: var(--wg-gold-soft);
  color: var(--wg-text-muted);
}

.breadcrumb a,
.breadcrumb-item.active {
  color: var(--wg-text-muted);
}

.alert {
  background: rgba(194, 163, 90, 0.08);
  border-color: rgba(194, 163, 90, 0.18);
  color: var(--wg-text-soft);
}

.alert-danger {
  background: rgba(142, 52, 56, 0.16);
  border-color: rgba(142, 52, 56, 0.32);
  color: #d8b1b1;
}

.avatar,
[component="user/picture"] img,
.user-icon,
.avatar-tooltip .avatar,
.avatar-tooltip img {
  border: 1px solid rgba(216, 194, 138, 0.32);
  box-shadow:
    inset 0 1px 0 rgba(255, 242, 204, 0.2),
    inset 0 0 0 1px rgba(18, 15, 22, 0.58),
    inset 0 -3px 6px rgba(0, 0, 0, 0.48),
    0 0 0 1px rgba(53, 46, 49, 0.92),
    0 0 0 2px rgba(124, 105, 62, 0.22),
    0 7px 16px rgba(0, 0, 0, 0.36) !important;
  filter: saturate(0.88) contrast(1.08);
}

.user-icon {
  background-image:
    radial-gradient(
      circle at 34% 22%,
      rgba(255, 238, 190, 0.22),
      transparent 25%
    ),
    linear-gradient(
      145deg,
      rgba(111, 86, 45, 0.36),
      rgba(30, 29, 34, 0.28) 42%,
      rgba(44, 17, 34, 0.2)
    ) !important;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.78),
    0 -1px 0 rgba(255, 238, 190, 0.16),
    0 0 8px rgba(0, 0, 0, 0.24);
}

li[component="post"] .avatar,
li[component="category/topic"] .avatar,
li[component="category/topic"] .user-icon {
  border-radius: 999px !important;
}

.status {
  box-shadow:
    0 0 0 2px var(--wg-status-ring),
    0 0 0 3px rgba(216, 194, 138, 0.14),
    0 0 12px rgba(0, 0, 0, 0.34);

  &.online {
    color: var(--wg-status-online) !important;
    background-color: var(--wg-status-online) !important;
  }

  &.away {
    color: var(--wg-status-away) !important;
    background-color: var(--wg-status-away) !important;
  }

  &.dnd {
    color: var(--wg-status-dnd) !important;
    background-color: var(--wg-status-dnd) !important;
  }

  &.offline {
    color: var(--wg-status-offline) !important;
    background-color: var(--wg-status-offline) !important;
  }
}

.fa-circle.status {
  text-shadow:
    0 0 0 2px var(--wg-status-ring),
    0 0 10px rgba(0, 0, 0, 0.34);
}

// user data (email, join/last-online dates) never wears the engraving —
// Harmony marks these with .text-break + .ff-secondary in the stats row
.account-stats .text-break.ff-secondary {
  font-family: var(--wg-font-text);
  letter-spacing: 0;
  text-transform: none;
}

// 404: core picks a random beige animal glyph (dog, hippo, otter, ...);
// match the glyph element itself so every variant wears the cowl
.template-404 i.fa.fa-4x {
  display: inline-block;
  width: 4.5rem;
  height: 4.5rem;
  background-color: var(--wg-gold-soft);
  -webkit-mask: url("./plugins/nodebb-theme-westgate/game-icons/cowled.svg")
    center / contain no-repeat;
  mask: url("./plugins/nodebb-theme-westgate/game-icons/cowled.svg")
    center / contain no-repeat;

  &::before {
    content: "";
  }
}

// replace core's grey-triangle default cover with the velvet material
// (.cover on profiles, .list-cover on the groups list)
.cover[style*="cover-default.png"],
.list-cover[style*="cover-default.png"] {
  background-image:
    radial-gradient(120% 90% at 18% 0%, rgba(58, 24, 48, 0.6), transparent 60%),
    linear-gradient(100deg, #2a1222, #110f15 55%, #09080b) !important;
}

.account,
.account .profile,
.account .cover,
.users .users-container,
.groups.list,
.notifications-list,
.chats-list,
.settings,
.user-profile,
.user-card,
.profile-card {
  color: var(--wg-text-soft);
}

.notifications-dropdown .notification-list > :where(div, li),
.notifications-list > :where(div, li),
.chats-dropdown [component="chat/recent/room"],
.chats-list [component="chat/recent/room"],
[component="chat/public/room"] {
  background:
    linear-gradient(
      to bottom,
      rgba(255, 241, 196, 0.018),
      rgba(8, 7, 10, 0.08)
    ),
    var(--wg-velvet-panel) !important;
  border: 1px solid rgba(194, 163, 90, 0.14) !important;
  border-radius: 8px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 244, 221, 0.028),
    0 8px 18px rgba(0, 0, 0, 0.18) !important;
  color: var(--wg-text-soft) !important;
}

.notifications-dropdown .notification-list > :where(div, li) + :where(div, li),
.notifications-list > :where(div, li) + :where(div, li),
.chats-dropdown [component="chat/recent/room"] + hr,
.chats-list [component="chat/recent/room"] + hr {
  margin-top: 0.4rem !important;
}

.notifications-dropdown :where(.btn.btn-ghost, .mark-read),
.notifications-list :where(.btn.btn-ghost, .mark-read),
.chats-dropdown :where(.chat-room-btn, .mark-read),
.chats-list :where(.chat-room-btn, .mark-read),
[component="chat/public/room"] {
  color: var(--wg-text-soft) !important;
}

.notifications-dropdown .mark-read,
.notifications-list .mark-read,
.chats-dropdown .mark-read,
.chats-list .mark-read {
  border-color: rgba(194, 163, 90, 0.18) !important;
  border-radius: 6px !important;
  background: linear-gradient(
    to bottom,
    rgba(255, 244, 221, 0.018),
    rgba(0, 0, 0, 0.08)
  ) !important;
}

.notifications-dropdown .mark-read:hover,
.notifications-dropdown .mark-read:focus,
.notifications-list .mark-read:hover,
.notifications-list .mark-read:focus,
.chats-dropdown .mark-read:hover,
.chats-dropdown .mark-read:focus,
.chats-list .mark-read:hover,
.chats-list .mark-read:focus {
  background: rgba(194, 163, 90, 0.08) !important;
}

.chats-dropdown .chat-room-btn,
.chats-list .chat-room-btn,
[component="chat/public/room"] {
  border: 1px solid rgba(194, 163, 90, 0.12) !important;
  border-radius: 8px !important;
  background: transparent !important;
  box-shadow: none !important;
}

.chats-dropdown [component="chat/recent"] .active .chat-room-btn,
.chats-list .active .chat-room-btn,
[component="chat/public/room"]:hover,
[component="chat/public/room"]:focus,
[component="chat/public/room"].unread {
  background: rgba(194, 163, 90, 0.08) !important;
  border-color: rgba(194, 163, 90, 0.24) !important;
  color: var(--wg-text) !important;
}

.notifications-dropdown [component="notifications/item/link"],
.notifications-list [component="notifications/item/link"],
.chats-dropdown .room-name,
.chats-list .room-name,
.chats-dropdown .teaser-content,
.chats-list .teaser-content,
[component="chat/public/room"] {
  color: var(--wg-text-soft) !important;
}

.notifications-dropdown [component="notifications/item/link"]:hover,
.notifications-dropdown [component="notifications/item/link"]:focus,
.notifications-list [component="notifications/item/link"]:hover,
.notifications-list [component="notifications/item/link"]:focus,
.chats-dropdown .chat-room-btn:hover .room-name,
.chats-dropdown .chat-room-btn:focus .room-name,
.chats-list .chat-room-btn:hover .room-name,
.chats-list .chat-room-btn:focus .room-name,
[component="chat/public/room"]:hover {
  color: var(--wg-text) !important;
}

[component="chat/public/room/unread/count"],
.chats-dropdown .badge.bg-light,
.chats-list .badge.bg-light {
  background: linear-gradient(
    to bottom,
    rgba(216, 194, 138, 0.13),
    rgba(70, 45, 52, 0.28)
  ) !important;
  border: 1px solid rgba(194, 163, 90, 0.28) !important;
  color: var(--wg-ledger-ink) !important;
}

[component="chat/user/list"] [component="chat/user/list/username"] {
  color: var(--wg-text-muted) !important;
}

[component="chat/user/list"]
  [data-uid].online
  [component="chat/user/list/username"] {
  color: var(--wg-text) !important;
  font-weight: 600;
}

.page-flags [component="flags/filters"] {
  border-bottom-color: rgba(194, 163, 90, 0.12) !important;
}

// table variables shared with notification/post tables live in _controls.scss
.page-flags [component="flags/list"] :where(th, td) {
  color: var(--wg-text-soft) !important;
  border-color: rgba(194, 163, 90, 0.1) !important;
}

.page-flags [component="flags/list"] thead :where(th, td) {
  color: var(--wg-ledger-ink-muted) !important;
}

.page-flags [component="flags/list"] a.text-reset {
  color: var(--wg-text-muted) !important;
}

.page-flags [component="flags/list"] a.text-reset:hover,
.page-flags [component="flags/list"] a.text-reset:focus {
  color: var(--wg-text) !important;
}

.page-flags [component="flags/list"] input[type="checkbox"] {
  accent-color: var(--wg-gold);
}

.page-flags [component="flags/list"] .badge,
.page-flags .card.card-header {
  color: var(--wg-text) !important;
}