:root {
  --satch-accent: rgb(35, 176, 255);
  --satch-bg: #ffffff;
  --satch-paper: #ffffff;
  --satch-ink: #1a1a1a;
  --satch-ink-soft: #2e2e2e;
  --satch-muted: #6b6b6b;
  --satch-faint: #a8a8a8;
  --satch-rule: #e5e5e5;
  --satch-rule-strong: #d0d0d0;
  --satch-chip: #f0f0f0;
  --satch-code-bg: #f4f4f5;
  --satch-accent-soft: color-mix(in oklab, var(--satch-accent) 12%, transparent);
  --satch-accent-faint: color-mix(in oklab, var(--satch-accent) 6%, transparent);

  --color-primary: rgb(35, 176, 255);
  --color-primary-contrast: #ffffff;
  --color-primary-dark-1: #1597df;
  --color-primary-dark-2: #0b84c9;
  --color-primary-dark-3: #0a75b2;
  --color-primary-dark-4: #09679d;
  --color-primary-light-1: #45bcff;
  --color-primary-light-2: #67c8ff;
  --color-primary-light-3: #8bd5ff;
  --color-primary-light-4: #b2e4ff;
  --color-primary-light-5: #d7f2ff;
  --color-primary-light-6: #ebf9ff;
  --color-primary-light-7: #f5fcff;
  --color-primary-alpha-10: rgba(35, 176, 255, .10);
  --color-primary-alpha-20: rgba(35, 176, 255, .20);
  --color-primary-alpha-30: rgba(35, 176, 255, .30);
  --color-primary-alpha-40: rgba(35, 176, 255, .40);
  --color-primary-alpha-50: rgba(35, 176, 255, .50);
  --color-primary-alpha-60: rgba(35, 176, 255, .60);
  --color-primary-alpha-70: rgba(35, 176, 255, .70);
  --color-primary-alpha-80: rgba(35, 176, 255, .80);
  --color-primary-alpha-90: rgba(35, 176, 255, .90);
  --color-primary-hover: var(--color-primary-dark-2);
  --color-primary-active: var(--color-primary-dark-4);

  --color-body: var(--satch-bg);
  --color-box-header: var(--satch-chip);
  --color-box-body: var(--satch-paper);
  --color-box-body-highlight: var(--satch-chip);
  --color-card: var(--satch-paper);
  --color-menu: var(--satch-paper);
  --color-footer: var(--satch-bg);
  --color-header-wrapper: var(--satch-bg);
  --color-header-wrapper-transparent: rgba(255, 255, 255, 0);
  --color-text-dark: #000000;
  --color-text: var(--satch-ink);
  --color-text-light: var(--satch-ink-soft);
  --color-text-light-1: var(--satch-muted);
  --color-text-light-2: var(--satch-muted);
  --color-text-light-3: var(--satch-faint);
  --color-secondary: var(--satch-chip);
  --color-secondary-hover: var(--satch-rule);
  --color-secondary-active: var(--satch-rule-strong);
  --color-border: var(--satch-rule);
  --color-light-border: var(--satch-rule);
  --color-input-text: var(--satch-ink);
  --color-input-background: var(--satch-paper);
  --color-input-toggle-background: var(--satch-paper);
  --color-input-border: var(--satch-rule-strong);
  --color-input-border-hover: var(--satch-accent);
  --color-hover: var(--satch-accent-faint);
  --color-active: var(--satch-accent-soft);
  --color-small-accent: var(--satch-accent-faint);
  --color-accent: var(--satch-accent);
  --color-markup-code-block: var(--satch-code-bg);
  --color-markup-code-inline: var(--satch-code-bg);
  --color-code-bg: var(--satch-paper);
  --border-radius: 6px;
  --border-radius-medium: 6px;
  --border-radius-large: 8px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --satch-bg: #16161a;
    --satch-paper: #16161a;
    --satch-ink: #ece9e1;
    --satch-ink-soft: #d6d3ca;
    --satch-muted: #8d877c;
    --satch-faint: #5b574e;
    --satch-rule: #2a2a30;
    --satch-rule-strong: #3a3a42;
    --satch-chip: #22232a;
    --satch-code-bg: #1d1e23;

    --color-body: var(--satch-bg);
    --color-box-header: var(--satch-chip);
    --color-box-body: var(--satch-paper);
    --color-box-body-highlight: #24252d;
    --color-card: var(--satch-chip);
    --color-menu: var(--satch-chip);
    --color-footer: var(--satch-bg);
    --color-header-wrapper: var(--satch-bg);
    --color-header-wrapper-transparent: rgba(22, 22, 26, 0);
    --color-text-dark: #ffffff;
    --color-text: var(--satch-ink);
    --color-text-light: var(--satch-ink-soft);
    --color-text-light-1: var(--satch-muted);
    --color-text-light-2: var(--satch-muted);
    --color-text-light-3: var(--satch-faint);
    --color-secondary: var(--satch-chip);
    --color-secondary-hover: var(--satch-rule-strong);
    --color-secondary-active: #42434c;
    --color-border: var(--satch-rule);
    --color-light-border: var(--satch-rule);
    --color-input-text: var(--satch-ink);
    --color-input-background: var(--satch-code-bg);
    --color-input-toggle-background: var(--satch-code-bg);
    --color-input-border: var(--satch-rule-strong);
    --color-input-border-hover: var(--satch-accent);
    --color-hover: var(--satch-accent-faint);
    --color-active: var(--satch-accent-soft);
    --color-small-accent: var(--satch-accent-faint);
    --color-markup-code-block: var(--satch-code-bg);
    --color-markup-code-inline: var(--satch-chip);
    --color-code-bg: var(--satch-paper);
  }
}

body {
  background: var(--satch-bg);
  color: var(--satch-ink);
}

a,
.ui.breadcrumb a,
.repository .repo-title a,
.markup a {
  color: inherit;
  text-decoration-color: var(--satch-rule-strong);
  text-underline-offset: 3px;
}

a:hover,
.ui.breadcrumb a:hover,
.repository .repo-title a:hover,
.markup a:hover {
  color: var(--satch-accent);
  text-decoration-color: var(--satch-accent);
}

#navbar {
  background: var(--satch-bg);
  border-bottom: 1px solid var(--satch-rule);
}

#navbar .item {
  color: var(--satch-muted);
}

#navbar .item:hover,
#navbar .active.item {
  color: var(--satch-ink);
  background: var(--satch-accent-faint);
}

#navbar-logo img {
  border-radius: 4px;
  object-fit: contain;
}

.ui.segment,
.ui.table,
.ui.attached.header,
.repository.file.list #repo-files-table {
  border-color: var(--satch-rule);
}

.ui.primary.button,
.ui.primary.buttons .button {
  background: var(--satch-accent);
  color: #ffffff;
}

.ui.primary.button:hover,
.ui.primary.buttons .button:hover {
  background: var(--color-primary-dark-2);
  color: #ffffff;
}

.ui.basic.button,
.ui.basic.buttons .button,
.ui.secondary.button,
.ui.secondary.buttons .button {
  background: transparent;
  color: var(--satch-ink-soft);
  box-shadow: inset 0 0 0 1px var(--satch-rule-strong);
}

.ui.basic.button:hover,
.ui.basic.buttons .button:hover,
.ui.secondary.button:hover,
.ui.secondary.buttons .button:hover {
  background: var(--satch-chip);
  color: var(--satch-accent);
  box-shadow: inset 0 0 0 1px var(--satch-accent);
}

.markup code,
.markup pre,
.file-view code,
.code-view {
  background: var(--satch-code-bg);
}

::selection {
  background: var(--satch-accent-soft);
}