/**
 * Skillet Theme
 * Based on agentskills.io design with Skillet's warm brown accent
 */

/* Import Plus Jakarta Sans for headings */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Plus+Jakarta+Sans:wght@500;600;700&display=swap');

:root {
  /* Skillet accent colors - warm browns */
  --skillet-primary: #8B7355;
  --skillet-primary-light: #C4B5A5;
  --skillet-primary-dark: #5C4D3D;

  /* Gray scale matching agentskills.io */
  --gray-50: #f6f6f6;
  --gray-100: #e7e7e7;
  --gray-200: #d1d1d1;
  --gray-300: #b0b0b0;
  --gray-400: #7f7f7f;
  --gray-500: #6d6d6d;
  --gray-600: #5d5d5d;
  --gray-700: #4f4f4f;
  --gray-800: #454545;
  --gray-900: #3d3d3d;
  --gray-950: #0e0e0e;

  /* VitePress color overrides - Light theme */
  --vp-c-brand-1: var(--skillet-primary);
  --vp-c-brand-2: var(--skillet-primary-light);
  --vp-c-brand-3: var(--skillet-primary-dark);
  --vp-c-brand-soft: rgba(139, 115, 85, 0.12);

  /* Clean white backgrounds */
  --vp-c-bg: #ffffff;
  --vp-c-bg-soft: var(--gray-50);
  --vp-c-bg-mute: var(--gray-100);
  --vp-c-bg-alt: #ffffff;

  /* Text colors - darker for better readability */
  --vp-c-text-1: var(--gray-900);
  --vp-c-text-2: var(--gray-600);
  --vp-c-text-3: var(--gray-500);

  /* Border colors */
  --vp-c-border: var(--gray-200);
  --vp-c-divider: var(--gray-100);
  --vp-c-gutter: var(--gray-100);

  /* Sidebar */
  --vp-sidebar-bg-color: var(--vp-c-bg);
  --vp-sidebar-width: 272px;

  /* Nav */
  --vp-nav-bg-color: rgba(255, 255, 255, 0.95);
  --vp-nav-height: 64px;

  /* Button colors */
  --vp-button-brand-bg: var(--skillet-primary);
  --vp-button-brand-hover-bg: var(--skillet-primary-dark);
  --vp-button-brand-active-bg: var(--skillet-primary-dark);
  --vp-button-brand-text: #ffffff;

  /* Code blocks */
  --vp-code-block-bg: var(--gray-50);
  --vp-code-line-highlight-color: rgba(139, 115, 85, 0.08);

  /* Home hero - clean, no gradient */
  --vp-home-hero-name-color: var(--gray-900);
  --vp-home-hero-image-background-image: none;
  --vp-home-hero-image-filter: none;
}

.dark {
  /* Dark theme */
  --vp-c-brand-1: var(--skillet-primary-light);
  --vp-c-brand-2: var(--skillet-primary);
  --vp-c-brand-3: #d4c5b5;
  --vp-c-brand-soft: rgba(196, 181, 165, 0.12);

  --vp-c-bg: #0d0d0f;
  --vp-c-bg-soft: #161618;
  --vp-c-bg-mute: #1e1e20;
  --vp-c-bg-alt: #0d0d0f;

  --vp-c-text-1: #ebebeb;
  --vp-c-text-2: #a0a0a0;
  --vp-c-text-3: #7a7a7a;

  --vp-c-border: #2e2e30;
  --vp-c-divider: #242426;
  --vp-c-gutter: #1a1a1c;

  --vp-nav-bg-color: rgba(13, 13, 15, 0.95);

  --vp-button-brand-bg: var(--skillet-primary-light);
  --vp-button-brand-hover-bg: #d4c5b5;
  --vp-button-brand-active-bg: #b5a696;
  --vp-button-brand-text: #0d0d0f;

  --vp-code-block-bg: #161618;
  --vp-code-line-highlight-color: rgba(196, 181, 165, 0.08);

  --vp-home-hero-name-color: #ebebeb;
}

/* Typography */
:root {
  --vp-font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  --vp-font-family-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

/* Headings use Plus Jakarta Sans */
h1, h2, h3, h4,
.vp-doc h1, .vp-doc h2, .vp-doc h3, .vp-doc h4,
.VPHero .name, .VPHero .text, .VPHero .tagline {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.VPHero .name {
  font-weight: 700;
}

/* Clean heading styles */
.vp-doc h1 {
  font-size: 2rem;
  line-height: 1.3;
  margin-bottom: 1.5rem;
}

.vp-doc h2 {
  font-size: 1.5rem;
  line-height: 1.4;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--vp-c-divider);
}

.vp-doc h3 {
  font-size: 1.25rem;
  line-height: 1.5;
}

/* Body text */
.vp-doc p, .vp-doc li {
  font-size: 15px;
  line-height: 1.7;
  color: var(--vp-c-text-2);
}

/* Links */
.vp-doc a {
  color: var(--vp-c-brand-1);
  text-decoration: none;
  font-weight: 500;
}

.vp-doc a:hover {
  text-decoration: underline;
}

/* Navigation - clean and minimal like agentskills.io */
.VPNavBar {
  border-bottom: 1px solid var(--vp-c-border);
  backdrop-filter: blur(12px);
}

.VPNavBarTitle .title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: 16px;
}

.VPNavBarMenuLink {
  font-size: 14px;
  font-weight: 500;
}

/* Search - styled like agentskills.io */
.VPNavBarSearch {
  padding-left: 16px;
}

.VPNavBarSearch .DocSearch-Button {
  background: var(--vp-c-bg-soft);
  border: 1px solid var(--vp-c-border);
  border-radius: 6px;
}

.VPNavBarSearch .DocSearch-Button:hover {
  border-color: var(--vp-c-brand-1);
}

/* "On this page" outline - ensure visibility at wider viewports */
@media (min-width: 1280px) {
  .VPDoc:not(.has-sidebar) .VPDocAside {
    display: block;
  }

  .VPDoc .aside {
    display: block !important;
  }

  .VPDoc.has-aside .content-container {
    max-width: 752px;
  }
}

.VPDocAsideOutline .outline-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--vp-c-text-1);
  text-transform: none;
  letter-spacing: 0;
}

.VPDocAsideOutline .outline-link {
  font-size: 13px;
  color: var(--vp-c-text-2);
  transition: color 0.15s ease;
}

.VPDocAsideOutline .outline-link:hover,
.VPDocAsideOutline .outline-link.active {
  color: var(--vp-c-brand-1);
}

/* Card grid for Get Started section */
.vp-doc .card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 16px;
}

@media (max-width: 768px) {
  .vp-doc .card-grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .vp-doc .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.vp-doc .card {
  display: block;
  padding: 20px;
  border: 1px solid var(--vp-c-border);
  border-radius: 8px;
  text-decoration: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  background: var(--vp-c-bg);
}

.vp-doc .card:hover {
  border-color: var(--vp-c-brand-1);
  box-shadow: 0 2px 12px rgba(139, 115, 85, 0.08);
}

.vp-doc .card h3 {
  margin: 0 0 8px 0 !important;
  padding: 0 !important;
  border: none !important;
  font-size: 15px !important;
  font-weight: 600;
  color: var(--vp-c-text-1);
}

.vp-doc .card p {
  margin: 0 !important;
  font-size: 14px;
  color: var(--vp-c-text-2);
  line-height: 1.5;
}

/* Sidebar - flat navigation like agentskills.io */
.VPSidebar {
  border-right: 1px solid var(--vp-c-border);
}

.VPSidebarItem .text {
  font-size: 14px;
  font-weight: 500;
}

.VPSidebarItem.is-active > .item > .link > .text {
  color: var(--vp-c-brand-1);
}

/* Active sidebar item - left border indicator like agentskills.io */
.VPSidebarItem > .item > .link {
  position: relative;
  transition: padding-left 0.2s ease;
}

.VPSidebarItem.is-active > .item > .link {
  padding-left: 12px;
}

.VPSidebarItem > .item > .link::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background-color: var(--vp-c-brand-1);
  border-radius: 1px;
  opacity: 0;
  transform: scaleY(0);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.VPSidebarItem.is-active > .item > .link::before {
  opacity: 1;
  transform: scaleY(1);
}

/* Feature cards - clean borders */
.VPFeature {
  border: 1px solid var(--vp-c-border);
  border-radius: 8px;
  background: var(--vp-c-bg);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.VPFeature:hover {
  border-color: var(--vp-c-brand-1);
  box-shadow: 0 2px 12px rgba(139, 115, 85, 0.08);
}

.VPFeature .title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
}

.VPFeature .details {
  color: var(--vp-c-text-2);
  font-size: 14px;
}

/* Code blocks */
.vp-doc [class*='language-'] {
  border-radius: 8px;
  border: 1px solid var(--vp-c-border);
}

.vp-doc [class*='language-'] code {
  font-size: 13px;
  line-height: 1.6;
}

/* Inline code */
.vp-doc :not(pre) > code {
  background: var(--vp-c-bg-soft);
  border: 1px solid var(--vp-c-border);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 13px;
  color: var(--vp-c-text-1);
}

/* Buttons */
.VPButton.brand {
  border-radius: 6px;
  font-weight: 500;
  font-size: 14px;
}

.VPButton.alt {
  border-radius: 6px;
  font-weight: 500;
  font-size: 14px;
  border: 1px solid var(--vp-c-border);
}

/* Hero section - clean like agentskills.io */
.VPHero .main {
  max-width: 640px;
}

.VPHero .tagline {
  font-size: 18px;
  color: var(--vp-c-text-2);
  font-weight: 400;
  line-height: 1.6;
}

/* Content area max width */
.VPDoc.has-aside .content-container {
  max-width: 752px;
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Clean scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--gray-300);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--gray-400);
}

.dark ::-webkit-scrollbar-thumb {
  background: var(--gray-700);
}

.dark ::-webkit-scrollbar-thumb:hover {
  background: var(--gray-600);
}

/* Transitions */
a, button {
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

/* Footer */
.VPFooter {
  border-top: 1px solid var(--vp-c-border);
}

/* Table styling */
.vp-doc table {
  border: 1px solid var(--vp-c-border);
  border-radius: 8px;
  overflow: hidden;
}

.vp-doc th, .vp-doc td {
  border: none;
  border-bottom: 1px solid var(--vp-c-border);
}

.vp-doc tr:last-child td {
  border-bottom: none;
}

.vp-doc th {
  background: var(--vp-c-bg-soft);
  font-weight: 600;
}

/* Custom container styling */
.vp-doc .custom-block {
  border-radius: 8px;
  border: 1px solid var(--vp-c-border);
}

.vp-doc .custom-block.tip {
  border-color: var(--vp-c-brand-1);
  background: rgba(139, 115, 85, 0.04);
}

.dark .vp-doc .custom-block.tip {
  background: rgba(196, 181, 165, 0.04);
}
