/* PackDB Website - Custom Styles */
/* Dark / Light Theme with CSS Custom Properties */

/* ============================================
   CSS Custom Properties (Design Tokens)
   ============================================ */
:root {
  /* Background Colors */
  --color-canvas: #0d1117;
  --color-canvas-overlay: #13161c;
  --color-canvas-inset: #1c2028;
  --color-canvas-subtle: #161b22;

  /* Foreground Colors */
  --color-fg-default: #e2e8f0;
  --color-fg-muted: #8b949e;
  --color-fg-subtle: #6e7681;

  /* Border Colors */
  --color-border-default: #21262d;
  --color-border-muted: #1c2028;

  /* Accent Colors — restricted to blue + green only */
  --color-accent-fg: #58a6ff;
  --color-accent-emphasis: #1f6feb;
  --color-accent-muted: rgba(56, 139, 253, 0.1);

  /* Status Colors */
  --color-success-fg: #3fb950;
  --color-success-emphasis: #238636;
  --color-warning-fg: #d29922;
  --color-danger-fg: #f85149;

  /* RGB triplets for tint backgrounds */
  --color-accent-rgb: 56, 139, 253;
  --color-success-rgb: 35, 134, 54;
  --color-danger-rgb: 248, 81, 73;

  /* Header / shadow */
  --color-header-bg: rgba(13, 17, 23, 0.95);
  --color-shadow: rgba(0, 0, 0, 0.3);

  /* Legacy mappings */
  --color-primary: #58a6ff;
  --color-primary-light: #79c0ff;
  --color-primary-dark: #1f6feb;
  --color-secondary: #3fb950;
  --color-secondary-light: #56d364;
  --color-secondary-dark: #238636;
  --color-accent: #f85149;
  --color-accent-light: #ff7b72;
  --color-accent-dark: #da3633;

  /* Neutral Colors */
  --color-gray-50: #13161c;
  --color-gray-100: #1c2028;
  --color-gray-200: #262c36;
  --color-gray-300: #484f58;
  --color-gray-400: #6e7681;
  --color-gray-500: #8b949e;
  --color-gray-600: #c9d1d9;
  --color-gray-700: #e2e8f0;
  --color-gray-800: #f0f6fc;
  --color-gray-900: #ffffff;

  /* Typography */
  --font-display: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --font-sans: 'DM Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Spacing */
  --header-height: 4rem;
  --sidebar-width: 16rem;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;
}

/* ============================================
   Light Theme Override
   ============================================ */
[data-theme="light"] {
  --color-canvas: #ffffff;
  --color-canvas-overlay: #f6f8fa;
  --color-canvas-inset: #eef1f5;
  --color-canvas-subtle: #f6f8fa;

  --color-fg-default: #1f2328;
  --color-fg-muted: #59636e;
  --color-fg-subtle: #818b98;

  --color-border-default: #d1d9e0;
  --color-border-muted: #e4e8ec;

  --color-accent-fg: #0969da;
  --color-accent-emphasis: #0550ae;
  --color-accent-muted: rgba(9, 105, 218, 0.1);

  --color-success-fg: #1a7f37;
  --color-success-emphasis: #1a7f37;
  --color-warning-fg: #9a6700;
  --color-danger-fg: #d1242f;

  --color-accent-rgb: 9, 105, 218;
  --color-success-rgb: 26, 127, 55;
  --color-danger-rgb: 209, 36, 47;

  --color-header-bg: rgba(255, 255, 255, 0.95);
  --color-shadow: rgba(0, 0, 0, 0.08);

  --color-primary: #0969da;
  --color-primary-light: #218bff;
  --color-primary-dark: #0550ae;
  --color-secondary: #1a7f37;
  --color-secondary-light: #2da44e;
  --color-secondary-dark: #116329;
  --color-accent: #d1242f;
  --color-accent-light: #ff8182;
  --color-accent-dark: #a40e26;

  --color-gray-50: #f6f8fa;
  --color-gray-100: #eef1f5;
  --color-gray-200: #d1d9e0;
  --color-gray-300: #afb8c1;
  --color-gray-400: #818b98;
  --color-gray-500: #59636e;
  --color-gray-600: #1f2328;
  --color-gray-700: #1f2328;
  --color-gray-800: #0d1117;
  --color-gray-900: #010409;
}

/* ============================================
   Base Styles
   ============================================ */
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 1rem);
}

body {
  font-family: var(--font-sans);
  background-color: var(--color-canvas);
  color: var(--color-fg-default);
  line-height: 1.7;
  font-size: 1rem;
}

/* ============================================
   Typography
   ============================================ */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.2;
  color: var(--color-fg-default);
  letter-spacing: -0.01em;
}

h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-fg-default);
}

code, pre, kbd, samp {
  font-family: var(--font-mono);
}

/* Inline code */
:not(pre) > code {
  background-color: var(--color-canvas-subtle);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  font-size: 0.85em;
  color: var(--color-fg-default);
}

/* Links */
a {
  color: var(--color-accent-fg);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-primary-light);
  text-decoration: underline;
}

/* ============================================
   Code Blocks (Prism.js enhancements)
   ============================================ */
.code-block {
  position: relative;
  margin: 1rem 0;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--color-border-default);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.code-block .code-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 1rem;
  background-color: var(--color-canvas-subtle);
  border-bottom: 1px solid var(--color-border-default);
  font-size: 0.75rem;
  color: var(--color-fg-muted);
}

.code-block .code-header .language-label {
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 0.05em;
}

.code-block pre {
  margin: 0;
  border-radius: 0;
}

.code-block pre[class*="language-"] {
  background: var(--color-canvas);
  padding: 1.25rem;
  overflow-x: auto;
  font-size: 0.875rem;
  line-height: 1.7;
}

/* Copy button */
.copy-button {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  background-color: transparent;
  border: 1px solid var(--color-border-default);
  border-radius: 4px;
  color: var(--color-fg-muted);
  font-size: 0.75rem;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.copy-button:hover {
  background-color: var(--color-canvas-subtle);
  border-color: var(--color-fg-subtle);
  color: var(--color-fg-default);
}

.copy-button.copied {
  background-color: var(--color-success-emphasis);
  border-color: var(--color-success-emphasis);
  color: white;
}

/* ============================================
   Navigation
   ============================================ */
.nav-link {
  position: relative;
  color: var(--color-fg-muted);
  transition: color var(--transition-fast);
  font-size: 0.9rem;
}

.nav-link:hover {
  color: var(--color-fg-default);
  text-decoration: none;
}

.nav-link.active {
  color: var(--color-fg-default);
  font-weight: 500;
}

.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: -0.5rem;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--color-accent-fg);
  border-radius: 2px;
}

/* Mobile menu */
.mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-slow);
}

.mobile-menu.open {
  max-height: 24rem;
}

/* ============================================
   Sidebar Navigation (Documentation pages)
   ============================================ */
.sidebar-nav {
  position: sticky;
  top: calc(var(--header-height) + 1rem);
  max-height: calc(100vh - var(--header-height) - 2rem);
  overflow-y: auto;
}

.sidebar-link {
  display: block;
  padding: 0.5rem 1rem;
  color: var(--color-fg-muted);
  border-left: 2px solid transparent;
  transition: all var(--transition-fast);
  border-radius: 0 4px 4px 0;
}

.sidebar-link:hover {
  color: var(--color-fg-default);
  background-color: var(--color-canvas-subtle);
  text-decoration: none;
}

.sidebar-link.active {
  color: var(--color-accent-fg);
  border-left-color: var(--color-accent-fg);
  background-color: var(--color-accent-muted);
}

/* ============================================
   Buttons
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.7rem 1.5rem;
  font-weight: 500;
  font-size: 0.9rem;
  border-radius: 6px;
  transition: all var(--transition-fast);
  cursor: pointer;
  text-decoration: none;
}

.btn:hover {
  text-decoration: none;
}

.btn-primary {
  background-color: var(--color-success-emphasis);
  color: white;
  border: 1px solid var(--color-success-emphasis);
  box-shadow: 0 1px 3px rgba(35, 134, 54, 0.3);
}

.btn-primary:hover {
  background-color: #2ea043;
  border-color: #2ea043;
  color: white;
  box-shadow: 0 2px 6px rgba(35, 134, 54, 0.4);
}

.btn-secondary {
  background-color: transparent;
  color: var(--color-fg-default);
  border: 1px solid var(--color-border-default);
}

.btn-secondary:hover {
  background-color: var(--color-canvas-subtle);
  border-color: var(--color-fg-subtle);
  color: var(--color-fg-default);
}

.btn-accent {
  background-color: var(--color-accent-emphasis);
  color: white;
  border: 1px solid var(--color-accent-emphasis);
}

.btn-accent:hover {
  background-color: #388bfd;
  border-color: #388bfd;
  color: white;
}

/* ============================================
   Cards
   ============================================ */
.card {
  background-color: var(--color-canvas-overlay);
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  padding: 1.5rem;
  transition: box-shadow var(--transition-base);
}

.card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.card-feature {
  text-align: left;
}

.card-feature .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  margin-bottom: 0.75rem;
  color: var(--color-accent-fg);
}

/* ============================================
   Badges
   ============================================ */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.6rem;
  font-size: 0.7rem;
  font-weight: 500;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.badge-tag {
  background-color: var(--color-canvas-subtle);
  color: var(--color-fg-muted);
  border: 1px solid var(--color-border-default);
}

.badge-basic {
  background-color: rgba(63, 185, 80, 0.12);
  color: var(--color-success-fg);
  border: 1px solid rgba(63, 185, 80, 0.2);
}

.badge-intermediate {
  background-color: rgba(56, 139, 253, 0.12);
  color: var(--color-accent-fg);
  border: 1px solid rgba(56, 139, 253, 0.2);
}

.badge-advanced {
  background-color: rgba(248, 81, 73, 0.12);
  color: var(--color-danger-fg);
  border: 1px solid rgba(248, 81, 73, 0.2);
}

/* ============================================
   Tables
   ============================================ */
.table-wrapper {
  overflow-x: auto;
  margin: 1rem 0;
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

th {
  background-color: var(--color-canvas-subtle);
  font-weight: 600;
  text-align: left;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-border-default);
  color: var(--color-fg-muted);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-border-muted);
  color: var(--color-fg-default);
}

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

tr:hover td {
  background-color: rgba(88, 166, 255, 0.04);
}

/* Highlight selected rows in output tables */
td.selected-row {
  color: var(--color-success-fg);
  font-weight: 500;
}

/* ============================================
   Example Page Sections
   ============================================ */
.example-section {
  margin-bottom: 3rem;
}

.example-section-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-fg-subtle);
  margin-bottom: 0.75rem;
}

.example-section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background-color: var(--color-border-muted);
}

.query-annotation {
  display: flex;
  gap: 0.75rem;
  padding: 0.5rem 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-fg-muted);
}

.query-annotation .annotation-marker {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-accent-fg);
  border: 1px solid var(--color-accent-fg);
  border-radius: 50%;
}

.interpretation-box {
  background-color: var(--color-canvas-subtle);
  border-left: 3px solid var(--color-accent-fg);
  border-radius: 0 6px 6px 0;
  padding: 1rem 1.25rem;
  margin-top: 1rem;
  color: var(--color-fg-muted);
  font-size: 0.9rem;
  line-height: 1.7;
}

/* ============================================
   Collapsible Sections
   ============================================ */
.collapsible {
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  margin: 1rem 0;
}

.collapsible-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  cursor: pointer;
  background-color: var(--color-canvas-subtle);
  border-radius: 8px;
  transition: background-color var(--transition-fast);
}

.collapsible-header:hover {
  background-color: var(--color-canvas-overlay);
}

.collapsible-header .icon {
  transition: transform var(--transition-base);
  color: var(--color-fg-muted);
}

.collapsible.open .collapsible-header .icon {
  transform: rotate(180deg);
}

.collapsible-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-slow);
}

.collapsible.open .collapsible-content {
  max-height: 1000px;
}

.collapsible-body {
  padding: 1rem;
}

/* ============================================
   Breadcrumbs
   ============================================ */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--color-fg-muted);
}

.breadcrumb a {
  color: var(--color-fg-muted);
  transition: color var(--transition-fast);
}

.breadcrumb a:hover {
  color: var(--color-accent-fg);
  text-decoration: none;
}

.breadcrumb .separator {
  color: var(--color-fg-subtle);
}

/* ============================================
   Callouts / Admonitions
   Standardized: info (blue), warning (yellow), danger (red)
   ============================================ */
.callout {
  border-left: 3px solid var(--color-border-default);
  border-radius: 0 6px 6px 0;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--color-fg-muted);
  background-color: var(--color-canvas-subtle);
}

.callout-info,
.callout-warning,
.callout-danger {
  /* All callout variants share the same neutral style */
}

.callout strong {
  color: var(--color-fg-default);
}

/* Semantic icon colors — symbols only, not containers */
.text-success { color: var(--color-success-fg); }
.text-danger  { color: var(--color-danger-fg); }
.text-warning { color: var(--color-warning-fg); }

/* ============================================
   Installation Tabs (Getting Started page)
   ============================================ */
.install-tab {
  transition: all var(--transition-fast);
  background-color: var(--color-canvas-subtle);
  color: var(--color-fg-muted);
  border: none;
  cursor: pointer;
}

.install-tab:hover:not(.active) {
  background-color: var(--color-canvas-subtle);
  color: var(--color-fg-default);
}

.install-tab.active {
  background-color: var(--color-accent-muted);
  color: var(--color-accent-fg);
}

.install-content {
  animation: fadeIn var(--transition-base);
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(0.5rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================
   Homepage-specific styles
   ============================================ */
.hero-code {
  position: relative;
  max-width: 36rem;
  margin: 0 auto;
}

.feature-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

@media (max-width: 768px) {
  .feature-strip {
    grid-template-columns: repeat(2, 1fr);
  }
}

.feature-item {
  text-align: left;
}

.feature-item h4 {
  font-size: 0.95rem;
  margin-bottom: 0.25rem;
}

.feature-item p {
  font-size: 0.85rem;
  color: var(--color-fg-muted);
  line-height: 1.5;
}

.section-divider {
  border: none;
  border-top: 1px solid var(--color-border-muted);
  margin: 0;
}

/* ============================================
   Utility Classes
   ============================================ */
.text-primary {
  color: var(--color-accent-fg);
}

.text-secondary {
  color: var(--color-success-fg);
}

.text-accent {
  color: var(--color-danger-fg);
}

.bg-primary {
  background-color: var(--color-accent-emphasis);
}

.bg-secondary {
  background-color: var(--color-success-emphasis);
}

.bg-accent {
  background-color: var(--color-accent);
}

/* ============================================
   Theme-aware Utility Classes
   ============================================ */
.header-bg {
  background-color: var(--color-header-bg);
}

.bg-accent-tint {
  background-color: rgba(var(--color-accent-rgb), 0.08);
}

.bg-success-tint {
  background-color: rgba(var(--color-success-rgb), 0.08);
}

.bg-danger-tint {
  background-color: rgba(var(--color-danger-rgb), 0.08);
}

.shadow-theme {
  box-shadow: 0 1px 3px var(--color-shadow);
}

/* Smooth color transition on theme switch */
html {
  color-scheme: dark;
}

html[data-theme="light"] {
  color-scheme: light;
}

html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}

/* ============================================
   Theme Toggle Button
   ============================================ */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--color-border-default);
  border-radius: 6px;
  background-color: transparent;
  color: var(--color-fg-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.theme-toggle:hover {
  background-color: var(--color-canvas-subtle);
  color: var(--color-fg-default);
  border-color: var(--color-fg-subtle);
}

.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
  width: 1rem;
  height: 1rem;
}

/* Show/hide icons based on theme */
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }

[data-theme="light"] .theme-toggle .icon-sun { display: block; }
[data-theme="light"] .theme-toggle .icon-moon { display: none; }

/* Focus styles for accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-accent-fg);
  outline-offset: 2px;
}

/* Skip link for accessibility */
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  padding: 1rem;
  background-color: var(--color-accent-emphasis);
  color: white;
  z-index: 9999;
}

.skip-link:focus {
  top: 0;
}

/* ============================================
   Dark Theme Overrides for Prism.js
   ============================================ */
code[class*="language-"],
pre[class*="language-"] {
  color: var(--color-fg-default);
  background: none;
  text-shadow: none;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: var(--color-fg-subtle);
}

.token.punctuation {
  color: var(--color-fg-muted);
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
  color: #79c0ff;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
  color: #a5d6ff;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
  color: #d2a8ff;
}

.token.atrule,
.token.attr-value,
.token.keyword {
  color: #ff7b72;
}

.token.function,
.token.class-name {
  color: #d2a8ff;
}

.token.regex,
.token.important,
.token.variable {
  color: #ffa657;
}

/* ============================================
   Light Theme Overrides for Prism.js
   High-contrast, saturated colors for readability
   ============================================ */
[data-theme="light"] code[class*="language-"],
[data-theme="light"] pre[class*="language-"] {
  color: #24292f;
}

[data-theme="light"] .token.comment,
[data-theme="light"] .token.prolog,
[data-theme="light"] .token.doctype,
[data-theme="light"] .token.cdata {
  color: #57606a;
  font-style: italic;
}

[data-theme="light"] .token.punctuation {
  color: #24292f;
}

[data-theme="light"] .token.property,
[data-theme="light"] .token.tag,
[data-theme="light"] .token.boolean,
[data-theme="light"] .token.number,
[data-theme="light"] .token.constant,
[data-theme="light"] .token.symbol,
[data-theme="light"] .token.deleted {
  color: #0550ae;
}

[data-theme="light"] .token.selector,
[data-theme="light"] .token.attr-name,
[data-theme="light"] .token.string,
[data-theme="light"] .token.char,
[data-theme="light"] .token.builtin,
[data-theme="light"] .token.inserted {
  color: #116329;
}

[data-theme="light"] .token.operator,
[data-theme="light"] .token.entity,
[data-theme="light"] .token.url,
[data-theme="light"] .language-css .token.string,
[data-theme="light"] .style .token.string {
  color: #6639ba;
}

[data-theme="light"] .token.atrule,
[data-theme="light"] .token.attr-value,
[data-theme="light"] .token.keyword {
  color: #cf222e;
  font-weight: 500;
}

[data-theme="light"] .token.function,
[data-theme="light"] .token.class-name {
  color: #6639ba;
}

[data-theme="light"] .token.regex,
[data-theme="light"] .token.important,
[data-theme="light"] .token.variable {
  color: #953800;
}

/* Light theme code-block adjustments */
[data-theme="light"] .code-block {
  box-shadow: 0 1px 4px var(--color-shadow);
}

[data-theme="light"] .code-block pre[class*="language-"] {
  background: var(--color-canvas-subtle);
}

[data-theme="light"] .code-block .code-header {
  background-color: var(--color-canvas-inset);
}

/* Logo: no filter needed — SVG colors work on both light and dark backgrounds */

/* ============================================
   Print Styles
   ============================================ */
@media print {
  .no-print,
  nav,
  .sidebar-nav,
  .copy-button {
    display: none !important;
  }

  body {
    background-color: white;
    color: black;
  }

  .code-block pre {
    white-space: pre-wrap;
    word-wrap: break-word;
  }
}