:root {
  --scalar-header-height: 50px;
  --scalar-sidebar-width: 280px;
  --scalar-container-width: 680px;
  --scalar-toc-width: 280px;

  --scalar-card-icon-width: 40px;
  --scalar-card-icon-height: 40px;
  --scalar-card-icon-diameter: 20px;
  --scalar-card-padding: 16px;
  --scalar-card-inter-element-gap: 4px;
  /* Unit spacing for ToC indentation. */
  --scalar-toc-indent-unit: 16px;

  --scalar-row-gap: 16px;

  --scalar-extra-bold: 700;

  /** Spacing between headings */
  --scalar-heading-spacing: 44px;

  /** Spacing between text nodes */
  --scalar-block-spacing: 12px;

  --scalar-font-size-1: 24px;
}

/* basic theme */
:root {
  --scalar-text-decoration: underline;
  --scalar-text-decoration-hover: underline;
}
.light-mode {
  --scalar-background-1: #ffffff;
  --scalar-background-2: #f3f6fc;
  --scalar-background-3: #e8ecf4;
  --scalar-background-accent: rgba(0, 67, 206, 0.06);

  --scalar-color-1: #0f172a;
  --scalar-color-2: #475569;
  --scalar-color-3: #94a3b8;

  --scalar-color-accent: #0f62fe;
  --scalar-border-color: #e2e8f0;
}
.dark-mode {
  --scalar-background-1: #0b0f1a;
  --scalar-background-2: #131929;
  --scalar-background-3: #1e2740;

  --scalar-color-1: #e2e8f0;
  --scalar-color-2: #94a3b8;
  --scalar-color-3: #64748b;

  --scalar-color-accent: #4d94ff;
  --scalar-background-accent: rgba(77, 148, 255, 0.08);

  --scalar-border-color: #1e293b;
}
/* Document Sidebar */
.light-mode,
.dark-mode {
  --scalar-sidebar-background-1: var(--scalar-background-1);
  --scalar-sidebar-color-1: var(--scalar-color-1);
  --scalar-sidebar-color-2: var(--scalar-color-2);
  --scalar-sidebar-border-color: var(--scalar-border-color);

  --scalar-sidebar-item-hover-background: var(--scalar-background-2);
  --scalar-sidebar-item-hover-color: var(--scalar-sidebar-color-2);

  --scalar-sidebar-item-active-background: var(--scalar-background-accent);
  --scalar-sidebar-color-active: var(--scalar-color-accent);

  --scalar-sidebar-indent-border: var(--scalar-sidebar-border-color);
  --scalar-sidebar-indent-border-hover: var(--scalar-sidebar-border-color);
  --scalar-sidebar-indent-border-active: var(--scalar-color-accent);

  --scalar-sidebar-search-background: color-mix(in srgb, var(--scalar-background-2), var(--scalar-background-1));
  --scalar-sidebar-search-color: var(--scalar-color-3);
  --scalar-sidebar-search-border-color: var(--scalar-border-color);
}
/* advanced */
.light-mode {
  --scalar-color-green: #059669;
  --scalar-color-red: #dc2626;
  --scalar-color-yellow: #d97706;
  --scalar-color-blue: #0f62fe;
  --scalar-color-orange: #ea580c;
  --scalar-color-purple: #7c3aed;

  --scalar-link-color: #0043ce;
  --scalar-link-color-hover: #0f62fe;

  --scalar-button-1: #0f172a;
  --scalar-button-1-hover: #1e293b;
  --scalar-button-1-color: #ffffff;

  --scalar-tooltip-background: color-mix(in srgb, #0f172a, transparent 5%);
  --scalar-tooltip-color: color-mix(in srgb, #fff, transparent 10%);

  --scalar-color-alert: color-mix(in srgb, var(--scalar-color-orange), var(--scalar-color-1) 20%);
  --scalar-color-danger: color-mix(in srgb, var(--scalar-color-red), var(--scalar-color-1) 20%);

  --scalar-background-alert: color-mix(in srgb, var(--scalar-color-orange), var(--scalar-background-1) 95%);
  --scalar-background-danger: color-mix(in srgb, var(--scalar-color-red), var(--scalar-background-1) 95%);
}
.dark-mode {
  --scalar-color-green: #34d399;
  --scalar-color-red: #f87171;
  --scalar-color-yellow: #fbbf24;
  --scalar-color-blue: #4d94ff;
  --scalar-color-orange: #fb923c;
  --scalar-color-purple: #a78bfa;

  --scalar-link-color: #4d94ff;
  --scalar-link-color-hover: #79b0ff;

  --scalar-button-1: #e2e8f0;
  --scalar-button-1-hover: #f1f5f9;
  --scalar-button-1-color: #0b0f1a;

  --scalar-tooltip-background: color-mix(in srgb, var(--scalar-background-1), #fff 10%);
  --scalar-tooltip-color: color-mix(in srgb, #fff, transparent 5%);

  --scalar-color-danger: color-mix(in srgb, var(--scalar-color-red), var(--scalar-background-1) 20%);

  --scalar-background-alert: color-mix(in srgb, var(--scalar-color-orange), var(--scalar-background-1) 95%);
  --scalar-background-danger: color-mix(in srgb, var(--scalar-color-red), var(--scalar-background-1) 95%);
}
@supports (color: color(display-p3 1 1 1)) {
  .light-mode {
    --scalar-color-accent: color(display-p3 0.059 0.384 0.996 / 1);
    --scalar-color-green: color(display-p3 0.020 0.588 0.412 / 1);
    --scalar-color-red: color(display-p3 0.863 0.149 0.149 / 1);
    --scalar-color-yellow: color(display-p3 0.851 0.467 0.024 / 1);
    --scalar-color-blue: color(display-p3 0.059 0.384 0.996 / 1);
    --scalar-color-orange: color(display-p3 0.918 0.345 0.047 / 1);
    --scalar-color-purple: color(display-p3 0.486 0.227 0.929 / 1);
  }
  .dark-mode {
    --scalar-color-accent: color(display-p3 0.302 0.580 1.0 / 1);
    --scalar-color-green: color(display-p3 0.204 0.827 0.600 / 1);
    --scalar-color-red: color(display-p3 0.973 0.443 0.443 / 1);
    --scalar-color-yellow: color(display-p3 0.984 0.749 0.141 / 1);
    --scalar-color-blue: color(display-p3 0.302 0.580 1.0 / 1);
    --scalar-color-orange: color(display-p3 0.984 0.573 0.235 / 1);
    --scalar-color-purple: color(display-p3 0.655 0.545 0.980 / 1);
  }
}

/* =============================================
   HEADER BAR OVERRIDES
   ============================================= */
.light-mode .scalar-app-header,
.light-mode .docs-header,
.light-mode [class*="header"] {
  --scalar-header-background: #ffffff;
  background: #ffffff !important;
  border-bottom: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
}

.dark-mode .scalar-app-header,
.dark-mode .docs-header,
.dark-mode [class*="header"] {
  --scalar-header-background: #0b0f1a;
  background: #0b0f1a !important;
  border-bottom: 1px solid #1e293b !important;
  color: #e2e8f0 !important;
}

.light-mode .scalar-app-header a,
.light-mode .docs-header a,
.light-mode [class*="header"] a {
  color: #0f172a !important;
}

.dark-mode .scalar-app-header a,
.dark-mode .docs-header a,
.dark-mode [class*="header"] a {
  color: #e2e8f0 !important;
}

/* =============================================
   TABLE OVERRIDES
   ============================================= */
.light-mode table thead,
.light-mode table thead tr,
.light-mode table thead th {
  background: #f3f6fc !important;
  color: #0f172a !important;
}

.light-mode table tbody tr:nth-child(even) {
  background: #f3f6fc !important;
}

.light-mode table tbody tr:nth-child(odd) {
  background: #ffffff !important;
}

.dark-mode table thead,
.dark-mode table thead tr,
.dark-mode table thead th {
  background: #131929 !important;
  color: #e2e8f0 !important;
}

.dark-mode table tbody tr:nth-child(even) {
  background: #131929 !important;
}

.dark-mode table tbody tr:nth-child(odd) {
  background: #0b0f1a !important;
}