/* Root Variables */
:root {
  --background: #ffffff;
  --text: #333333;
  --accent-primary: #6025d1;
  --border: #e2e8f0cc;
  --sidebar-background: #ffffff;
  --header-background: #ffffffb3;
  --card-background: #ffffff;
  --code-background: #f8f8f8;
  --faded: #64748b;
  --tag-primary: #f3f4f6;
}

.resizer {
  display: flex;
  margin: 0;
  padding: 0;
  resize: both;
  overflow: hidden;
  border-radius: 8px;
}
.resizer > .resized {
  flex-grow: 1;
  margin: 0;
  padding: 0;
  border: 0;
}

.dark {
  --background: #0b0d0e;
  --text: #ededede6;
  --accent-primary: #b794ff;
  --border: #2e2e2ecc;
  --sidebar-background: #0b0d0e;
  --header-background: #0b0d0eb3;
  --card-background: #0b0d0e;
  --code-background: #2e2e2e;
  --faded: #94a3b8;
  --tag-primary: #1e293b;
}

/* Base Text Colors */
body,
p,
ul,
h1,
h2,
h3,
h4,
h5,
h6,
span:not(a span) {
  color: var(--text);
}
.dark body,
.dark p,
.dark ul,
.dark h1,
.dark h2,
.dark h3,
.dark h4,
.dark h5,
.dark h6,
.dark span:not(a span) {
  color: rgba(237, 237, 237, 0.9);
}

/* Background Colors */
.dark body {
  background-color: var(--background) !important;
}

/* Header Styling */
.fern-header {
  background-color: var(--header-background) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid var(--border) !important;
  z-index: 50 !important;
}
.dark .fern-header {
  background: rgba(11, 13, 14, 0.7) !important;
  border-bottom: 1px solid rgba(46, 46, 46, 0.8) !important;
}

/* Header Tabs */
.fern-header-tabs {
  background: transparent !important;
  border-bottom: 1px solid var(--border) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}
.fern-header-tabs-list {
  /* padding: 0 1rem !important; */
}
.fern-header-tab-button > * {
  font-size: 12px;
}
.dark .fern-header-tab-button > * {
  color: rgba(237, 237, 237, 0.9);
}

.fern-sidebar-container {
  background: transparent !important;
}

/* Sidebar Styling */
.fern-sidebar {
  background-color: var(--sidebar-background) !important;
  border-right: 1px solid var(--border) !important;
}
.dark .fern-sidebar {
  background: rgba(11, 13, 14, 0.7) !important;
  border-right: 1px solid rgba(46, 46, 46, 0.8) !important;
}

/* Sidebar Links and Icons */
.fern-sidebar-link-container {
  min-height: 26px !important;
  /* padding: 0 1rem !important; */
}

.fern-layout-toc {
  max-width: 250px !important;
}

.fern-layout-content {
  max-width: 860px !important;
}

.w-content-width {
  max-width: 860px !important;
  width: 100% !important;
}

.fern-sidebar-link-container[data-state="active"] {
  background-color: var(--tag-primary) !important;
}

.fern-sidebar-link {
  color: var(--text) !important;
  text-decoration: none !important;
}

.fern-sidebar-link-content {
  /* padding: 0.4rem 0 !important; */
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
}

/* Icon styling */
.fern-sidebar-icon .fa-icon {
  width: 16px !important;
  height: 16px !important;
  background-color: var(--faded) !important;
}

/* Active state text */
.fern-sidebar-link-container[data-state="active"] .fern-sidebar-link {
  color: var(--accent-primary) !important;
  font-weight: 600 !important;
}

/* Navigation */
.fern-navigation {
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  background: rgba(255, 255, 255, 0.7) !important;
  /* padding: 0.5rem 1rem !important; */
  border-bottom: 1px solid rgba(226, 232, 240, 0.8) !important;
}
.dark .fern-navigation {
  background: rgba(11, 13, 14, 0.7) !important;
}

/* Content Area */
.fern-content {
  /* padding: 2rem; */
  position: relative;
  z-index: 1;
  background-color: var(--background) !important;
  color: var(--text) !important;
}

/* Links */
.fern-mdx-link {
  text-decoration-color: rgba(96, 37, 209, 1);
  color: #6025d1 !important;
}
.dark .fern-mdx-link {
  text-decoration-color: #b794ff;
  color: #b794ff !important;
}

/* Discord Help Button */
.fern-button.filled.primary {
  background-color: #6025d1 !important;
  transition: all 0.2s ease-in-out !important;
}
.fern-button.filled.primary:hover {
  background-color: #7d47e3 !important;
}

/* Background Decoration */
#fern-docs {
  position: relative;
  min-height: 100vh;
}
#fern-docs::before {
  content: "";
  position: absolute;
  inset: 0;
  height: 100vh;
  pointer-events: none;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(96, 37, 209, 0.15) 0%,
    rgba(96, 37, 209, 0.05) 20%,
    rgba(0, 0, 0, 0) 40%
  );
}
.dark #fern-docs::before {
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(183, 148, 255, 0.15) 0%,
    rgba(183, 148, 255, 0.05) 20%,
    rgba(0, 0, 0, 0) 40%
  );
}

/* Pattern Overlay */
#fern-docs::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  pointer-events: none;
  z-index: -1;
  opacity: 0.05;
  background-size: 60px 60px;
  mask-image: linear-gradient(to bottom, black 0%, transparent 40%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 40%);
}

/* Remove previous background decoration styles */
.fern-content::before,
.fern-content::after {
  display: none;
}

/* Remove background from main since it's now on the root */
.fern-main {
  position: relative;
  z-index: 1;
}

/* Navigation and Sidebar Styling */
.fern-header-container {
  background: transparent !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* Styling for the new docs frontend */
body#fern-docs div.fern-background-image::before {
  content: "";
  position: absolute;
  inset: 0;
  height: 100vh;
  pointer-events: none;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(96, 37, 209, 0.15) 0%,
    rgba(96, 37, 209, 0.05) 20%,
    rgba(0, 0, 0, 0) 40%
  );
}
.dark body#fern-docs div.fern-background-image::before {
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(183, 148, 255, 0.15) 0%,
    rgba(183, 148, 255, 0.05) 20%,
    rgba(0, 0, 0, 0) 40%
  );
}

/* Pattern Overlay */
body#fern-docs div.fern-background-image::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  pointer-events: none;
  z-index: -1;
  opacity: 0.05;
  background-size: 60px 60px;
  mask-image: linear-gradient(to bottom, black 0%, transparent 40%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 40%);
}

body#fern-docs #fern-header .md\:h-\(--header-height-real\) {
  background-color: var(--header-background) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid var(--border) !important;
  z-index: 50 !important;
}
.dark body#fern-docs #fern-header .md\:h-\(--header-height-real\) {
  background: rgba(11, 13, 14, 0.7) !important;
  border-bottom: 1px solid rgba(46, 46, 46, 0.8) !important;
}

body#fern-docs .fern-sidebar-link[data-state="active"] span {
  color: var(--accent-primary) !important;
  font-weight: 600 !important;
  font-family: var(--font-geist-sans);
}

body#fern-docs #fern-sidebar {
  background: transparent !important;
}

body#fern-docs #fern-header {
  background: transparent !important;
  border-bottom: 1px solid var(--border) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}
