/* Bluesonde Scalar theme */
:root {
  --scalar-text-decoration: underline;
  --scalar-text-decoration-hover: underline;
}

/* Light mode */
.light-mode {
  --scalar-background-1: #f5f5f7;
  /* surface.0 */
  --scalar-background-2: #f5f9fb;
  /* surface.50 */
  --scalar-background-3: #d0e4ea;
  /* surface.100 */
  --scalar-background-accent: color-mix(in srgb, #f77f3b 12%, transparent);

  --scalar-color-1: #173842;
  /* surface.900 */
  --scalar-color-2: #296374;
  /* surface.700 */
  --scalar-color-3: #5fa3b7;
  /* surface.400 */

  --scalar-color-accent: #f77f3b;
  /* primary.500 */
  --scalar-border-color: #aaced9;
  /* surface.200 */

  --scalar-color-green: #22c55e;
  --scalar-color-red: #ef4444;
  --scalar-color-yellow: #f77f3b;
  /* no true yellow in theme; using brand orange */
  --scalar-color-blue: #3a8da6;
  /* surface.500 */
  --scalar-color-orange: #f77f3b;
  /* primary.500 */
  --scalar-color-purple: #884620;
  /* warm accent fallback */

  --scalar-link-color: var(--scalar-color-accent);
  --scalar-link-color-hover: #d26c32;
  /* primary.600 */

  --scalar-button-1: #f77f3b;
  --scalar-button-1-hover: #d26c32;
  --scalar-button-1-color: #fff9f5;
  /* primary.50 */

  --scalar-tooltip-background: #173842;
  --scalar-tooltip-color: #f5f9fb;

  --scalar-color-alert: #d26c32;
  --scalar-color-danger: #dc2626;

  --scalar-background-alert: color-mix(in srgb, #f77f3b 10%, #f5f5f7);
  --scalar-background-danger: color-mix(in srgb, #ef4444 10%, #f5f5f7);
}

/* Dark mode */
.dark-mode {
  --scalar-background-1: #0f232a;
  /* surface.950 */
  --scalar-background-2: #173842;
  /* surface.900 */
  --scalar-background-3: #204e5b;
  /* surface.800 */
  --scalar-background-accent: color-mix(in srgb, #f77f3b 18%, transparent);

  --scalar-color-1: #f5f9fb;
  /* surface.50 */
  --scalar-color-2: #d0e4ea;
  /* surface.100 */
  --scalar-color-3: #aaced9;
  /* surface.200 */

  --scalar-color-accent: #f77f3b;
  /* primary.500 */
  --scalar-border-color: #296374;
  /* surface.700 */

  --scalar-color-green: #22c55e;
  --scalar-color-red: #ef4444;
  --scalar-color-yellow: #f99760;
  /* warm highlight */
  --scalar-color-blue: #5fa3b7;
  /* surface.400 */
  --scalar-color-orange: #f77f3b;
  /* primary.500 */
  --scalar-color-purple: #fab085;
  /* soft warm accent */

  --scalar-link-color: var(--scalar-color-accent);
  --scalar-link-color-hover: #f99760;
  /* primary.400 */

  --scalar-button-1: #f77f3b;
  --scalar-button-1-hover: #f99760;
  --scalar-button-1-color: #0f232a;

  --scalar-tooltip-background: #204e5b;
  --scalar-tooltip-color: #f5f9fb;

  --scalar-color-alert: #f99760;
  --scalar-color-danger: #f87171;

  --scalar-background-alert: color-mix(in srgb, #f77f3b 14%, #0f232a);
  --scalar-background-danger: color-mix(in srgb, #ef4444 14%, #0f232a);
}

/* 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-color-1);

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

  --scalar-sidebar-indent-border: var(--scalar-sidebar-border-color);
  --scalar-sidebar-indent-border-hover: var(--scalar-color-accent);
  --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) 65%);
  --scalar-sidebar-search-color: var(--scalar-color-2);
  --scalar-sidebar-search-border-color: var(--scalar-border-color);
}