:root {
  --sol-bg: #fff8f1;
  --sol-surface: #ffffff;
  --sol-surface-low: #fcf3e1;
  --sol-surface-high: #f6eddc;
  --sol-surface-variant: #ebe1d1;
  --sol-outline: #d1c5ac;
  --sol-outline-strong: #807660;
  --sol-ink: #1f1b11;
  --sol-ink-muted: #4e4633;
  --sol-yellow: #f5c518;
  --sol-yellow-dark: #745b00;
  --sol-yellow-deep: #695200;
  --sol-blue: #00687c;

  --md-default-bg-color: var(--sol-bg);
  --md-default-fg-color: var(--sol-ink);
  --md-default-fg-color--light: var(--sol-ink-muted);
  --md-default-fg-color--lighter: #756b58;
  --md-default-fg-color--lightest: #b3a58c;
  --md-primary-fg-color: var(--sol-yellow);
  --md-primary-fg-color--light: #ffe08b;
  --md-primary-fg-color--dark: var(--sol-yellow-dark);
  --md-accent-fg-color: var(--sol-blue);
  --md-typeset-a-color: var(--sol-blue);
}

html,
body,
.md-main,
.md-main__inner {
  background: var(--sol-bg);
}

body,
input,
button,
select,
textarea {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.md-header,
.md-tabs {
  background-color: var(--sol-yellow);
  color: var(--sol-ink);
  box-shadow: none;
  border-bottom: 1px solid var(--sol-yellow-dark);
}

.md-header__title,
.md-header__topic,
.md-tabs__link,
.md-header__button,
.md-search__icon,
.md-search__input,
.md-search__form,
.md-source,
.md-source__repository,
.md-source__facts,
.md-ellipsis {
  color: var(--sol-ink) !important;
}

.md-header__title,
.md-tabs__link {
  font-weight: 700;
  letter-spacing: -0.01em;
}

.md-tabs__link--active,
.md-tabs__link:hover {
  opacity: 1;
  font-weight: 700;
}

.md-search__form {
  background-color: rgba(31, 27, 17, 0.08);
  border-radius: 0;
  box-shadow: none;
}

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

.md-sidebar__inner,
.md-nav,
.md-nav--secondary,
.md-nav__title {
  background: transparent;
}

.md-content__inner {
  background: var(--sol-surface);
  border: 1px solid var(--sol-outline);
  box-shadow: none;
  padding: 1.25rem 1.5rem;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-nav__title,
.md-nav__link {
  color: var(--sol-ink);
}

.md-typeset h1 {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.md-typeset h2 {
  font-size: 24px;
  font-weight: 600;
}

.md-typeset,
.md-typeset p,
.md-typeset li,
.md-typeset td,
.md-typeset th {
  font-size: 14px;
  line-height: 1.45;
}

.md-typeset .mermaid {
  overflow-x: auto;
  padding: 8px 0 12px;
}

.md-typeset .mermaid svg {
  width: 1500px;
  max-width: none;
  min-width: 1500px;
  min-height: 360px;
  height: auto;
}

.md-typeset table:not([class]) {
  background: var(--sol-surface);
  border: 1px solid var(--sol-outline);
  border-radius: 0;
}

.md-typeset table:not([class]) th {
  background: var(--sol-surface-high);
  color: var(--sol-ink);
  font-weight: 700;
  border-bottom: 1px solid var(--sol-outline);
}

.md-typeset table:not([class]) tr:nth-child(even) {
  background: var(--sol-surface-low);
}

.md-typeset table:not([class]) td,
.md-typeset table:not([class]) th {
  border-color: var(--sol-outline);
}

.md-typeset code,
.md-typeset pre > code {
  border-radius: 0;
}

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

.md-top,
.md-top:focus,
.md-top:hover {
  background: var(--sol-yellow-dark);
}

.roadmap-scroll {
  overflow-x: auto;
  padding-bottom: 12px;
}

.roadmap-wide {
  min-width: 1650px;
}

.roadmap-wide .mermaid svg {
  width: 1600px;
  min-width: 1600px;
  min-height: 420px;
}

.roadmap-lanes {
  display: grid;
  grid-template-columns: repeat(5, minmax(280px, 1fr));
  gap: 12px;
}

.roadmap-card {
  border: 1px solid var(--sol-outline);
  padding: 12px;
  background: var(--sol-surface);
}

.roadmap-card h3 {
  margin: 0 0 8px;
  font-size: 18px;
}

.roadmap-card p {
  margin: 0 0 6px;
}

.roadmap-card.done {
  border-left: 6px solid #2e7d32;
}

.roadmap-card.active {
  border-left: 6px solid #ef6c00;
}

.roadmap-card.planned {
  border-left: 6px solid #1565c0;
}

.roadmap-card.backlog {
  border-left: 6px solid #6d4c41;
}
