@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Sans+Condensed:wght@500;600;700&display=swap");

:root {
  --pf-face-bg: #eee8dc;
  --pf-face-bg-2: #e4dccd;
  --pf-face-surface: #f7f1e7;
  --pf-face-surface-2: #ded4c4;
  --pf-face-raised: #fffaf0;
  --pf-face-ink: #1d1914;
  --pf-face-muted: #6b6258;
  --pf-face-line: #1d1914;
  --pf-face-accent: #f95105;
  --pf-face-accent-strong: #c93400;
  --pf-bg: var(--pf-face-bg);
  --pf-bg-2: var(--pf-face-bg-2);
  --pf-panel: var(--pf-face-surface);
  --pf-panel-2: var(--pf-face-surface-2);
  --pf-ink: var(--pf-face-ink);
  --pf-ink-soft: #4d463f;
  --pf-ink-muted: var(--pf-face-muted);
  --pf-border: var(--pf-face-line);
  --pf-orange: var(--pf-face-accent);
  --pf-orange-dark: var(--pf-face-accent-strong);
  --pf-blueblack: #0b1726;

  --color-primary: var(--pf-orange);
  --color-primary-contrast: #ffffff;
  --color-primary-dark-1: #d94504;
  --color-primary-dark-2: #b83b05;
  --color-primary-dark-3: var(--pf-orange-dark);
  --color-primary-dark-4: #7c2d12;
  --color-primary-dark-5: #64230d;
  --color-primary-light-1: #ff6a1f;
  --color-primary-light-2: #ff8244;
  --color-primary-light-3: #ff9a68;
  --color-primary-light-4: #ffb38c;
  --color-primary-light-5: #ffd1b8;
  --color-primary-light-6: #ffe4d4;
  --color-primary-light-7: #fff3ec;
  --color-primary-alpha-10: #f951051a;
  --color-primary-alpha-20: #f9510533;
  --color-primary-alpha-30: #f951054d;
  --color-primary-alpha-40: #f9510566;
  --color-primary-alpha-50: #f9510580;
  --color-primary-alpha-60: #f9510599;
  --color-primary-alpha-70: #f95105b3;
  --color-primary-alpha-80: #f95105cc;
  --color-primary-alpha-90: #f95105e6;
  --color-primary-hover: var(--color-primary-dark-1);
  --color-primary-active: var(--color-primary-dark-2);

  --color-body: var(--pf-bg);
  --color-box-header: var(--pf-panel-2);
  --color-box-body: var(--pf-panel);
  --color-box-body-highlight: #fff8ef;
  --color-card: var(--pf-panel);
  --fancy-card-bg: var(--pf-panel);
  --fancy-card-border: var(--pf-border);
  --color-text-dark: #000000;
  --color-text: var(--pf-ink);
  --color-text-light: var(--pf-ink-soft);
  --color-text-light-1: var(--pf-ink-soft);
  --color-text-light-2: var(--pf-ink-muted);
  --color-text-light-3: var(--pf-ink-muted);
  --color-footer: var(--pf-bg-2);
  --color-timeline: #c8bbaa;
  --color-input-text: var(--pf-ink);
  --color-input-background: #fffaf2;
  --color-input-toggle-background: #fffaf2;
  --color-input-border: var(--pf-border);
  --color-input-border-hover: var(--pf-orange);
  --color-header-wrapper: var(--pf-blueblack);
  --color-header-wrapper-transparent: #0b172600;
  --color-light: #ffffffb8;
  --color-light-border: #17141140;
  --color-hover: #d7cbb9;
  --color-active: #cabba7;
  --color-menu: var(--pf-panel);
  --color-button: #ded4c4;
  --color-code-bg: #fff8ef;
  --color-markup-code-block: #fff8ef;
  --color-markup-code-inline: #e5dac9;
  --color-shadow: #17141166;
  --color-secondary-bg: #e2d6c5;
  --color-expand-button: #d2c4b0;
  --color-placeholder-text: #7b7066;
  --color-nav-bg: var(--pf-blueblack);
  --color-nav-hover-bg: #14253c;
  --color-nav-text: #f6f0e6;
  --color-secondary-nav-bg: var(--pf-bg);
  --color-label-text: var(--pf-ink);
  --color-label-bg: #d8ccba;
  --color-label-hover-bg: #cdbda7;
  --color-label-active-bg: #c2b097;
  --color-label-bg-alt: #c2b097;
  --color-accent: var(--pf-orange);
  --color-small-accent: #ffd1b8;
  --color-highlight-fg: #ffffff;
  --color-highlight-bg: var(--pf-orange);
  --color-overlay-backdrop: #09090bcc;

  accent-color: var(--pf-orange);
  color-scheme: light;
}

html,
body {
  font-family: "IBM Plex Sans", "Avenir Next", "Segoe UI", sans-serif;
  background-color: var(--pf-bg);
  background-image:
    linear-gradient(180deg, #f8f1e6 0%, var(--pf-bg) 34%, #d6c9b8 100%),
    repeating-linear-gradient(90deg, #17141114 0, #17141114 1px, transparent 1px, transparent 24px);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  pointer-events: none;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 256px 256px;
}

h1,
h2,
h3,
h4,
.ui.header,
.repo-title,
.repository .header {
  font-family: "IBM Plex Sans Condensed", "Arial Narrow", "Helvetica Neue Condensed", sans-serif;
  letter-spacing: 0;
}

code,
pre,
.mono,
.sha,
.branch-name,
.commit-summary {
  font-family: "IBM Plex Mono", "SF Mono", "SFMono-Regular", Consolas, monospace;
}

.ui.menu,
.ui.segment,
.ui.card,
.ui.cards > .card,
.ui.table,
.ui.attached.header,
.ui.attached.segment,
.ui.message,
.ui.input > input,
.ui.form input,
.ui.form textarea,
.ui.form select,
.ui.dropdown,
.ui.button,
.ui.label,
.repository.file.list,
.repository .diff-file-box,
.markup,
.CodeMirror {
  border-color: var(--pf-border) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
}

.ui.button,
.ui.label,
.ui.menu .item,
.ui.dropdown .menu > .item {
  font-weight: 600;
}

.ui.primary.button,
.ui.green.button,
.ui.basic.primary.button {
  background: var(--pf-orange) !important;
  color: #ffffff !important;
  border: 1px solid var(--pf-border) !important;
}

.ui.primary.button:hover,
.ui.green.button:hover,
.ui.basic.primary.button:hover {
  background: var(--pf-orange-dark) !important;
  color: #ffffff !important;
}

#navbar,
.page-header {
  border-bottom: 2px solid var(--pf-border) !important;
}

#navbar .item,
#navbar a {
  font-family: "IBM Plex Sans Condensed", "Arial Narrow", "Helvetica Neue Condensed", sans-serif;
  font-weight: 700;
}

#navbar-logo img {
  border: 1px solid #ffffff33;
}

.repository-summary,
.repo-list .item,
.dashboard-repos .repo-owner-name-list .item-name,
.issue.list > .item,
.timeline-item,
.commit-list .commit,
.file-header {
  border-color: var(--pf-border) !important;
}

.ui.secondary.menu .active.item,
.ui.tabular.menu .active.item {
  border-color: var(--pf-border) !important;
  background: var(--pf-panel) !important;
  color: var(--pf-ink) !important;
}

a,
.link,
.ui.breadcrumb a {
  color: #9a3412;
}

a:hover,
.link:hover {
  color: var(--pf-orange);
}

::selection {
  background: var(--pf-orange) !important;
  color: #ffffff !important;
}