/* Paper Arcade theme for Flarum (loaded after site.css on /forum/). */

:root {
  --ink: #1a1a1a;
  --paper: #f2efe8;
  --muted: #5c5c5c;
  --line: #c8c2b6;
  --accent: #2f4a3c;
}

html {
  font-size: 18px;
}

html,
body {
  margin: 0;
  min-height: 100vh;
  font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(ellipse at top left, #ebe6dc 0%, transparent 55%),
    linear-gradient(180deg, #f7f4ee 0%, var(--paper) 100%);
}

body[data-theme],
[data-theme="dark"] body,
[data-theme^="dark"] body {
  background:
    radial-gradient(ellipse at top left, #ebe6dc 0%, transparent 55%),
    linear-gradient(180deg, #f7f4ee 0%, var(--paper) 100%);
  color: var(--ink);
}

.paperarcade-forum-nav {
  background: transparent;
}

.paperarcade-forum-footer {
  margin-top: 2rem;
}

#app.App,
.App {
  background: transparent;
  font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
  color: var(--ink);
}

.App-header,
.App-header .container {
  background: rgba(247, 244, 238, 0.92);
  box-shadow: none;
  border-bottom: 1px solid var(--line);
}

.App-header {
  color: var(--ink);
}

.Header-controls,
.Header-controls .Button,
.Header-controls .Button:hover,
.Header-controls .Button:focus,
.Header-controls .Button.active,
.SessionDropdown .Button,
.NotificationsDropdown .Button,
.Search-input,
.Search .FormControl {
  color: var(--ink);
}

.Header-title {
  display: none;
}

.App-content {
  background: transparent;
}

.App-content a {
  color: var(--accent);
}

.App-content a:hover {
  color: var(--ink);
}

.Button--primary,
.IndexPage-nav .App-primaryControl .Button--primary {
  --button-color: var(--paper);
  --button-bg: var(--ink);
  --button-bg-hover: var(--accent);
  --button-bg-active: var(--accent);
  --button-bg-disabled: #8a8a8a;
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.Button--primary:hover,
.Button--primary:focus,
.IndexPage-nav .App-primaryControl .Button--primary:hover,
.IndexPage-nav .App-primaryControl .Button--primary:focus {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.Hero-title,
.IndexPage .Hero-title,
.IndexPage-nav .item-nav .Button.active,
.sideNav .Button.active,
.IndexPage-nav .Dropdown-toggle {
  color: var(--ink);
}

.DiscussionListItem,
.Post,
.Post-body,
.Hero,
.IndexPage-nav .item-nav,
.sideNav .Button,
.FormControl,
.Dropdown-menu {
  font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
}

.Hero {
  background: transparent;
  color: var(--ink);
  box-shadow: none;
  border-bottom: 1px solid var(--line);
}

.Hero-title {
  font-family: "Libre Baskerville", Georgia, serif;
  color: var(--ink);
}

.Hero-subtitle {
  color: var(--muted);
}

.DiscussionListItem {
  border-color: var(--line);
}

.DiscussionListItem:hover {
  background: rgba(255, 255, 255, 0.35);
}

.Post {
  background: rgba(255, 255, 255, 0.4);
  border-color: var(--line);
}

.FormControl {
  background: rgba(255, 255, 255, 0.65);
  border-color: var(--line);
  color: var(--ink);
}

.sideNav .Dropdown-toggle,
.IndexPage-toolbar .Button,
.DiscussionPage-nav .Button {
  color: var(--muted);
}

.sideNav .Dropdown-toggle:hover,
.IndexPage-toolbar .Button:hover,
.DiscussionPage-nav .Button:hover {
  color: var(--ink);
}

.App-footer:empty {
  display: none;
}

#flarum-loading {
  color: var(--muted);
}