/* Import Adobe Fonts Aileron */
@import url("https://use.typekit.net/kux5pjb.css");

/* basic theme */
.light-mode {
  --scalar-background-1: #fff;
  --scalar-background-2: #f6f6f6;
  --scalar-background-3: #e7e7e7;
  --scalar-background-accent: #dc1b19;

  --scalar-color-1: #2a2f45;
  --scalar-color-2: #757575;
  --scalar-color-3: #8e8e8e;

  --scalar-color-accent: #dc1b19;
  --scalar-border-color: #dfdfdf;

  --scalar-font-family: "Aileron", Helvetica, Arial, sans-serif;
  --scalar-font-size-base: 16px;
  --scalar-font-size-heading: 1.5rem; /* 24px */
  --scalar-font-size-small: 0.875rem; /* 14px */
  --scalar-line-height-base: 1.6;
  --scalar-line-height-heading: 1.3;
}
.dark-mode {
  --scalar-background-1: #0f0f0f;
  --scalar-background-2: #1a1a1a;
  --scalar-background-3: #272727;

  --scalar-color-1: #e7e7e7;
  --scalar-color-2: #a4a4a4;
  --scalar-color-3: #797979;

  --scalar-color-accent: #dc1b19;
  --scalar-background-accent: #dc1b19;

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

  --scalar-font-family: "Aileron", Helvetica, Arial, sans-serif;
  --scalar-font-size-base: 16px;
  --scalar-font-size-heading: 1.5rem;
  --scalar-font-size-small: 0.875rem;
  --scalar-line-height-base: 1.6;
  --scalar-line-height-heading: 1.3;
}

/* Apply font and typography globally */
body {
  font-family: var(--scalar-font-family);
  font-size: var(--scalar-font-size-base);
  line-height: var(--scalar-line-height-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--scalar-font-family);
  font-weight: 600;
  line-height: var(--scalar-line-height-heading);
}

small, .small-text {
  font-size: var(--scalar-font-size-small);
}

/* Document Sidebar */
.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: currentColor;

  --scalar-sidebar-item-active-background: var(--scalar-background-2);
  --scalar-sidebar-color-active: var(--scalar-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: transparent;
  --scalar-sidebar-search-color: var(--scalar-color-3);
  --scalar-sidebar-search-border-color: var(--scalar-border-color);
}
/* advanced */
.light-mode {
  --scalar-color-green: #069061;
  --scalar-color-red: rgb(197, 1, 1);
  --scalar-color-yellow: #edbe20;
  --scalar-color-blue: #0082d0;
  --scalar-color-orange: #fb892c;
  --scalar-color-purple: #5203d1;

  --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-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: rgb(197, 1, 1);
  --scalar-color-yellow: #ffc90d;
  --scalar-color-blue: #4eb3ec;
  --scalar-color-orange: #ff8d4d;
  --scalar-color-purple: #b191f9;

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

  --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: rgb(197, 1, 1);
    --scalar-color-green: color(display-p3 0.023529 0.564706 0.380392 / 1);
    --scalar-color-red: rgb(197, 1, 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 0.984314 0.537255 0.172549 / 1);
    --scalar-color-purple: color(display-p3 0.321569 0.011765 0.819608 / 1);
  }
  .dark-mode {
    --scalar-color-accent: rgb(197, 1, 1);
    --scalar-color-green: color(display-p3 0 0.713725 0.282353 / 1);
    --scalar-color-red: rgb(197, 1, 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);
  }
}

/* document header */
.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);
}

/* link hover effect */
a:hover {
  color: rgb(197, 1, 1);
}

/* Hide both by default */
.footer-logo-light,
.footer-logo-dark {
  display: none !important;
}

/* Light mode active */
body.scalar-app.light-mode .footer-logo-light {
  display: block !important;
}
body.scalar-app.light-mode .footer-logo-dark {
  display: none !important;
}

/* Dark mode active */
body.scalar-app.dark-mode .footer-logo-light {
  display: none !important;
}
body.scalar-app.dark-mode .footer-logo-dark {
  display: block !important;
}