@import url("./theme-forgejo-auto.css");

@font-face {
  font-family: "Comic Neue";
  src: url("https://quorate.dev/fonts/neue.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Comic Neue";
  src: url("https://quorate.dev/fonts/neue-bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Comic Mono";
  src: url("https://quorate.dev/fonts/comic.ttf") format("truetype");
  font-display: swap;
}

:root {
  --paper: #eeeeee;
  --surface: #f4f4f4;
  --ink: #292828;
  --muted: #57514a;
  --rule: #8d8d8d;
  --band: #e2e2e2;
  --hover: #d6d6d6;
  --link: #7b392c;
  --good: #3f672c;
  --mixed: #7a521c;
  --down: #a8352b;
  --fonts-proportional: "Comic Neue", sans-serif;
  --fonts-monospace: "Comic Mono", monospace;
  --border-radius: 0;
  --border-radius-medium: 0;
  --border-radius-circle: 0;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #181818;
    --surface: #1a1a1a;
    --ink: #f3eee5;
    --muted: #c0b9b0;
    --rule: #626262;
    --band: #202020;
    --hover: #282828;
    --link: #efb99b;
    --good: #afd49a;
    --mixed: #e5c080;
    --down: #f2ab99;
  }
}

:root {
  --color-primary: var(--link);
  --color-primary-contrast: var(--paper);
  --color-primary-dark-1: var(--link);
  --color-primary-dark-2: var(--ink);
  --color-primary-dark-3: var(--ink);
  --color-primary-dark-4: var(--ink);
  --color-primary-dark-5: var(--ink);
  --color-primary-dark-6: var(--ink);
  --color-primary-dark-7: var(--ink);
  --color-primary-light-1: var(--link);
  --color-primary-light-2: var(--link);
  --color-primary-light-3: var(--muted);
  --color-primary-light-4: var(--muted);
  --color-primary-light-5: var(--band);
  --color-primary-light-6: var(--band);
  --color-primary-light-7: var(--paper);
  --color-primary-hover: var(--ink);
  --color-primary-active: var(--ink);
  --color-primary-alpha-20: color-mix(in srgb, var(--rule) 20%, transparent);
  --color-primary-alpha-40: color-mix(in srgb, var(--rule) 40%, transparent);
  --color-primary-alpha-50: color-mix(in srgb, var(--rule) 50%, transparent);
  --color-secondary: var(--band);
  --color-secondary-hover: var(--band);
  --color-secondary-active: var(--band);
  --color-secondary-alpha-30: color-mix(in srgb, var(--rule) 30%, transparent);
  --color-body: var(--paper);
  --color-box-header: var(--band);
  --color-box-body: var(--surface);
  --color-box-body-highlight: var(--band);
  --color-highlight-bg: var(--band);
  --color-text-dark: var(--ink);
  --color-text: var(--ink);
  --color-text-light: var(--muted);
  --color-text-light-1: var(--muted);
  --color-text-light-2: var(--muted);
  --color-text-light-3: var(--muted);
  --color-footer: var(--paper);
  --color-timeline: var(--rule);
  --color-input-text: var(--ink);
  --color-input-background: var(--surface);
  --color-input-toggle-background: var(--surface);
  --color-input-border: var(--rule);
  --color-input-border-hover: var(--muted);
  --color-header-wrapper: var(--paper);
  --color-hover: var(--hover);
  --color-active: var(--hover);
  --color-menu: var(--surface);
  --color-card: var(--surface);
  --fancy-card-bg: var(--surface);
  --fancy-card-border: var(--rule);
  --color-markup-code-block: var(--surface);
  --color-markup-code-inline: var(--band);
  --color-button: var(--paper);
  --color-label-text: var(--ink);
  --color-label-bg: var(--band);
  --color-label-hover-bg: var(--hover);
  --color-label-active-bg: var(--hover);
  --color-label-bg-alt: var(--band);
  --color-light-border: var(--rule);
  --color-code-bg: var(--paper);
  --color-shadow: transparent;
  --color-secondary-bg: var(--band);
  --color-expand-button: var(--band);
  --color-placeholder-text: var(--muted);
  --color-editor-line-highlight: var(--band);
  --color-nav-bg: var(--paper);
  --color-nav-hover-bg: var(--hover);
  --color-secondary-nav-bg: var(--paper);
  --color-accent: var(--link);
  --color-small-accent: var(--band);
}

.diff-detail-stats {
  --color-green: var(--good);
  --color-yellow: var(--mixed);
  --color-red: var(--down);
}

.ui.disabled.labeled.button {
  opacity: 1 !important;
}

@media (prefers-color-scheme: light) {
  .chroma :is(.k, .kc, .kd, .kn, .kp, .kr, .na, .o, .ow) {
    color: #9d2638;
  }
}

@media (prefers-color-scheme: dark) {
  .chroma :is(.s, .s1, .s2, .sb, .sd, .sh, .sx) {
    color: #e4d58a;
  }
}

body {
  font-size: 16px;
  line-height: 1.5;
}

a {
  text-underline-offset: 0.15em;
}

.ui.button,
.ui.input > input,
.ui.form input:not([type]),
.ui.form input[type="text"],
.ui.form input[type="search"],
.ui.dropdown,
.ui.menu,
.ui.segment,
.ui.segments,
.ui.table,
.ui.label,
.ui.message,
.ui.attached.header,
.ui.tabular.menu .item,
.ui.secondary.menu .item,
.ui.secondary.vertical.menu,
.ui.selection.dropdown,
.ui.dropdown .menu,
.markup code,
.markup pre {
  border-radius: 0 !important;
  box-shadow: none;
}

.ui.menu,
.ui.segment,
.ui.segments,
.ui.table,
.ui.attached.header {
  border-color: var(--rule);
}

.ui.primary.button {
  background: var(--ink);
  color: var(--paper);
}

.ui.primary.button:hover,
.ui.primary.button:focus {
  background: var(--link);
  color: var(--paper);
}

.ui.secondary.pointing.menu .active.item {
  border-color: var(--ink);
}

#navbar {
  border-bottom: 1px solid var(--rule);
  box-shadow: none;
}

#navbar .brand {
  color: var(--ink);
}

footer {
  border-top: 1px solid var(--rule);
}

.markup {
  font-family: var(--fonts-proportional);
  line-height: 1.65;
}

.markup a:not(.anchor) {
  text-decoration: underline;
}

.markup h1,
.markup h2,
.markup h3 {
  color: var(--ink);
  border-color: var(--rule);
}

.markup blockquote {
  color: var(--muted);
  border-left: 2px solid var(--rule);
}

.markup table tr,
.markup table tr:nth-child(2n) {
  background: var(--paper);
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}