/**
 * BlockForge Cyan Theme
 * Overrides default VitePress purple theme with BlockForge cyan colors
 */

:root {
  /* BlockForge Cyan Colors - Primary Brand */
  --vp-c-brand: #06B6D4; /* cyan-500 - primary brand color */
  --vp-c-brand-1: #06B6D4;
  --vp-c-brand-2: #22D3EE; /* cyan-400 - lighter variant */
  --vp-c-brand-3: #0891B2; /* cyan-600 - darker variant */
  --vp-c-brand-soft: rgba(6, 182, 212, 0.14); /* cyan with opacity for backgrounds */
  
  /* Light mode brand colors */
  --vp-c-brand-light: #22D3EE;
  --vp-c-brand-lighter: #67E8F9; /* cyan-300 */
  --vp-c-brand-dark: #0891B2;
  --vp-c-brand-darker: #0E7490; /* cyan-700 */
}

/* Dark mode brand colors */
.dark {
  --vp-c-brand: #22D3EE; /* Use lighter cyan in dark mode */
  --vp-c-brand-1: #22D3EE;
  --vp-c-brand-2: #67E8F9;
  --vp-c-brand-3: #06B6D4;
  --vp-c-brand-soft: rgba(34, 211, 238, 0.16);
  --vp-c-brand-light: #67E8F9;
  --vp-c-brand-lighter: #A5F3FC; /* cyan-200 */
  --vp-c-brand-dark: #06B6D4;
  --vp-c-brand-darker: #0891B2;
}

/* Hero section - "Get Started" button */
.VPHero .VPButton.brand {
  background-color: var(--vp-c-brand) !important;
  border-color: var(--vp-c-brand) !important;
  color: white !important;
}

.VPHero .VPButton.brand:hover {
  background-color: var(--vp-c-brand-dark) !important;
  border-color: var(--vp-c-brand-dark) !important;
}

/* Navigation bar */
.VPNavBar .VPNavBarTitle .title {
  color: var(--vp-c-brand) !important;
}

.VPNavBar .link.active {
  color: var(--vp-c-brand) !important;
}

.VPNavBar .link:hover {
  color: var(--vp-c-brand) !important;
}

/* Sidebar */
.VPSidebar .item.link.active > .text {
  color: var(--vp-c-brand) !important;
}

.VPSidebar .item.link:hover > .text {
  color: var(--vp-c-brand) !important;
}

.VPSidebar .group .items .item.link.active {
  border-left-color: var(--vp-c-brand) !important;
}

/* Links throughout the site */
a {
  color: var(--vp-c-brand) !important;
}

a:hover {
  color: var(--vp-c-brand-dark) !important;
}

/* Code blocks and syntax highlighting */
.vp-code-group .tabs label.active {
  border-bottom-color: var(--vp-c-brand) !important;
  color: var(--vp-c-brand) !important;
}

.vp-code-group .tabs label:hover {
  color: var(--vp-c-brand) !important;
}

/* Inline code */
:not(pre) > code {
  color: var(--vp-c-brand-dark) !important;
  background-color: var(--vp-c-brand-soft) !important;
}

/* Search */
.VPLocalSearchBox .result {
  border-color: var(--vp-c-brand-soft) !important;
}

.VPLocalSearchBox .result.selected {
  background-color: var(--vp-c-brand-soft) !important;
}

.VPLocalSearchBox .result .title {
  color: var(--vp-c-brand) !important;
}

/* Custom scrollbar accent */
::-webkit-scrollbar-thumb {
  background-color: var(--vp-c-brand-soft) !important;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--vp-c-brand) !important;
}

/* Focus states */
:focus-visible {
  outline-color: var(--vp-c-brand) !important;
}

/* Badge/Status colors */
.badge {
  background-color: var(--vp-c-brand-soft) !important;
  color: var(--vp-c-brand-dark) !important;
}

/* Homepage features */
.VPFeatures .VPFeature .icon {
  background: var(--vp-c-brand-soft) !important;
}

/* Blockquote border */
blockquote {
  border-left-color: var(--vp-c-brand) !important;
}

/* Table of contents */
.VPTableOfContentsOutline .outline-link.active {
  color: var(--vp-c-brand) !important;
}

.VPTableOfContentsOutline .outline-link:hover {
  color: var(--vp-c-brand) !important;
}

/* Hero name text color (the "BlockForge" text) */
.VPHero .name {
  background: linear-gradient(120deg, var(--vp-c-brand) 30%, var(--vp-c-brand-light)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Buttons */
.VPButton.brand {
  background-color: var(--vp-c-brand) !important;
  border-color: var(--vp-c-brand) !important;
}

.VPButton.brand:hover {
  background-color: var(--vp-c-brand-dark) !important;
  border-color: var(--vp-c-brand-dark) !important;
}

/* Alt button (View on GitHub) - keep it subtle but use cyan on hover */
.VPButton.alt:hover {
  border-color: var(--vp-c-brand-soft) !important;
  color: var(--vp-c-brand) !important;
}

/* Tip/Info boxes */
.custom-block.tip {
  border-color: var(--vp-c-brand) !important;
}

.custom-block.tip .custom-block-title {
  color: var(--vp-c-brand-dark) !important;
}

/* Warning boxes - use cyan accent */
.custom-block.warning {
  border-color: var(--vp-c-brand) !important;
}

/* Selection highlight */
::selection {
  background-color: var(--vp-c-brand-soft) !important;
}

::-moz-selection {
  background-color: var(--vp-c-brand-soft) !important;
}