@import url("./ruka-palette.css");

:root {
  --ruka-doc-font: "IBM Plex Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --ruka-code-font: "Iosevka", "Fira Code", monospace;

  --bg: var(--ruka-bg);
  --fg: var(--ruka-fg);
  --sidebar-bg: var(--ruka-bg-elevated);
  --sidebar-fg: var(--ruka-fg);
  --sidebar-non-existant: var(--ruka-muted);
  --sidebar-active: var(--ruka-link);
  --sidebar-spacer: var(--ruka-border);
  --scrollbar: var(--ruka-border);
  --icons: var(--ruka-muted);
  --icons-hover: var(--ruka-fg);
  --links: var(--ruka-link);
  --inline-code-color: #7dd3fc;
  --theme-popup-bg: var(--ruka-bg-elevated);
  --theme-popup-border: var(--ruka-border);
  --theme-hover: rgba(34, 211, 238, 0.14);
  --quote-bg: var(--ruka-surface);
  --quote-border: var(--ruka-link);
  --table-border-color: var(--ruka-border);
  --table-header-bg: var(--ruka-surface);
  --table-alternate-bg: #0d1528;
  --searchbar-border-color: var(--ruka-border);
  --searchbar-bg: var(--ruka-surface);
  --searchbar-fg: var(--ruka-fg);
  --searchbar-shadow-color: transparent;
  --searchresults-header-fg: var(--ruka-muted);
  --searchresults-border-color: var(--ruka-border);
  --searchresults-li-bg: var(--ruka-bg-elevated);
  --search-mark-bg: #164e63;

  --main-background-color: var(--ruka-bg);
  --main-color: var(--ruka-fg);
  --settings-input-color: var(--ruka-fg);
  --settings-input-border-color: var(--ruka-border);
  --settings-input-bg: var(--ruka-surface);
  --theme-picker-bg: var(--ruka-bg-elevated);
  --theme-picker-border: var(--ruka-border);
  --theme-picker-color: var(--ruka-fg);
  --storage-menu-bg: var(--ruka-bg-elevated);
  --storage-menu-border-color: var(--ruka-border);
  --code-block-background: var(--ruka-code-bg);
  --code-attribute-color: #67e8f9;
  --toc-border-color: var(--ruka-border);
  --toc-link-color: var(--ruka-muted);
}

body {
  font-family: var(--ruka-doc-font);
  font-size: clamp(16px, 15px + 0.2vw, 18px);
  line-height: 1.65;
  background: linear-gradient(180deg, #0b1220, #101a2f) fixed;
  color: var(--ruka-fg);
}

body.rustdoc {
  font-family: var(--ruka-doc-font);
}

a {
  color: var(--ruka-link);
}

a:visited {
  color: var(--ruka-link-visited);
}

code,
pre,
.content pre code,
pre code {
  font-family: var(--ruka-code-font);
  background: var(--ruka-code-bg);
}

body.rustdoc nav.sidebar,
body.rustdoc .src-sidebar-title,
body.rustdoc #src-sidebar {
  background: var(--ruka-bg-elevated) !important;
}

body.rustdoc nav.sidebar,
body.rustdoc .src-sidebar-title {
  border-right: 1px solid var(--ruka-border);
}

body.rustdoc nav.sidebar,
body.rustdoc nav.sidebar a,
body.rustdoc nav.sidebar .location,
body.rustdoc nav.sidebar h2 a,
body.rustdoc nav.sidebar h3 a,
body.rustdoc #src-sidebar a,
body.rustdoc details.dir-entry > summary {
  color: var(--ruka-fg) !important;
}

body.rustdoc nav.sidebar a:hover,
body.rustdoc nav.sidebar a:focus-visible,
body.rustdoc #src-sidebar a:hover,
body.rustdoc #src-sidebar a:focus-visible,
body.rustdoc details.dir-entry > summary:hover,
body.rustdoc details.dir-entry > summary:focus-visible {
  background: rgba(34, 211, 238, 0.12) !important;
  color: #d8fbff !important;
}

body.rustdoc nav.sidebar .current,
body.rustdoc nav.sidebar .current a,
body.rustdoc nav.sidebar a.current,
body.rustdoc #src-sidebar a.selected,
body.rustdoc details.dir-entry > summary.selected {
  color: var(--ruka-link) !important;
  background: rgba(34, 211, 238, 0.16) !important;
}