:root {
  --vp-c-default-1: #f9e6c7;
  /* cream base */
  --vp-c-default-2: #f7dcb7;
  /* slightly deeper beige */
  --vp-c-default-3: #eecda2;
  /* accent beige */
  --vp-c-default-soft: rgba(249, 230, 199, 0.35);
  /* soft backgrounds */

  /* 🧅 Onion Brand Palette */
  --vp-c-brand-1: #8bcf6c;
  /* main brand (links, active states) */
  --vp-c-brand-2: #6cad55;
  /* hover state */
  --vp-c-brand-3: #467a3d;
  /* solid bg (buttons, highlights) */
  --vp-c-brand-soft: rgba(139, 207, 108, 0.14);
  /* soft backgrounds */

  --vp-c-tip-1: var(--vp-c-brand-1);
  --vp-c-tip-2: var(--vp-c-brand-2);
  --vp-c-tip-3: var(--vp-c-brand-3);
  --vp-c-tip-soft: var(--vp-c-brand-soft);

  --vp-c-warning-1: #f7b7a3;
  /* peach blush */
  --vp-c-warning-2: #f49d8d;
  --vp-c-warning-3: #e07c6c;
  --vp-c-warning-soft: rgba(247, 183, 163, 0.2);

  --vp-c-danger-1: #3a2a1d;
  /* dark brown */
  --vp-c-danger-2: #2a1e14;
  --vp-c-danger-3: #1a120c;
  --vp-c-danger-soft: rgba(58, 42, 29, 0.2);

}

details {
  background-color: transparent !important;
  border: 1px solid #1a120c !important;
  color: var(--vp-button-alt-active-bg) !important;
}

details * {
  background-color: transparent !important;
}

/**
 * Component: Button
 */
:root {
  /* ✅ Primary button (Get Started) */
  --vp-button-brand-border: transparent;
  --vp-button-brand-text: #ffffff;
  --vp-button-brand-bg: var(--vp-c-brand-1);
  --vp-button-brand-hover-border: transparent;
  --vp-button-brand-hover-text: #ffffff;
  --vp-button-brand-hover-bg: var(--vp-c-brand-2);
  --vp-button-brand-active-border: transparent;
  --vp-button-brand-active-text: #ffffff;
  --vp-button-brand-active-bg: var(--vp-c-brand-3);

  /* 🎨 Secondary buttons (View on GitHub, Why Nexios?) */
  --vp-button-alt-border: #3a2a1d;
  /* dark brown */
  --vp-button-alt-text: #3a2a1d;
  --vp-button-alt-bg: #f7b7a3;
  /* peach */
  --vp-button-alt-hover-border: #3a2a1d;
  --vp-button-alt-hover-text: #ffffff;
  --vp-button-alt-hover-bg: #f49d8d;
  --vp-button-alt-active-border: #3a2a1d;
  --vp-button-alt-active-text: #ffffff;
  --vp-button-alt-active-bg: #e07c6c;
}

/**
 * Component: Home
 */
:root {
  --vp-home-hero-name-color: transparent;
  --vp-home-hero-name-background: -webkit-linear-gradient(120deg,
      #8bcf6c 30%,
      #f7b7a3);

  --vp-home-hero-image-background-image: linear-gradient(-45deg,
      #8bcf6c 50%,
      #f9e6c7 50%);
  --vp-home-hero-image-filter: blur(44px);
}

@media (min-width: 640px) {
  :root {
    --vp-home-hero-image-filter: blur(56px);
  }
}

@media (min-width: 960px) {
  :root {
    --vp-home-hero-image-filter: blur(68px);
  }
}

/**
 * Component: Custom Block
 */
:root {
  --vp-custom-block-tip-border: transparent;
  --vp-custom-block-tip-text: var(--vp-c-text-1);
  --vp-custom-block-tip-bg: var(--vp-c-brand-soft);
  --vp-custom-block-tip-code-bg: var(--vp-c-brand-soft);
}

/**
 * Component: Algolia
 */
.DocSearch {
  --docsearch-primary-color: var(--vp-c-brand-1) !important;
}

/* Banner height variable - manipulated by Banner.vue */
:root {
  --banner-height: 40px;
}

/* Adjust Layout to accommodate Fixed Banner */

/* Push the Fixed Navbar down */
.VPNav {
  top: var(--banner-height) !important;
}

/* Push the Sidebar top edge down so it doesn't get cut off by the moved navbar */
.VPSidebar {
  top: calc(var(--vp-nav-height) + var(--banner-height)) !important;
}

/* Adjust main content padding in layout to prevent concealment */
.Layout {
  padding-top: var(--banner-height);
  min-height: 100vh;
}

/* On mobile/narrow screens, ensure the sidebar backdrop covers everything properly */
.VPSidebarBackdrop {
  top: var(--banner-height) !important;
}