/*----------------------------------------*/
/* LIGHT MODE */
/*----------------------------------------*/

.light-mode {
  /* backgrounds */
  --scalar-background-1: oklch(98.5% 0 248);
  /* gray-50 */
  --scalar-background-2: oklch(96.7% 0 265);
  /* gray-100 */
  --scalar-background-3: oklch(92.8% 0.01 265);
  /* gray-200 */

  /* highlighted background */
  --scalar-background-accent: color-mix(in oklab, oklch(89.9% 0.05 339), transparent 90%);

  /* typography */
  --scalar-color-1: oklch(21% 0.03 265);
  /* gray-900 */
  --scalar-color-2: oklch(44.6% 0.03 257);
  /* gray-600 */
  --scalar-color-3: oklch(55.1% 0.02 264);
  /* gray-500 */

  /* accent = primary scale */
  --scalar-color-accent: oklch(56.7% 0.22 347);
  /* primary-500 */

  /* borders */
  --scalar-border-color: oklch(92.8% 0.01 265);
  /* gray-200 */
}


/*----------------------------------------*/
/* DARK MODE */
/*----------------------------------------*/

.dark-mode {
  --scalar-background-1: oklch(21% 0.03 265);
  /* gray-900 */
  --scalar-background-2: oklch(27.8% 0.03 257);
  /* gray-800 */
  --scalar-background-3: oklch(37.3% 0.03 260);
  /* gray-700 */

  --scalar-background-accent: color-mix(in oklab,
      oklch(70.9% 0.15 342),
      /* primary-300 */
      transparent 85%);

  --scalar-color-1: oklch(98.5% 0 248);
  /* gray-50 */
  --scalar-color-2: oklch(87.2% 0.01 258);
  /* gray-300 */
  --scalar-color-3: oklch(71.4% 0.02 261);
  /* gray-400 */

  --scalar-color-accent: oklch(70.9% 0.15 342);
  /* primary-300 */

  --scalar-border-color: oklch(37.3% 0.03 260);
  /* gray-700 */
}

/*----------------------------------------*/
/* Light semantic */
/*----------------------------------------*/

.light-mode {
  --scalar-color-green: oklch(69.6% 0.15 162);
  /* green-500 */
  --scalar-color-red: oklch(63.7% 0.21 25.3);
  /* red-500 */
  --scalar-color-yellow: oklch(83.7% 0.16 84.4);
  /* orange-400 */
  --scalar-color-blue: oklch(62.3% 0.19 260);
  /* blue-500 */
  --scalar-color-orange: oklch(66.6% 0.16 58.3);
  /* orange-600 */
  --scalar-color-purple: oklch(63.4% 0.12 289);
  /* secondary-500 */

  --scalar-link-color: oklch(56.7% 0.22 347);
  --scalar-link-color-hover: oklch(46% 0.18 347);

  --scalar-button-1: oklch(46% 0.18 347);
  /* primary-600 */
  --scalar-button-1-hover: oklch(39.3% 0.15 347);
  /* primary-700 */
  --scalar-button-1-color: oklch(98.5% 0 248);
  /* white-ish */

  --scalar-tooltip-background: color-mix(in oklab, oklch(21% 0.03 265), transparent 12%);
  --scalar-tooltip-color: oklch(98.5% 0 248);

  --scalar-color-danger: oklch(57.7% 0.22 27.3);
  /* red-600 */
  --scalar-background-danger: oklch(93.6% 0.03 17.7);

  --scalar-color-alert: oklch(66.6% 0.16 58.3);
  --scalar-background-alert: oklch(96.2% 0.06 95.6);
}

/*----------------------------------------*/
/* Dark semantic */
/*----------------------------------------*/

.dark-mode {
  --scalar-color-green: oklch(77.3% 0.15 163);
  /* green-400 */
  --scalar-color-red: oklch(80.8% 0.1 19.6);
  /* red-300 */
  --scalar-color-yellow: oklch(87.9% 0.15 91.6);
  /* orange-300 */
  --scalar-color-blue: oklch(71.4% 0.14 255);
  /* blue-400 */
  --scalar-color-orange: oklch(76.9% 0.16 70.1);
  /* orange-500 */
  --scalar-color-purple: oklch(70.9% 0.09 291);
  /* secondary-400 */

  --scalar-link-color: oklch(70.9% 0.15 342);
  --scalar-link-color-hover: oklch(80% 0.1 340);

  --scalar-button-1: oklch(70.9% 0.15 342);
  /* primary-300 */
  --scalar-button-1-hover: oklch(80% 0.1 340);
  /* primary-200 */
  --scalar-button-1-color: black;

  --scalar-tooltip-background: oklch(27.8% 0.03 257);
  --scalar-tooltip-color: oklch(98.5% 0 248);

  --scalar-color-danger: oklch(80.8% 0.1 19.6);
  --scalar-background-danger: oklch(39.6% 0.13 25.7);

  --scalar-color-alert: oklch(76.9% 0.16 70.1);
  --scalar-background-alert: oklch(55.5% 0.15 49);
}

/*----------------------------------------*/
/* Component-specific mappings */
/*----------------------------------------*/

.light-mode .t-doc__sidebar,
.dark-mode .t-doc__sidebar {
  --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-color-1);

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

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

.light-mode .t-doc__header,
.dark-mode .t-doc__header {
  --scalar-header-background-1: var(--scalar-background-1);
  --scalar-header-border-color: var(--scalar-border-color);
  --scalar-header-color-1: var(--scalar-color-1);
  --scalar-header-color-2: var(--scalar-color-2);
  --scalar-header-background-toggle: var(--scalar-color-3);
  --scalar-header-call-to-action-color: var(--scalar-color-accent);
}

/*----------------------------------------*/
/* Customizations */
/*----------------------------------------*/
:root {
  --spacing: 0.25rem;
}

/* Add masrgin top to paragraphs following a block */
.t-editor__paragraph + .t-editor__paragraph,
.t-editor__page-link + .t-editor__paragraph,
.t-editor__list + .t-editor__paragraph,
.t-editor__code-container + .t-editor__paragraph,
.t-editor__table + .t-editor__paragraph {
  margin-top: calc(4 * var(--spacing));
}

.callout.t-editor__callout {
  margin: calc(4 * var(--spacing)) 0;
}

.t-editor__tabs.custom-tabs-container {
  margin-top: calc(8 * var(--spacing));
}

.custom-tabs-container .custom-container-content + * {
  margin-top: calc(4 * var(--spacing));
}