:root {
    --color-primary: #4793cc; /* from brand palette, brightened for readability */
    --color-primary-alpha-10: #2185d019;
    --color-primary-alpha-20: #2185d033;
    --color-primary-alpha-30: #2185d04b;
    --color-primary-alpha-40: #2185d066;
    --color-primary-alpha-50: #2185d080;
    --color-primary-alpha-60: #2185d099;
    --color-primary-alpha-70: #2185d0b3;
    --color-primary-alpha-80: #2185d0cc;
    --color-primary-alpha-90: #2185d0e1;

    --color-primary-light-1: #1e78bb; /* 10% shade steps, AA contrast with white text */
    --color-primary-light-2: #1a6aa6;
    --color-primary-light-3: #175d92;
    --color-primary-light-4: #14507d;
    --color-primary-light-5: #114368;
    --color-primary-light-6: #0d3553;
    --color-primary-light-7: #0a283e;

    --color-primary-dark-1: #3d94d6; /* 12.5% tint steps */
    --color-primary-dark-2: #59a4dc;
    --color-primary-dark-3: #74b3e2;
    --color-primary-dark-4: #90c2e8;
    --color-primary-dark-5: #acd1ed;
    --color-primary-dark-6: #c8e1f3;
    --color-primary-dark-7: #e3f0f9;

    --color-secondary: #082437; /* 25% shade steps from dark-1 */
    --color-secondary-alpha-10: #08243719;
    --color-secondary-alpha-20: #08243733;
    --color-secondary-alpha-30: #0824374b;
    --color-secondary-alpha-40: #08243766;
    --color-secondary-alpha-50: #08243780;
    --color-secondary-alpha-60: #08243799;
    --color-secondary-alpha-70: #082437b3;
    --color-secondary-alpha-80: #082437cc;
    --color-secondary-alpha-90: #082437e1;

    --color-secondary-light-1: #061825; /* 50% shade from dark-1, AA contrast with brand color for text */
    --color-secondary-light-2: #04121b; /* 62.5% shade from dark-1 */
    --color-secondary-light-3: #0c1a24; /* 75% shade from dark-1, then brightened for less eye strain */
    --color-secondary-light-4: #010609; /* 87.5% shade from dark-1 */

    --color-secondary-dark-1: #0b3049; /* from brand palette */
    --color-secondary-dark-2: #1d4057; /* 7.5% tint steps */
    --color-secondary-dark-3: #304f64;
    --color-secondary-dark-4: #425f72;
    --color-secondary-dark-5: #546e80;
    --color-secondary-dark-6: #677e8d;
    --color-secondary-dark-7: #798d9b;
    --color-secondary-dark-8: #8b9da9;
    --color-secondary-dark-9: #9dacb6;
    --color-secondary-dark-10: #b0bcc4;
    --color-secondary-dark-11: #c2cbd2;
    --color-secondary-dark-12: #d4dbdf;
    --color-secondary-dark-13: #e7eaed;

    --color-link: var(--color-primary-dark-2);

    --color-diff-inactive: #353846; /* TODO */
    --color-body: var(--color-secondary-light-3);
    --color-box-header: var(--color-secondary-light-1);
    --color-box-body: var(--color-secondary-light-2);
    --color-text-dark: #fff;
    --color-text: var(--color-secondary-dark-12);
    --color-text-light: var(--color-secondary-dark-9);
    --color-text-light-2: var(--color-secondary-dark-8);
    --color-text-light-3: var(--color-secondary-dark-3);
    --color-timeline: var(--color-secondary);
    --color-input-text: var(--color-text-dark);
    --color-input-background: var(--color-secondary);
    --color-input-border: var(--color-secondary-dark-2);
    --color-input-border-hover: var(--color-primary);
    --color-navbar: #1b2c40; /* not the main navbar, but for e.g. repo header. brightened from --color-secondary for tab contrast. */
    --color-menu: var(--color-secondary-light-1);
    --color-card: var(--color-secondary-light-1);
    --color-markup-code-block: var(--color-secondary);
    --color-light: var(--color-secondary-dark-2);
    --color-light-border: var(--color-secondary-dark-4);
    --color-hover: var(--color-secondary-dark-3);
    --color-active: var(--color-secondary);
    --color-button: var(--color-secondary-dark-2);
    --color-code-bg: var(--color-secondary-light-2);
    --color-code-sidebar-bg: var(--color-secondary-light-3);
    --color-secondary-bg: var(--color-secondary-light-2);
    --color-expand-button: var(--color-secondary-dark-3);
    --color-placeholder-text: var(--color-text-light-2);
    --color-nav-hover-bg: var(--color-secondary-dark-3);

    /* Codeberg footer */
    --color-footer: var(--color-secondary-light-4);
    --color-footer-text: #ffffff;
}

.ui.horizontal.segments > .segment {
    background-color: var(--color-secondary-light-3);
}
[data-tooltip]:before, [data-tooltip]:after {
    background: #1b1c1d !important;
    border-color: #1b1c1d !important;
    color: #dbdbdb !important;
}
[data-tooltip]:before {
    box-shadow: 1px 1px #1b1c1d !important;
}
.feeds .list ul li.private {
    background: var(--color-secondary-dark-2)
}
.form .help {
    color: #7f8699
}
.ui .text.light.grey {
    color: #7f8699 !important
}
.ui.search > .results {
    background: var(--color-secondary-dark-3);
}
.repository.file.list #repo-files-table tr {
    background: var(--color-secondary-light-1);
}
.repository.file.list #repo-files-table tr:hover {
    background-color: var(--color-secondary-dark-1) !important
}
.repository.file.editor.edit .editor-preview, .repository.wiki.new .CodeMirror .editor-preview, .repository.file.editor.edit .editor-preview-side, .repository.wiki.new .CodeMirror .editor-preview-side, .repository.file.editor.edit + .editor-preview-side, .repository.wiki.new .CodeMirror + .editor-preview-side {
    background: var(--color-secondary-dark-2)
}
.ui.green.button, .ui.green.buttons .button {
    background-color: #21ba45;
}
.ui.green.button:hover, .ui.green.buttons .button:hover {
    background-color: #16ab39
}
.ui.tertiary.button {
    color: #fff9;
    &:hover {
        color: #ccc;
    }
}

/** TODO: ??? **/
.tag-code, .tag-code td {
    background: var(--color-secondary-dark-2) !important
}
.tag-code td.lines-num {
    background-color: var(--color-secondary-dark-3) !important
}
.ui.attached.info.message, .ui.info.message {
    box-shadow: 0 0 0 1px #4b5e71 inset, 0 0 transparent
}
.ui.active.label {
    background: #393d4a;
    border-color: #393d4a;
    color: #dbdbdb
}
.ui.modal > .content {
    background: var(--color-secondary-dark-3);
}
.minicolors-panel {
    border-color: #6a737d !important
}
.repository.release #release-list > li .detail .dot {
    background-color: #505667;
    border-color: #383c4a
}
#git-graph-container .ui.buttons button#flow-color-monochrome.ui.button {
    /* TODO: a button there is white for some reason?! */
    border-left-color: #4c505c;
}
.is-loading:after {
    border-color: #4a4c58 #4a4c58 #d7d7da #d7d7da
}
