/* Card component styling for dark mode */
.card {
  background-color: var(--color-bdc-background-2);
  border: 1px solid var(--color-bdc-neutral-5);
  border-radius: 0.5rem;
  overflow: hidden;
  transition: border-color 150ms ease-in-out, box-shadow 150ms ease-in-out;
}

.card:hover {
  border-color: var(--color-bdc-neutral-4);
}

.card-header {
  padding: 1rem;
  border-bottom: 1px solid var(--color-bdc-neutral-5);
}

.card-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-bdc-neutral-1);
}

.card-description {
  font-size: var(--font-size-sm);
  color: var(--color-bdc-neutral-2);
  margin-top: 0.25rem;
}

.card-content {
  padding: 1rem;
}

.card-footer {
  padding: 1rem;
  border-top: 1px solid var(--color-bdc-neutral-5);
}


/* Code block styling for dark mode */
pre {
  background-color: var(--color-bdc-background-4);
  border: 1px solid var(--color-bdc-neutral-5);
  border-radius: 0.25rem;
  overflow: auto;
  padding: 1rem;
  margin: 1rem 0;
}

code {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
}

pre code {
  background-color: transparent;
  border: none;
  padding: 0;
  color: var(--color-bdc-neutral-1);
}

.inline-code {
  background-color: var(--color-bdc-neutral-5);
  border: 1px solid var(--color-bdc-neutral-5);
  border-radius: 0.125rem;
  padding: 0 0.125rem;
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-bdc-neutral-1);
}

/* Code syntax highlighting for dark mode */
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: var(--color-bdc-neutral-3);
}

.token.punctuation {
  color: var(--color-bdc-neutral-2);
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol {
  color: var(--color-bdc-theme-2-text);
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin {
  color: var(--color-bdc-semantic-good);
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
  color: var(--color-bdc-theme-1-text);
}

.token.atrule,
.token.attr-value,
.token.keyword {
  color: var(--color-bdc-theme-3-text);
}

.token.function,
.token.class-name {
  color: var(--color-bdc-theme-2-text);
}

.token.regex,
.token.important,
.token.variable {
  color: var(--color-bdc-semantic-warning);
}

.token.important,
.token.bold {
  font-weight: bold;
}

.token.italic {
  font-style: italic;
}

.token.entity {
  cursor: help;
}


/* Documentation-specific components styling */

/* Table of contents */
.toc {
  background-color: var(--color-bdc-background-2);
  border-radius: 0.5rem;
  padding: 1rem;
  margin: 1.5rem 0;
}

.toc-title {
  font-weight: var(--font-weight-semibold);
  margin-bottom: 0.75rem;
  color: var(--color-bdc-neutral-1);
}

.toc-list {
  list-style-type: none;
  padding-left: 0.5rem;
}

.toc-item {
  margin: 0.25rem 0;
}

.toc-link {
  color: var(--color-bdc-neutral-2);
  text-decoration: none;
  transition: color 150ms ease-in-out;
}

.toc-link:hover {
  color: var(--color-bdc-theme-1-text);
}

/* Callouts */
.callout {
  border-radius: 0.5rem;
  padding: 1rem;
  margin: 1.5rem 0;
  border-left: 4px solid var(--color-bdc-theme-1);
  background-color: var(--color-bdc-background-2);
}

.callout-title {
  font-weight: var(--font-weight-semibold);
  margin-bottom: 0.5rem;
  color: var(--color-bdc-neutral-1);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.callout-icon {
  width: 1.25rem;
  height: 1.25rem;
}

.callout-content {
  color: var(--color-bdc-neutral-2);
}

/* Icon styling */
.icon {
  color: var(--color-bdc-neutral-3);
}

.icon:hover {
  color: var(--color-bdc-neutral-1);
}

.active .icon {
  color: var(--color-bdc-neutral-1);
}

/* Info callout */
.callout-info {
  border-left-color: var(--color-bdc-theme-1);
}

/* Warning callout */
.callout-warning {
  border-left-color: var(--color-bdc-semantic-warning);
}

/* Error callout */
.callout-error {
  border-left-color: var(--color-bdc-semantic-danger);
}

/* Success callout */
.callout-success {
  border-left-color: var(--color-bdc-semantic-good);
}

/* Tables */
.table-container {
  overflow-x: auto;
  margin: 1.5rem 0;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

th {
  background-color: var(--color-bdc-background-2);
  color: var(--color-bdc-neutral-1);
  font-weight: var(--font-weight-semibold);
  text-align: left;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-bdc-neutral-4);
}

td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-bdc-neutral-5);
  color: var(--color-bdc-neutral-2);
}

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

/* API Reference */
.api-method {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.api-method-badge {
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
}

.api-method-get {
  background-color: rgba(0, 169, 78, 0.1);
  color: var(--color-bdc-semantic-good);
}

.api-method-post {
  background-color: var(--color-bdc-background-primary);
  color: var(--color-bdc-theme-1-text);
}

.api-method-put {
  background-color: rgba(236, 165, 0, 0.1);
  color: var(--color-bdc-semantic-warning);
}

.api-method-delete {
  background-color: rgba(243, 58, 69, 0.1);
  color: var(--color-bdc-semantic-danger);
}

.api-endpoint {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  padding: 0.25rem 0.5rem;
  background-color: var(--color-bdc-background-2);
  border-radius: 0.25rem;
  color: var(--color-bdc-neutral-1);
}

/* Steps/Numbered Lists */
.steps-container {
  counter-reset: step;
  margin: 1.5rem 0;
}

.step {
  display: flex;
  margin-bottom: 1.5rem;
  position: relative;
}

.step-number {
  counter-increment: step;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: var(--color-bdc-theme-1);
  color: var(--color-bdc-on-anycolor);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight-semibold);
  margin-right: 1rem;
  flex-shrink: 0;
}

.step-number::before {
  content: counter(step);
}

.step-content {
  flex: 1;
}

.step-title {
  font-weight: var(--font-weight-semibold);
  margin-bottom: 0.5rem;
  color: var(--color-bdc-neutral-1);
}

/* Light mode overrides */
.light .toc {
  background-color: var(--color-bdc-background-2);
}

.light .callout {
  background-color: var(--color-bdc-background-2);
}

.light th {
  background-color: var(--color-bdc-background-2);
  border-bottom-color: var(--color-bdc-neutral-4);
}

.light td {
  border-bottom-color: var(--color-bdc-neutral-5);
}

.light .api-endpoint {
  background-color: var(--color-bdc-background-2);
}


/* Mintlify-specific components styling */

/* Sidebar */
.sidebar {
  background-color: var(--color-bdc-background-1);
  border-right: 1px solid var(--color-bdc-neutral-5);
}

.sidebar-title {
  color: var(--color-bdc-neutral-1);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
}

.sidebar-item {
  color: var(--color-bdc-neutral-2);
  transition: color 150ms ease-in-out;
}

.sidebar-item:hover {
  color: var(--color-bdc-neutral-1);
}

.sidebar-item.active {
  color: var(--color-bdc-on-anycolor);
  background-color: var(--color-bdc-theme-1);
  font-weight: var(--font-weight-medium);
}

/* Navbar */
.navbar {
  background-color: var(--color-bdc-background-1);
  border-bottom: 1px solid var(--color-bdc-neutral-5);
}

.navbar-logo {
  height: 2rem;
}

.navbar-link {
  color: var(--color-bdc-neutral-2);
  transition: color 150ms ease-in-out;
}

.navbar-link:hover {
  color: var(--color-bdc-neutral-1);
}

.navbar-button {
  background-color: var(--color-bdc-neutral-2);
  color: var(--color-bdc-on-neutral);
  border-radius: 0.25rem;
  padding: 0.5rem 1rem;
  font-weight: var(--font-weight-medium);
  transition: background-color 150ms ease-in-out;
  border: 1px solid var(--color-bdc-neutral-3);
}

.navbar-button:hover {
  background-color: var(--color-bdc-neutral-1);
}

/* Search */
.search-button {
  background-color: var(--color-bdc-background-2);
  border: 1px solid var(--color-bdc-neutral-5);
  border-radius: 0.25rem;
  color: var(--color-bdc-neutral-2);
  padding: 0.5rem 1rem;
  transition: border-color 150ms ease-in-out, color 150ms ease-in-out;
}

.search-button:hover {
  border-color: var(--color-bdc-neutral-4);
  color: var(--color-bdc-neutral-1);
}

.search-shortcut {
  background-color: var(--color-bdc-background-2);
  border-radius: 0.25rem;
  padding: 0.125rem 0.25rem;
  font-size: var(--font-size-xs);
  color: var(--color-bdc-neutral-2);
}

/* Footer */
.footer {
  border-top: 1px solid var(--color-bdc-neutral-5);
  background-color: var(--color-bdc-background-1);
}

.footer-link {
  color: var(--color-bdc-neutral-2);
  transition: color 150ms ease-in-out;
}

.footer-link:hover {
  color: var(--color-bdc-neutral-1);
}

.footer-social {
  color: var(--color-bdc-neutral-2);
  transition: color 150ms ease-in-out;
}

.footer-social:hover {
  color: var(--color-bdc-neutral-1);
}

/* Content */
.content {
  max-width: 768px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

.content h1 {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-semibold);
  margin-bottom: 1.5rem;
  color: var(--color-bdc-neutral-1);
  font-family: var(--font-mono);
}

.content h2 {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  color: var(--color-bdc-neutral-1);
  font-family: var(--font-mono);
}

.content h3, 
.content h4, 
.content h5, 
.content h6 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  color: var(--color-bdc-neutral-1);
  font-family: var(--font-mono);
}

.content p {
  margin-bottom: 1rem;
  color: var(--color-bdc-neutral-1);
  line-height: var(--line-height-relaxed);
}

.content a {
  color: var(--color-bdc-neutral-1);
  text-decoration: underline;
  text-decoration-color: var(--color-bdc-neutral-4);
  transition: text-decoration-color 150ms ease-in-out;
}

.content a:hover {
  text-decoration: underline;
  text-decoration-color: var(--color-bdc-neutral-2);
}

.content ul, .content ol {
  margin-bottom: 1rem;
  padding-left: 1.5rem;
  color: var(--color-bdc-neutral-1);
}

.content li {
  margin-bottom: 0.5rem;
}

/* Light mode overrides */
.light .sidebar {
  background-color: var(--color-bdc-background-1);
  border-right-color: var(--color-bdc-neutral-5);
}

.light .navbar {
  background-color: var(--color-bdc-background-1);
  border-bottom-color: var(--color-bdc-neutral-5);
}

.light .search-button {
  background-color: var(--color-bdc-background-2);
  border-color: var(--color-bdc-neutral-5);
}

.light .search-shortcut {
  background-color: var(--color-bdc-background-2);
}

.light .footer {
  border-top-color: var(--color-bdc-neutral-5);
  background-color: var(--color-bdc-background-1);
}

.light .content h1, 
.light .content h2, 
.light .content h3 {
  color: var(--color-bdc-neutral-1);
}

.light .content p, 
.light .content ul, 
.light .content ol {
  color: var(--color-bdc-neutral-1);
}

.light .content a {
  color: var(--color-bdc-neutral-1);
}


/* Mintlify-specific dark mode styling */
:root {
  /* Override Mintlify variables with our dark theme */
  --mint-primary: var(--color-bdc-theme-1);
  --mint-primary-light: var(--color-bdc-theme-1-highlight);
  --mint-primary-dark: var(--color-bdc-theme-1-text);
  
  --mint-background: var(--color-bdc-background-1);
  --mint-text: var(--color-bdc-neutral-1);
  --mint-text-light: var(--color-bdc-neutral-2);
  --mint-text-xlight: var(--color-bdc-neutral-3);
  
  --mint-border: var(--color-bdc-neutral-5);
  --mint-border-light: var(--color-bdc-neutral-6);
  
  --mint-card-background: var(--color-bdc-background-2);
  --mint-code-background: var(--color-bdc-background-4);
  
  /* Semantic colors */
  --mint-success: var(--color-bdc-semantic-good);
  --mint-warning: var(--color-bdc-semantic-warning);
  --mint-danger: var(--color-bdc-semantic-danger);
  
  /* Typography */
  --font-sans: var(--font-sans);
  --font-mono: var(--font-mono);
}

/* Global dark mode styles */
body {
  background-color: var(--color-bdc-background-1);
  color: var(--color-bdc-neutral-1);
  font-family: var(--font-sans);
}

/* Navigation styling */
.sidebar {
  background-color: var(--color-bdc-background-2);
  border-right: 1px solid var(--color-bdc-neutral-5);
}

.sidebar-title {
  color: var(--color-bdc-neutral-1);
  font-weight: var(--font-weight-semibold);
}

.sidebar-item {
  color: var(--color-bdc-neutral-2);
}

.sidebar-item:hover {
  color: var(--color-bdc-neutral-1);
  background-color: var(--color-bdc-neutral-6);
}

.sidebar-item.active {
  color: var(--color-bdc-on-anycolor);
  background-color: var(--color-bdc-theme-1);
}

.sidebar-group-title {
  color: var(--color-bdc-neutral-3);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
}

/* Header and navbar styling */
.navbar {
  background-color: var(--color-bdc-background-1);
  border-bottom: 1px solid var(--color-bdc-neutral-5);
}

.navbar-item {
  color: var(--color-bdc-neutral-2);
}

.navbar-item:hover {
  color: var(--color-bdc-neutral-1);
}

.navbar-button {
  background-color: var(--color-bdc-theme-1);
  color: var(--color-bdc-on-anycolor);
  border-radius: 0.25rem;
  font-weight: var(--font-weight-medium);
}

.navbar-button:hover {
  background-color: var(--color-bdc-theme-1-text);
}

/* Card styling */
.card, .mint-card {
  background-color: var(--color-bdc-background-2);
  border: 1px solid var(--color-bdc-neutral-5);
  border-radius: 0.5rem;
  overflow: hidden;
  transition: border-color 150ms ease-in-out, box-shadow 150ms ease-in-out;
}

.card:hover, .mint-card:hover {
  border-color: var(--color-bdc-neutral-4);
}

.card-title, .mint-card-title {
  color: var(--color-bdc-neutral-1);
  font-weight: var(--font-weight-semibold);
}

.card-description, .mint-card-description {
  color: var(--color-bdc-neutral-2);
}

/* Content styling */
.content h1, .content h2, .content h3, .content h4, .content h5, .content h6 {
  color: var(--color-bdc-neutral-1);
  font-weight: var(--font-weight-semibold);
}

.content p, .content li {
  color: var(--color-bdc-neutral-2);
}

.content a {
  color: var(--color-bdc-theme-1-text);
  text-decoration: none;
}

.content a:hover {
  text-decoration: underline;
}

.content strong {
  color: var(--color-bdc-neutral-1);
  font-weight: var(--font-weight-semibold);
}

.content blockquote {
  border-left: 4px solid var(--color-bdc-neutral-5);
  padding-left: 1rem;
  color: var(--color-bdc-neutral-2);
}

.content hr {
  border-color: var(--color-bdc-neutral-5);
}

.content table {
  border-collapse: collapse;
  width: 100%;
}

.content th {
  background-color: var(--color-bdc-background-2);
  color: var(--color-bdc-neutral-1);
  font-weight: var(--font-weight-semibold);
  text-align: left;
  padding: 0.75rem;
  border: 1px solid var(--color-bdc-neutral-5);
}

.content td {
  padding: 0.75rem;
  border: 1px solid var(--color-bdc-neutral-5);
  color: var(--color-bdc-neutral-2);
}

.content tr:nth-child(even) {
  background-color: var(--color-bdc-background-2);
}

/* Code block styling */
.content pre {
  background-color: var(--color-bdc-background-4);
  border: 1px solid var(--color-bdc-neutral-5);
  border-radius: 0.25rem;
  overflow: auto;
  padding: 1rem;
}

.content code {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  background-color: var(--color-bdc-neutral-5);
  border-radius: 0.125rem;
  padding: 0.125rem 0.25rem;
  color: var(--color-bdc-neutral-1);
}

.content pre code {
  background-color: transparent;
  padding: 0;
  border-radius: 0;
}

/* Button styling */
.button, .mint-button {
  border-radius: 0.25rem;
  font-weight: var(--font-weight-medium);
  transition: background-color 150ms ease-in-out;
}

.button-primary, .mint-button-primary {
  background-color: var(--color-bdc-neutral-1);
  color: var(--color-bdc-on-neutral);
  border: 1px solid var(--color-bdc-neutral-3);
  border-radius: 0.5rem;
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
}

.button-primary:hover, .mint-button-primary:hover {
  background-color: var(--color-bdc-neutral-2);
}

.button-secondary, .mint-button-secondary {
  background-color: transparent;
  color: var(--color-bdc-neutral-1);
  border: 1px solid var(--color-bdc-neutral-5);
}

.button-secondary:hover, .mint-button-secondary:hover {
  background-color: var(--color-bdc-neutral-5);
}

/* Tab styling */
.tabs {
  border-bottom: 1px solid var(--color-bdc-neutral-5);
}

.tab {
  color: var(--color-bdc-neutral-2);
  border-bottom: 2px solid transparent;
  transition: color 150ms ease-in-out, border-color 150ms ease-in-out;
  font-family: var(--font-mono);
}

.tab:hover {
  color: var(--color-bdc-neutral-1);
}

.tab.active {
  color: var(--color-bdc-theme-1-text);
  border-bottom-color: var(--color-bdc-theme-1);
}

/* Callout styling */
.callout {
  border-radius: 0.25rem;
  border-left: 4px solid;
  padding: 1rem;
}

.callout-info {
  background-color: var(--color-bdc-theme-1-highlight);
  border-left-color: var(--color-bdc-theme-1);
}

.callout-warning {
  background-color: var(--color-bdc-semantic-warning-background);
  border-left-color: var(--color-bdc-semantic-warning);
}

.callout-danger {
  background-color: var(--color-bdc-semantic-danger-background);
  border-left-color: var(--color-bdc-semantic-danger);
}

.callout-success {
  background-color: var(--color-bdc-semantic-good-background);
  border-left-color: var(--color-bdc-semantic-good);
}

/* Search styling */
.search-input {
  background-color: var(--color-bdc-background-2);
  border: 1px solid var(--color-bdc-neutral-5);
  color: var(--color-bdc-neutral-1);
  border-radius: 0.25rem;
}

.search-input::placeholder {
  color: var(--color-bdc-neutral-3);
}

.search-results {
  background-color: var(--color-bdc-background-2);
  border: 1px solid var(--color-bdc-neutral-5);
  border-radius: 0.25rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.search-result-item {
  border-bottom: 1px solid var(--color-bdc-neutral-5);
}

.search-result-item:hover {
  background-color: var(--color-bdc-neutral-6);
}

.search-result-title {
  color: var(--color-bdc-neutral-1);
  font-weight: var(--font-weight-medium);
}

.search-result-description {
  color: var(--color-bdc-neutral-2);
}

/* Footer styling */
.footer {
  background-color: var(--color-bdc-background-2);
  border-top: 1px solid var(--color-bdc-neutral-5);
  color: var(--color-bdc-neutral-2);
}

.footer-link {
  color: var(--color-bdc-neutral-2);
}

.footer-link:hover {
  color: var(--color-bdc-neutral-1);
}

.footer-social-icon {
  color: var(--color-bdc-neutral-2);
}

.footer-social-icon:hover {
  color: var(--color-bdc-neutral-1);
}


/* Navigation component styling for dark mode */
.nav {
  background-color: var(--color-bdc-background-1);
  border-right: 1px solid var(--color-bdc-neutral-5);
}

.nav-header {
  padding: 1rem;
  border-bottom: 1px solid var(--color-bdc-neutral-5);
}

.nav-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-bdc-neutral-1);
}

.nav-list {
  padding: 0.5rem 0;
}

.nav-item {
  padding: 0.5rem 1rem;
  color: var(--color-bdc-neutral-2);
  font-size: var(--font-size-sm);
  transition: color 150ms ease-in-out, background-color 150ms ease-in-out;
}

.nav-item:hover {
  color: var(--color-bdc-neutral-1);
  background-color: var(--color-bdc-neutral-6);
}

.nav-item.active {
  color: var(--color-bdc-on-anycolor);
  background-color: var(--color-bdc-theme-1);
}

.nav-group-title {
  padding: 0.5rem 1rem;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-bdc-neutral-3);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
}


/* Theme toggle component styling */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.25rem;
  background-color: var(--color-bdc-background-2);
  color: var(--color-bdc-neutral-2);
  cursor: pointer;
  transition: background-color 150ms ease-in-out, color 150ms ease-in-out;
}

.theme-toggle:hover {
  background-color: var(--color-bdc-neutral-5);
  color: var(--color-bdc-neutral-1);
}

.theme-toggle-icon {
  width: 1.25rem;
  height: 1.25rem;
}

/* Light mode specific styles */
.light .theme-toggle {
  background-color: var(--color-bdc-background-2);
  color: var(--color-bdc-neutral-2);
}

.light .theme-toggle:hover {
  background-color: var(--color-bdc-neutral-5);
  color: var(--color-bdc-neutral-1);
}

/* Dark mode specific styles for components */
.light .card, 
.light .mint-card {
  background-color: var(--color-bdc-background-1);
  border-color: var(--color-bdc-neutral-5);
}

.light .sidebar {
  background-color: var(--color-bdc-background-1);
  border-right-color: var(--color-bdc-neutral-5);
}

.light .navbar {
  background-color: var(--color-bdc-background-1);
  border-bottom-color: var(--color-bdc-neutral-5);
}

.light .content h1, 
.light .content h2, 
.light .content h3, 
.light .content h4, 
.light .content h5, 
.light .content h6 {
  color: var(--color-bdc-neutral-1);
}

.light .content p, 
.light .content li {
  color: var(--color-bdc-neutral-2);
}

.light .content a {
  color: var(--color-bdc-theme-1-text);
}

.light .content code {
  background-color: var(--color-bdc-neutral-5);
  color: var(--color-bdc-neutral-1);
}

.light .content pre {
  background-color: var(--color-bdc-background-4);
}

.light .button-primary, 
.light .mint-button-primary {
  background-color: var(--color-bdc-neutral-2);
  color: var(--color-bdc-on-anycolor);
  border-radius: 0.5rem;
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
}

.light .button-secondary, 
.light .mint-button-secondary {
  background-color: var(--color-bdc-neutral-5);
  color: var(--color-bdc-neutral-1);
}

.light .tab {
  color: var(--color-bdc-neutral-2);
}

.light .tab:hover {
  color: var(--color-bdc-neutral-1);
}

.light .tab.active {
  color: var(--color-bdc-theme-1-text);
  border-bottom-color: var(--color-bdc-theme-1);
}


/* Import variables */
@import './variables/colors.css';
@import './variables/typography.css';

/* Import component styles */
@import './components/cards.css';
@import './components/navigation.css';
@import './components/code.css';
@import './components/mintlify-dark.css';
@import './components/theme-toggle.css';
@import './components/docs-specific.css';
@import './components/mintlify-components.css';

/* Base styles */
body {
  font-family: var(--font-sans);
  background-color: var(--color-bdc-background-1);
  color: var(--color-bdc-neutral-1);
}

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

/* Light mode base styles */
body.light {
  background-color: var(--color-bdc-background-1);
  color: var(--color-bdc-neutral-1);
}


:root {
  /* Theme colors - Dark mode by default */
  --_theme-1: rgba(60, 80, 255, 1);
  --_theme-1-text: rgba(99, 115, 255, 1);
  --_theme-1-highlight: rgba(99, 115, 255, 0.6);
  --_theme-2: rgba(218, 65, 13, 1);
  --_theme-2-text: rgba(225, 103, 61, 1);
  --_theme-3: rgba(167, 98, 255, 1);
  --_theme-3-text: rgba(185, 129, 255, 1);

  /* Neutral colors */
  --_neutral-1: rgba(255, 255, 255, 1);
  --_neutral-2: rgba(255, 255, 255, 0.7);
  --_neutral-3: rgba(255, 255, 255, 0.5);
  --_neutral-4: rgba(255, 255, 255, 0.2);
  --_neutral-5: rgba(255, 255, 255, 0.1);
  --_neutral-6: rgba(255, 255, 255, 0.04);

  /* Neutral opaque colors */
  --_neutral-1-opaque: rgba(255, 255, 255, 1);
  --_neutral-2-opaque: rgba(185, 185, 185, 1);
  --_neutral-3-opaque: rgba(138, 138, 138, 1);
  --_neutral-4-opaque: rgba(68, 68, 68, 1);
  --_neutral-5-opaque: rgba(44, 44, 44, 1);
  --_neutral-6-opaque: rgba(30, 30, 30, 1);

  /* Background colors */
  --_background-1: rgba(21, 21, 21, 1);
  --_background-2: rgba(33, 33, 33, 1);
  --_background-3: rgba(21, 21, 21, 0.2);
  --_background-4: rgba(16, 16, 16, 1);

  --_on-anycolor: rgba(255, 255, 255, 1);
  --_on-neutral: rgba(21, 21, 21, 1);

  /* Semantic colors */
  --_semantic-good: rgba(0, 169, 78, 1);
  --_semantic-good-background: rgba(0, 169, 78, 0.1);
  --_semantic-warning: rgba(236, 165, 0, 1);
  --_semantic-warning-background: rgba(236, 165, 0, 0.1);
  --_semantic-warning-background-opaque: #261f0e;
  --_semantic-danger: rgba(243, 58, 69, 1);
  --_semantic-danger-background: rgba(243, 58, 69, 0.1);
  --_semantic-ai: rgba(185, 129, 255, 1);
  --_semantic-ai-background: rgba(185, 129, 255, 0.1);

  /* Chart colors */
  --_chart-member-1: rgb(238, 238, 238);
  --_chart-member-2: rgba(255, 156, 116);
  --_chart-member-3: rgba(140, 152, 255);
  --_chart-member-4: rgba(242, 161, 254);
  --_chart-member-5: rgba(255, 216, 216);
  --_chart-member-6: rgba(230, 245, 170);
  --_chart-member-7: rgba(126, 225, 202);
  --_chart-member-8: rgba(145, 170, 255);
  --_chart-member-9: rgba(210, 202, 255);
  --_chart-member-10: rgba(234, 216, 151);
  --_chart-member-11: rgba(238, 170, 170);
  --_chart-member-12: rgba(146, 209, 255);

  /* Chart labels */
  --_chart-label-resting: rgba(138, 138, 138, 1);
  --_chart-label-highlight: rgba(255, 255, 255, 1);
  --_chart-label-lowlight: rgba(44, 44, 44, 1);

  /* Chart lines */
  --_chart-line-axis: rgba(68, 68, 68, 1);
  --_chart-line-hoverbox: rgba(255, 255, 255, 0.05);

  /* SQL colors */
  --_sql-variable: #ff2173;
  --_sql-variable-background: rgba(255, 33, 115, 0.1);

  /* Other variables */
  --_designers-workbench: #252525;

  /* Mapped variables - Dark mode */
  /* Background colors mapping */
  --color-bdc-background-primary: rgba(21, 21, 21, 0.1);
  --color-bdc-background-1: var(--_background-1);
  --color-bdc-background-1-blurred: rgba(21, 21, 21, 0.6);
  --color-bdc-background-2: var(--_background-2);
  --color-bdc-background-3: var(--_background-3);
  --color-bdc-background-4: var(--_background-4);

  /* Theme colors mapping */
  --color-bdc-theme-1: var(--_theme-1);
  --color-bdc-theme-1-text: var(--_theme-1-text);
  --color-bdc-theme-1-highlight: var(--_theme-1-highlight);
  --color-bdc-theme-2: var(--_theme-2);
  --color-bdc-theme-2-text: var(--_theme-2-text);
  --color-bdc-theme-3: var(--_theme-3);
  --color-bdc-theme-3-text: var(--_theme-3-text);

  /* Neutral colors mapping */
  --color-bdc-neutral-1: var(--_neutral-1);
  --color-bdc-neutral-2: var(--_neutral-2);
  --color-bdc-neutral-3: var(--_neutral-3);
  --color-bdc-neutral-4: var(--_neutral-4);
  --color-bdc-neutral-5: var(--_neutral-5);
  --color-bdc-neutral-6: var(--_neutral-6);

  /* Neutral opaque colors mapping */
  --color-bdc-neutral-1-opaque: var(--_neutral-1-opaque);
  --color-bdc-neutral-2-opaque: var(--_neutral-2-opaque);
  --color-bdc-neutral-3-opaque: var(--_neutral-3-opaque);
  --color-bdc-neutral-4-opaque: var(--_neutral-4-opaque);
  --color-bdc-neutral-5-opaque: var(--_neutral-5-opaque);
  --color-bdc-neutral-6-opaque: var(--_neutral-6-opaque);

  /* On colors mapping */
  --color-bdc-on-anycolor: var(--_on-anycolor);
  --color-bdc-on-neutral: var(--_on-neutral);

  /* Semantic colors mapping */
  --color-bdc-semantic-good: var(--_semantic-good);
  --color-bdc-semantic-good-background: var(--_semantic-good-background);
  --color-bdc-semantic-warning: var(--_semantic-warning);
  --color-bdc-semantic-warning-background: var(--_semantic-warning-background);
  --color-bdc-semantic-warning-background-opaque: var(--_semantic-warning-background-opaque);
  --color-bdc-semantic-danger: var(--_semantic-danger);
  --color-bdc-semantic-danger-background: var(--_semantic-danger-background);
  --color-bdc-semantic-ai: var(--_semantic-ai);
  --color-bdc-semantic-ai-background: var(--_semantic-ai-background);

  /* Chart colors mapping */
  --color-bdc-chart-member-1: var(--_chart-member-1);
  --color-bdc-chart-member-2: var(--_chart-member-2);
  --color-bdc-chart-member-3: var(--_chart-member-3);
  --color-bdc-chart-member-4: var(--_chart-member-4);
  --color-bdc-chart-member-5: var(--_chart-member-5);
  --color-bdc-chart-member-6: var(--_chart-member-6);
  --color-bdc-chart-member-7: var(--_chart-member-7);
  --color-bdc-chart-member-8: var(--_chart-member-8);
  --color-bdc-chart-member-9: var(--_chart-member-9);
  --color-bdc-chart-member-10: var(--_chart-member-10);
  --color-bdc-chart-member-11: var(--_chart-member-11);
  --color-bdc-chart-member-12: var(--_chart-member-12);

  /* Chart labels mapping */
  --color-bdc-chart-label-resting: var(--_chart-label-resting);
  --color-bdc-chart-label-highlight: var(--_chart-label-highlight);
  --color-bdc-chart-label-lowlight: var(--_chart-label-lowlight);

  /* Chart lines mapping */
  --color-bdc-chart-line-axis: var(--_chart-line-axis);
  --color-bdc-chart-line-hoverbox: var(--_chart-line-hoverbox);

  /* SQL colors mapping */
  --color-bdc-sql-variable: var(--_sql-variable);
  --color-bdc-sql-variable-background: var(--_sql-variable-background);

  /* ShadCN UI variables mapping */
  --color-background: var(--color-bdc-background-2);
  --color-foreground: var(--color-bdc-neutral-1);
  --color-card: var(--color-bdc-background-1);
  --color-card-foreground: var(--color-bdc-neutral-1);
  --color-popover: var(--color-bdc-background-1);
  --color-popover-foreground: var(--color-bdc-neutral-1);
  --color-primary: var(--color-bdc-neutral-2);
  --color-primary-foreground: var(--color-bdc-on-neutral);
  --color-secondary: var(--color-bdc-neutral-5);
  --color-secondary-foreground: var(--color-bdc-on-anycolor);
  --color-muted: var(--color-bdc-neutral-4);
  --color-muted-foreground: var(--color-bdc-neutral-2);
  --color-accent: var(--color-bdc-neutral-4);
  --color-accent-foreground: var(--color-bdc-neutral-1);
  --color-destructive: var(--color-bdc-semantic-danger);
  --color-destructive-foreground: var(--color-bdc-on-neutral);
  --color-border: var(--color-bdc-neutral-2);
  --color-input: var(--color-bdc-neutral-2);
}

/* Light mode variables */
.light {
  /* Theme colors - Light mode */
  --_theme-1: rgba(60, 80, 255, 1);
  --_theme-1-text: rgba(99, 115, 255, 1);
  --_theme-1-highlight: rgba(99, 115, 255, 0.6);
  --_theme-2: rgba(218, 65, 13, 1);
  --_theme-2-text: rgba(225, 103, 61, 1);
  --_theme-3: rgba(167, 98, 255, 1);
  --_theme-3-text: rgba(185, 129, 255, 1);

  /* Neutral colors */
  --_neutral-1: rgba(21, 21, 21, 1);
  --_neutral-2: rgba(21, 21, 21, 0.7);
  --_neutral-3: rgba(21, 21, 21, 0.5);
  --_neutral-4: rgba(21, 21, 21, 0.2);
  --_neutral-5: rgba(21, 21, 21, 0.1);
  --_neutral-6: rgba(21, 21, 21, 0.04);

  /* Neutral opaque colors */
  --_neutral-1-opaque: rgba(255, 255, 255, 1);
  --_neutral-2-opaque: rgba(255, 255, 255, 1);
  --_neutral-3-opaque: rgba(255, 255, 255, 1);
  --_neutral-4-opaque: rgba(208, 208, 208, 1);
  --_neutral-5-opaque: rgba(232, 232, 232, 1);
  --_neutral-6-opaque: rgba(242, 242, 242, 1);

  /* Background colors */
  --_background-1: rgba(255, 255, 255, 1);
  --_background-2: rgba(247, 247, 247, 1);
  --_background-3: rgba(255, 255, 255, 0.2);
  --_background-4: rgba(240, 240, 240, 1);

  --_on-anycolor: rgba(255, 255, 255, 1);
  --_on-neutral: rgba(255, 255, 255, 1);

  /* Semantic colors */
  --_semantic-good: rgba(5, 133, 64, 1);
  --_semantic-good-background: rgba(5, 133, 64, 0.2);
  --_semantic-warning: rgba(203, 152, 0, 1);
  --_semantic-warning-background: rgba(203, 152, 0, 0.2);
  --_semantic-warning-background-opaque: #fcf7eb;
  --_semantic-danger: rgba(201, 19, 30, 1);
  --_semantic-danger-background: rgba(201, 19, 30, 0.2);
  --_semantic-ai: rgba(185, 129, 255, 1);
  --_semantic-ai-background: rgba(185, 129, 255, 0.1);

  /* Chart colors */
  --_chart-member-1: rgba(46, 46, 46, 1);
  --_chart-member-2: rgba(196, 65, 9, 1);
  --_chart-member-3: rgba(85, 99, 214, 1);
  --_chart-member-4: rgba(169, 68, 204, 1);
  --_chart-member-5: rgba(245, 130, 130, 1);
  --_chart-member-6: rgba(205, 221, 58, 1);
  --_chart-member-7: rgba(29, 199, 158, 1);
  --_chart-member-8: rgba(85, 99, 214, 1);
  --_chart-member-9: rgba(169, 68, 204, 1);
  --_chart-member-10: rgba(196, 65, 9, 1);
  --_chart-member-11: rgba(245, 130, 130, 1);
  --_chart-member-12: rgba(29, 199, 158, 1);

  /* Chart labels */
  --_chart-label-resting: rgba(138, 138, 138, 1);
  --_chart-label-highlight: rgba(21, 21, 21, 1);
  --_chart-label-lowlight: rgba(208, 208, 208, 1);

  /* Chart lines */
  --_chart-line-axis: rgba(208, 208, 208, 1);
  --_chart-line-hoverbox: rgba(21, 21, 21, 0.05);

  /* SQL colors */
  --_sql-variable: #ff2173;
  --_sql-variable-background: rgba(255, 33, 115, 0.1);

  /* Other variables */
  --_designers-workbench: #f7f7f7;

  /* The mapped variables don't need to be redefined in light mode
     since they reference the base variables which are already being updated */
}


/* Font declarations */
@font-face {
  font-family: InterVariable;
  font-style: normal;
  font-weight: 100 900;
  src: url(/public/fonts/inter/InterVariable.woff2) format('woff2');
}

@font-face {
  font-family: InterVariable;
  font-style: italic;
  font-weight: 100 900;
  src: url(/public/fonts/inter/InterVariable-Italic.woff2) format('woff2');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 900;
  src: url(/public/fonts/jetbrains-mono/JetBrainsMono.ttf) format('truetype');
}

/* Typography variables */
:root {
  /* Font families */
  --font-sans: InterVariable, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  --font-mono: 'JetBrains Mono', SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  
  /* Font sizes */
  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem;     /* 16px */
  --font-size-lg: 1.125rem;   /* 18px */
  --font-size-xl: 1.25rem;    /* 20px */
  --font-size-2xl: 1.5rem;    /* 24px */
  --font-size-3xl: 1.875rem;  /* 30px */
  --font-size-4xl: 2.25rem;   /* 36px */
  
  /* Line heights */
  --line-height-tight: 1.2;
  --line-height-normal: 1.35;
  --line-height-relaxed: 1.5;
  
  /* Font weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  /* Letter spacing */
  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.025em;
}

/* Base typography styles */
html {
  font-family: var(--font-sans);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  font-feature-settings: 'ss01' on, 'ss02' on, 'ss03' on, 'cv01' on, 'cv02' on, 'cv03' on, 'cv04' on;
  font-variant-numeric: slashed-zero;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}

h1 {
  font-size: var(--font-size-3xl);
}

h2 {
  font-size: var(--font-size-2xl);
}

h3 {
  font-size: var(--font-size-xl);
}

h4 {
  font-size: var(--font-size-lg);
}

h5, h6 {
  font-size: var(--font-size-base);
}

p {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

code, pre {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
}

pre {
  position: relative;
  overflow: auto;
  padding: 1rem;
  border-radius: 0.25rem;
}

code {
  padding: 0 0.125rem;
  border-radius: 0.125rem;
}

/* Markdown content styles */
.bdc-markdown {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  cursor: text;
  user-select: text;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}

.bdc-markdown h1,
.bdc-markdown h2,
.bdc-markdown h3,
.bdc-markdown h4,
.bdc-markdown h5 {
  font-weight: var(--font-weight-semibold);
}

.bdc-markdown h1:not(:first-child) {
  margin-top: 1rem;
}

.bdc-markdown h2:not(:first-child),
.bdc-markdown h3:not(:first-child) {
  margin-top: 0.75rem;
}

.bdc-markdown h4:not(:first-child),
.bdc-markdown h5:not(:first-child) {
  margin-top: 0.5rem;
}

.bdc-markdown h1,
.bdc-markdown h2 {
  line-height: var(--line-height-tight);
}

.bdc-markdown img {
  max-width: 100%;
}

.bdc-markdown pre {
  position: relative;
}

.bdc-markdown code {
  padding: 0 0.125rem;
  background-color: var(--color-bdc-neutral-5);
  border: 1px solid var(--color-bdc-neutral-5);
  border-radius: 0.125rem;
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
}


// Theme toggle functionality
document.addEventListener('DOMContentLoaded', function() {
  // Function to apply our custom light/dark mode classes
  const applyThemeClass = () => {
    // Check if dark mode is active
    const isDarkMode = document.documentElement.classList.contains('dark') || 
                       localStorage.getItem('mintlify-mode') === 'dark';
    
    // Apply appropriate class
    if (isDarkMode) {
      document.documentElement.classList.remove('light');
      document.body.classList.remove('light');
    } else {
      document.documentElement.classList.add('light');
      document.body.classList.add('light');
    }
  };

  // Initial application
  setTimeout(applyThemeClass, 100);

  // Watch for theme changes via DOM mutations
  const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
      if (mutation.attributeName === 'class') {
        applyThemeClass();
      }
    });
  });

  observer.observe(document.documentElement, { attributes: true });

  // Also watch for localStorage changes
  window.addEventListener('storage', (event) => {
    if (event.key === 'mintlify-mode') {
      applyThemeClass();
    }
  });

  // Add click event listener to the theme toggle button
  document.addEventListener('click', (event) => {
    const themeToggleButton = event.target.closest('[aria-label="Toggle dark mode"]');
    if (themeToggleButton) {
      setTimeout(applyThemeClass, 100);
    }
  });
});


Connect your Cloud Spanner database to Basedash

Cloud Spanner

Basedash Documentation

The AI-native business intelligence platform

Introduction

Security

Connect your ClickHouse database to Basedash

ClickHouse

MySQL

Connect your PlanetScale database to Basedash

PlanetScale

Connect your PostgreSQL database to Basedash

PostgreSQL

Connect your BigQuery data warehouse to Basedash

BigQuery

Connect your Snowflake data warehouse to Basedash

Snowflake

Welcome to the home of your new documentation

Start building awesome documentation in under 5 minutes

Quickstart

Development

Text, title, and styling in standard markdown

Markdown Syntax

Code Blocks

Add image, video, and other HTML elements

Images and Embeds

Mintlify gives you complete control over the look and feel of your documentation using the mint.json file

Global Settings

The navigation field in mint.json defines the pages that go in the navigation menu

Navigation

Reusable, custom snippets to keep content in sync

Reusable Snippets

Example section for showcasing API endpoints

Returns all plants from the system that the user has access to

Get Plants

Create Plant

Deletes a single plant based on the ID supplied

Databases

Warehouses

Cloud Spanner