:root {
  --strom-bg: #f4efe7;
  --strom-bg-alt: #efe7da;
  --strom-panel: #fffaf2;
  --strom-panel-strong: rgba(255, 250, 242, 0.96);
  --strom-ink: #1f2933;
  --strom-muted: #5f6c7b;
  --strom-line: #d7c8b3;
  --strom-accent: #0f766e;
  --strom-accent-strong: #115e59;
  --strom-accent-soft: rgba(15, 118, 110, 0.12);
  --strom-shadow: 0 18px 40px rgba(31, 41, 51, 0.08);

  --md-default-bg-color: var(--strom-bg);
  --md-default-fg-color: var(--strom-ink);
  --md-default-fg-color--light: var(--strom-muted);
  --md-default-fg-color--lighter: color-mix(in srgb, var(--strom-muted) 72%, white);
  --md-default-fg-color--lightest: color-mix(in srgb, var(--strom-muted) 38%, white);
  --md-primary-fg-color: var(--strom-accent);
  --md-primary-fg-color--light: var(--strom-accent);
  --md-primary-fg-color--dark: var(--strom-accent-strong);
  --md-accent-fg-color: var(--strom-accent);
  --md-accent-fg-color--transparent: var(--strom-accent-soft);
  --md-typeset-a-color: var(--strom-accent);
  --md-code-bg-color: #f1eadf;
  --md-code-fg-color: var(--strom-ink);
  --md-footer-bg-color: #e8dcc8;
  --md-footer-bg-color--dark: #ddcfb8;
  --md-footer-fg-color: var(--strom-ink);
  --md-footer-fg-color--light: var(--strom-muted);
  --md-footer-fg-color--lighter: color-mix(in srgb, var(--strom-muted) 45%, white);
}

[data-md-color-scheme="slate"] {
  --strom-bg: #1f2529;
  --strom-bg-alt: #273137;
  --strom-panel: #2a3339;
  --strom-panel-strong: rgba(42, 51, 57, 0.96);
  --strom-ink: #e8ece6;
  --strom-muted: #b8c1bb;
  --strom-line: #435159;
  --strom-accent: #55b4a6;
  --strom-accent-strong: #7ad1c2;
  --strom-accent-soft: rgba(85, 180, 166, 0.18);
  --strom-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);

  --md-default-bg-color: var(--strom-bg);
  --md-default-bg-color--light: #273137;
  --md-default-bg-color--lighter: #313d44;
  --md-default-bg-color--lightest: #38454d;
  --md-default-fg-color: var(--strom-ink);
  --md-default-fg-color--light: var(--strom-muted);
  --md-default-fg-color--lighter: color-mix(in srgb, var(--strom-muted) 75%, black);
  --md-default-fg-color--lightest: color-mix(in srgb, var(--strom-muted) 45%, black);
  --md-primary-fg-color: #20292e;
  --md-primary-fg-color--light: #2a3339;
  --md-primary-fg-color--dark: #182024;
  --md-accent-fg-color: var(--strom-accent);
  --md-accent-fg-color--transparent: rgba(85, 180, 166, 0.12);
  --md-typeset-a-color: #7ad1c2;
  --md-code-bg-color: #20292e;
  --md-code-fg-color: #edf3ed;
  --md-footer-bg-color: #1b2226;
  --md-footer-bg-color--dark: #151b1e;
  --md-footer-fg-color: var(--strom-ink);
  --md-footer-fg-color--light: var(--strom-muted);
  --md-footer-fg-color--lighter: color-mix(in srgb, var(--strom-muted) 55%, black);
}

body {
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.5), transparent 28%),
    linear-gradient(180deg, var(--strom-bg-alt) 0%, var(--strom-bg) 55%, #efe9df 100%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
}

[data-md-color-scheme="slate"] body,
body[data-md-color-scheme="slate"] {
  background:
    radial-gradient(circle at top left, rgba(122, 209, 194, 0.08), transparent 30%),
    linear-gradient(180deg, #243036 0%, var(--strom-bg) 55%, #1b2125 100%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
}

.md-header {
  background: rgba(255, 250, 242, 0.92);
  color: var(--strom-ink);
  border-bottom: 1px solid var(--strom-line);
  box-shadow: 0 8px 24px rgba(31, 41, 51, 0.06);
  backdrop-filter: blur(10px);
}

[data-md-color-scheme="slate"] .md-header {
  background: rgba(32, 41, 46, 0.9);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
}

.md-header__button,
.md-header__topic,
.md-tabs__link,
.md-nav__title,
.md-nav__link,
.md-search__icon,
.md-search__input,
.md-search__output,
.md-search-result__meta {
  color: var(--strom-ink);
}

.md-tabs {
  background: rgba(255, 250, 242, 0.88);
  border-bottom: 1px solid var(--strom-line);
}

[data-md-color-scheme="slate"] .md-tabs {
  background: rgba(32, 41, 46, 0.84);
}

.md-main__inner {
  margin-top: 1rem;
}

.md-sidebar__scrollwrap,
.md-content__inner,
.md-search__form,
.md-search-result,
.md-typeset table:not([class]) {
  background: var(--strom-panel-strong);
  border: 1px solid var(--strom-line);
  border-radius: 18px;
  box-shadow: var(--strom-shadow);
}

.md-content__inner {
  padding: 1.6rem;
}

.md-sidebar__scrollwrap {
  padding: 0.8rem 0.6rem;
}

.md-nav--primary .md-nav__title,
.md-nav--secondary .md-nav__title {
  background: transparent;
  box-shadow: none;
}

.md-nav__link--active,
.md-tabs__link--active,
.md-typeset a:hover,
.md-nav__link:hover {
  color: var(--strom-accent-strong);
}

.md-search__form {
  background: var(--strom-panel);
}

[data-md-color-scheme="slate"] .md-search__form {
  background: rgba(42, 51, 57, 0.98);
}

.md-search__input::placeholder {
  color: var(--strom-muted);
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  color: var(--strom-ink);
  letter-spacing: -0.01em;
}

.md-typeset .admonition,
.md-typeset details {
  background: var(--strom-panel);
  border: 1px solid var(--strom-line);
  border-radius: 16px;
  box-shadow: var(--strom-shadow);
}

.md-typeset .admonition-title,
.md-typeset summary {
  background: var(--strom-accent-soft);
  color: var(--strom-ink);
}

[data-md-color-scheme="slate"] .md-nav__link--active,
[data-md-color-scheme="slate"] .md-tabs__link--active,
[data-md-color-scheme="slate"] .md-typeset a:hover,
[data-md-color-scheme="slate"] .md-nav__link:hover {
  color: var(--strom-accent-strong);
}

.md-typeset code {
  border-radius: 0.4rem;
}

.md-typeset pre > code {
  border-radius: 14px;
}

.md-button,
.md-typeset .md-button {
  border-radius: 999px;
}

.md-top,
.md-typeset .tabbed-labels > label,
.md-typeset .task-list-indicator:before {
  color: var(--strom-accent);
}

.md-footer-meta,
.md-footer {
  border-top: 1px solid var(--strom-line);
}

@media screen and (min-width: 60em) {
  .md-sidebar--primary,
  .md-sidebar--secondary {
    margin-top: -1rem;
  }
}

@media screen and (max-width: 76.2344em) {
  .md-sidebar__scrollwrap,
  .md-content__inner {
    border-radius: 16px;
  }
}
