/* Dark mode colors. */
:root[data-theme='dark'] {
  --sl-color-accent-low: #551251;
  --sl-color-accent: #eadef1;
  --sl-color-accent-high: #cdc3d4;
  /* hyperlinks, selection bg, left-top corner title, etc. */
  --sl-color-white: #e6e1e3;
  /* highlighted text */
  --sl-color-gray-1: #ccc4cf;
  /* text on top bar */
  --sl-color-gray-2: #e6e1e3;
  /* normal text */
  --sl-color-gray-3: #e6e1e3;
  /* TOC on right side */
  --sl-color-gray-4: #554050;
  --sl-color-gray-5: #1c1b1d;
  /* bullet line on side bar */
  --sl-color-gray-6: #1c1b1d;
  /* sidebar, topbar */
  --sl-color-black: #141314;
}

/* Page title */
:root[data-theme='dark'] h1:is(#_top) {
  color: #cdc3d4;
}

/* Headings */
:root[data-theme='dark'] .sl-heading-wrapper h1 {
  color: #cdc3d4;
  font-size: 100%;
}

:root[data-theme='dark'] .sl-heading-wrapper h2 {
  color: #cdc3d4;
  font-size: 100%;
}

:root[data-theme='dark'] .sl-heading-wrapper h3 {
  color: #cdc3d4;
  font-size: 100%;
}

:root[data-theme='dark'] .sl-heading-wrapper h4 {
  color: #cdc3d4;
  font-size: 100%;
}

:root[data-theme='dark'] .sl-heading-wrapper h5 {
  color: #cdc3d4;
  font-size: 100%;
}

:root[data-theme='dark'] .sl-heading-wrapper h6 {
  color: #cdc3d4;
  font-size: 100%;
}

/* Light mode colors. */
:root[data-theme='light'] {
  --sl-color-accent-low: #FFFFFF;
  --sl-color-accent: #635b6a;
  --sl-color-accent-high: #6E5768;
  --sl-color-white: #1c1b1d;
  --sl-color-gray-1: #625c66;
  --sl-color-gray-2: #1c1b1d;
  --sl-color-gray-3: #4E444B;
  --sl-color-gray-4: #ece7e9;
  --sl-color-gray-5: #f2ecee;
  --sl-color-gray-6: #f7f2f4;
  --sl-color-gray-7: #ffffff;
  --sl-color-black: #fdf8fa;
}

/* Page title */
:root[data-theme='light'] h1:is(#_top) {
  color: #1c1b1d;
}

/* Headings */
:root[data-theme='light'] .sl-heading-wrapper h1 {
  color: #1c1b1d;
  font-size: 100%;
}

:root[data-theme='light'] .sl-heading-wrapper h2 {
  color: #1c1b1d;
  font-size: 100%;
}

:root[data-theme='light'] .sl-heading-wrapper h3 {
  color: #1c1b1d;
  font-size: 100%;
}

:root[data-theme='light'] .sl-heading-wrapper h4 {
  color: #1c1b1d;
  font-size: 100%;
}

:root[data-theme='light'] .sl-heading-wrapper h5 {
  color: #1c1b1d;
  font-size: 100%;
}

:root[data-theme='light'] .sl-heading-wrapper h6 {
  color: #1c1b1d;
  font-size: 100%;
}


img {
  border-radius: 7px;
}

code {
  border-radius: 5px;
}

.card {
  background-color: var(--sl-color-gray-6) !important;
  border-radius: 40px;
}

header {
  border-bottom: 1px solid var(--sl-color-gray-5) !important;
}

blockquote {
  border-left: 4px solid var(--sl-color-gray-5) !important;
}

.primary {
  border-radius: 20px;
  transition: border-radius 0.2s ease;
}

.primary:hover {
  background-color: var(--sl-color-accent-high) !important;
}

.primary:active {
  border-radius: 30px;
}
