/*
 * UnoPago theme for the Scalar docs pages (`html/*.html`), loaded with
 * `theme: "none"` so these variables are the only palette. The variable names
 * are Scalar's (`@scalar/themes`); the values come from the brand manual.
 */
/*
 * Scalar puts the mode class on <body>, but the viewport scrollbar follows the
 * root element, so it gets the color scheme too.
 */
:root,
.light-mode {
  color-scheme: light;
}

:root:has(body.dark-mode) {
  color-scheme: dark;
}

:root {
  --scalar-font: "Inter", system-ui, sans-serif;
  --scalar-font-code: ui-monospace, "SFMono-Regular", Menlo, monospace;
  --scalar-radius: 8px;
  --scalar-radius-lg: 12px;
  --scalar-radius-xl: 16px;
}

.light-mode,
.light-mode .dark-mode {
  --scalar-background-1: #ffffff;
  --scalar-background-2: #f5f6ff;
  --scalar-background-3: #e8ebff;
  --scalar-background-accent: rgba(67, 85, 255, 0.1);
  --scalar-background-card: #ffffff;

  --scalar-color-1: #222244;
  --scalar-color-2: #55557a;
  --scalar-color-3: #8a8aa8;
  --scalar-color-accent: #4355ff;
  --scalar-link-color: #4355ff;

  --scalar-border-color: #e1e3f0;

  --scalar-color-green: #0f9d8f;
  --scalar-color-red: #e5484d;
  --scalar-color-yellow: #c98a00;
  --scalar-color-blue: #4355ff;
  --scalar-color-orange: #e8730c;
  --scalar-color-purple: #4e31dd;
  --scalar-color-query: #0f9d8f;

  --scalar-button-1: #4355ff;
  --scalar-button-1-hover: #4e31dd;
  --scalar-button-1-color: #ffffff;
}

.dark-mode {
  color-scheme: dark;
  --scalar-background-1: #07070f;
  --scalar-background-2: #10101c;
  --scalar-background-3: #1a1a2b;
  --scalar-background-accent: rgba(67, 85, 255, 0.18);
  --scalar-background-card: #10101c;

  --scalar-color-1: #f0f0ff;
  --scalar-color-2: #b4b4d0;
  --scalar-color-3: #7c7c9c;
  --scalar-color-accent: #7084ff;
  --scalar-link-color: #9ea9ff;

  --scalar-border-color: rgba(67, 85, 255, 0.18);

  --scalar-color-green: #1ad6d6;
  --scalar-color-red: #ff6b6f;
  --scalar-color-yellow: #ffc94d;
  --scalar-color-blue: #7084ff;
  --scalar-color-orange: #ff9a4d;
  --scalar-color-purple: #a895f4;
  --scalar-color-query: #6adfe0;

  --scalar-button-1: #4355ff;
  --scalar-button-1-hover: #7084ff;
  --scalar-button-1-color: #ffffff;
}

.light-mode .t-doc__sidebar,
.dark-mode .t-doc__sidebar {
  --scalar-sidebar-background-1: var(--scalar-background-2);
  --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-3);
  --scalar-sidebar-item-hover-color: var(--scalar-color-1);
  --scalar-sidebar-item-active-background: var(--scalar-background-accent);
  --scalar-sidebar-color-active: var(--scalar-color-accent);
  --scalar-sidebar-search-background: var(--scalar-background-1);
  --scalar-sidebar-search-color: var(--scalar-color-3);
  --scalar-sidebar-search-border-color: var(--scalar-border-color);
}