/* Root theme */
:root {
  --scalar-text-decoration: underline;
  --scalar-text-decoration-hover: underline;
  --scalar-font: 'Roboto', sans-serif;
  --scalar-font-code: 'Roboto', sans-serif;
}

.light-mode {
  --scalar-background-1: #fff;
  --scalar-background-2: #f1f1f1;
  --scalar-background-3: #d5dee3;
  --scalar-background-accent: #8aaabe;

  --scalar-color-1: #000;
  --scalar-color-2: #333;
  --scalar-color-3: #777;

  --scalar-color-accent: #ff3600;
  --scalar-border-color: #dfdfdf;
}
.dark-mode {
  --scalar-background-1: #000;
  --scalar-background-2: #333;
  --scalar-background-3: #d5dee3;

  --scalar-color-1: #fff;
  --scalar-color-2: #f1f1f1;
  --scalar-color-3: #777;

  --scalar-color-accent: #ff3600;
  --scalar-background-accent: #777;

  --scalar-border-color: #2d2d2d;
}

/* Header */
.light-mode .t-header,
.dark-mode .t-header {
  --scalar-header-background-1: #ff3600;
  --scalar-header-border-color: var(--scalar-border-color);
  --scalar-header-color-1: #fff;
  --scalar-header-color-2: #f1f1f1;
  --scalar-header-background-toggle: #d8d8d8;
  --scalar-header-call-to-action-color: var(--scalar-button-1);
}

/* 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-2);
  --scalar-sidebar-color-active: var(--scalar-sidebar-color-1);

  --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-sidebar-border-color);

  --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 Styles */
.light-mode {
  --scalar-color-green: #069061;
  --scalar-color-red: #ef0006;
  --scalar-color-yellow: #edbe20;
  --scalar-color-blue: #0082d0;
  --scalar-color-orange: #ff5800;
  --scalar-color-purple: #5203d1;

  --scalar-link-color: var(--scalar-color-1);
  --scalar-link-color-hover: var(--scalar-link-color);

  --scalar-button-1: rgba(0, 0, 0, 1);
  --scalar-button-1-hover: rgba(0, 0, 0, 0.8);
  --scalar-button-1-color: rgba(255, 255, 255, 0.9);

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

  --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: #00b648;
  --scalar-color-red: #dc1b19;
  --scalar-color-yellow: #ffc90d;
  --scalar-color-blue: #4eb3ec;
  --scalar-color-orange: #ff8d4d;
  --scalar-color-purple: #b191f9;

  --scalar-link-color: var(--scalar-color-1);
  --scalar-link-color-hover: var(--scalar-link-color);

  --scalar-button-1: rgba(255, 255, 255, 1);
  --scalar-button-1-hover: rgba(255, 255, 255, 0.9);
  --scalar-button-1-color: black;

  --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 0.6 1 / 1);
    --scalar-color-green: color(display-p3 0.023529 0.564706 0.380392 / 1);
    --scalar-color-red: color(display-p3 0.937255 0 0.023529 / 1);
    --scalar-color-yellow: color(display-p3 0.929412 0.745098 0.12549 / 1);
    --scalar-color-blue: color(display-p3 0 0.509804 0.815686 / 1);
    --scalar-color-orange: color(display-p3 1 0.4 0.02);
    --scalar-color-purple: color(display-p3 0.321569 0.011765 0.819608 / 1);
  }
  .dark-mode {
    --scalar-color-accent: color(display-p3 0.07 0.67 1);
    --scalar-color-green: color(display-p3 0 0.713725 0.282353 / 1);
    --scalar-color-red: color(display-p3 0.862745 0.105882 0.098039 / 1);
    --scalar-color-yellow: color(display-p3 1 0.788235 0.05098 / 1);
    --scalar-color-blue: color(display-p3 0.305882 0.701961 0.92549 / 1);
    --scalar-color-orange: color(display-p3 1 0.552941 0.301961 / 1);
    --scalar-color-purple: color(display-p3 0.694118 0.568627 0.976471 / 1);
  }
}