/* Graphite theme for Forgejo — dark graphite palette */

:root {
    color-scheme: dark;

    /* Primary = medium graphite for contrast on dark bg */
    --color-primary: #9a9a9a;
    --color-primary-contrast: #121212;
    --color-primary-dark-1: #8a8a8a;
    --color-primary-dark-2: #7a7a7a;
    --color-primary-dark-3: #6a6a6a;
    --color-primary-dark-4: #5a5a5a;
    --color-primary-dark-5: #4a4a4a;
    --color-primary-dark-6: #3a3a3a;
    --color-primary-dark-7: #2a2a2a;
    --color-primary-light-1: #aaaaaa;
    --color-primary-light-2: #bababa;
    --color-primary-light-3: #cacaca;
    --color-primary-light-4: #d4d4d4;
    --color-primary-light-5: #505050;
    --color-primary-light-6: #3a3a3a;
    --color-primary-light-7: #2a2a2a;
    --color-primary-alpha-10: #9a9a9a19;
    --color-primary-alpha-20: #9a9a9a33;
    --color-primary-alpha-30: #9a9a9a4b;
    --color-primary-alpha-40: #9a9a9a66;
    --color-primary-alpha-50: #9a9a9a80;
    --color-primary-alpha-60: #9a9a9a99;
    --color-primary-alpha-70: #9a9a9ab3;
    --color-primary-alpha-80: #9a9a9acc;
    --color-primary-alpha-90: #9a9a9ae1;
    --color-primary-hover: #b0b0b0;
    --color-primary-active: #c0c0c0;

    /* Secondary / borders */
    --color-secondary: #3a3a3a;
    --color-secondary-dark-1: #454545;
    --color-secondary-dark-2: #505050;
    --color-secondary-dark-3: #5c5c5c;
    --color-secondary-dark-4: #6a6a6a;
    --color-secondary-dark-5: #787878;
    --color-secondary-dark-6: #868686;
    --color-secondary-dark-7: #949494;
    --color-secondary-dark-8: #a2a2a2;
    --color-secondary-dark-9: #b0b0b0;
    --color-secondary-dark-10: #bebebe;
    --color-secondary-dark-11: #cccccc;
    --color-secondary-dark-12: #e0e0e0;
    --color-secondary-dark-13: #f0f0f0;
    --color-secondary-light-1: #303030;
    --color-secondary-light-2: #2a2a2a;
    --color-secondary-light-3: #242424;
    --color-secondary-light-4: #1e1e1e;
    --color-secondary-alpha-10: #3a3a3a19;
    --color-secondary-alpha-20: #3a3a3a33;
    --color-secondary-alpha-30: #3a3a3a4b;
    --color-secondary-alpha-40: #3a3a3a66;
    --color-secondary-alpha-50: #3a3a3a80;
    --color-secondary-alpha-60: #3a3a3a99;
    --color-secondary-alpha-70: #3a3a3ab3;
    --color-secondary-alpha-80: #3a3a3acc;
    --color-secondary-alpha-90: #3a3a3ae1;
    --color-secondary-button: #6a6a6a;
    --color-secondary-hover: #787878;
    --color-secondary-active: #868686;

    /* Body / surfaces — medium-dark grays */
    --color-body: #2e2e2e;
    --color-box-header: #3a3a3a;
    --color-box-body: #363636;
    --color-box-body-highlight: #404040;
    --color-footer: #333333;
    --color-menu: #3a3a3a;
    --color-card: #3a3a3a;
    --color-nav-bg: #2a2a2a;
    --color-nav-hover-bg: #404040;
    --color-secondary-bg: #333333;
    --color-header-wrapper: #333333;
    --color-code-bg: #303030;
    --color-code-sidebar-bg: #353535;
    --color-input-background: #3a3a3a;
    --color-input-toggle-background: #3a3a3a;
    --color-input-border: #3a3a3a;
    --color-input-border-hover: #505050;

    /* Text */
    --color-text-dark: #f2f2f2;
    --color-text: #d8d8d8;
    --color-text-light: #b8b8b8;
    --color-text-light-1: #a0a0a0;
    --color-text-light-2: #8a8a8a;
    --color-text-light-3: #707070;
    --color-input-text: #e0e0e0;
    --color-nav-text: var(--color-text);
    --color-placeholder-text: #707070;
    --color-caret: #e0e0e0;

    /* Interaction overlays */
    --color-light: #ffffff08;
    --color-light-border: #ffffff1a;
    --color-hover: #ffffff14;
    --color-active: #ffffff20;
    --color-markup-table-row: #ffffff08;
    --color-markup-code-block: #00000040;
    --color-reaction-bg: #ffffff0a;
    --color-reaction-hover-bg: #3a3a3a;
    --color-reaction-active-bg: #454545;

    /* Buttons */
    --color-button: #2a2a2a;

    /* Accents */
    --color-accent: #808080;
    --color-small-accent: #3a3a3a;
    --color-active-line: #2e2e2e;

    /* Labels */
    --color-label-text: #e0e0e0;
    --color-label-bg: #55555555;
    --color-label-hover-bg: #6a6a6a80;
    --color-label-active-bg: #7a7a7a;

    /* Tooltip / overlay */
    --color-tooltip-text: #f2f2f2;
    --color-tooltip-bg: #000000ee;
    --color-overlay-backdrop: #000000d0;
    --color-shadow: #00000080;

    /* Diff — muted for dark bg */
    --color-diff-removed-word-bg: #5a2a2a;
    --color-diff-added-word-bg: #2a5a2a;
    --color-diff-removed-row-bg: #3a1f1f;
    --color-diff-added-row-bg: #1f3a1f;
    --color-diff-moved-row-bg: #3a3a1f;
    --color-diff-removed-row-border: #5a2a2a;
    --color-diff-added-row-border: #2a5a2a;
    --color-diff-moved-row-border: #5a5a2a;
    --color-diff-inactive: #262626;
}

/* Force light text on dark backgrounds everywhere */
html, body {
    color: #d8d8d8;
    background: #2e2e2e;
}

::selection {
    background: #505050 !important;
    color: #f2f2f2 !important;
}

.CodeMirror-selected {
    background: #3a3a3a !important;
    color: #e0e0e0 !important;
}

/* Links */
a {
    color: #b8b8b8;
}
a:hover {
    color: #f2f2f2;
}

/* Unified top navbar — everything same shade */
#navbar,
#navbar .item,
#navbar .dropdown,
#navbar .ui.dropdown,
#navbar .ui.menu,
#navbar .ui.secondary.menu,
#navbar .navbar-left,
#navbar .navbar-right,
#navbar .ui.input,
#navbar .ui.input > input,
#navbar input[type="search"],
#navbar input[type="text"] {
    background: #2a2a2a !important;
    border-color: #2a2a2a !important;
    color: #d8d8d8 !important;
}

#navbar a.item:hover,
#navbar button.item:hover,
#navbar .ui.dropdown:hover,
#navbar .item:hover {
    background: #363636 !important;
}

#navbar .ui.input > input:focus,
#navbar input:focus {
    background: #363636 !important;
    border-color: #505050 !important;
}

/* Kill hardcoded white backgrounds from semantic-ui */
.ui.modal,
.ui.modal > .header,
.ui.modal > .content,
.ui.menu,
.ui.vertical.menu,
.ui.dropdown .menu,
.ui.table,
.ui.segment,
.ui.segments,
.ui.attached.segment,
.ui.card,
.ui.cards > .card,
.ui.input > input,
.ui.form input:not([type]),
.ui.form input[type="text"],
.ui.form input[type="password"],
.ui.form input[type="email"],
.ui.form input[type="url"],
.ui.form input[type="number"],
.ui.form input[type="search"],
.ui.form input[type="tel"],
.ui.form input[type="date"],
.ui.form input[type="datetime-local"],
.ui.form input[type="time"],
.ui.form input[type="file"],
.ui.form textarea,
.ui.form select,
.ui.selection.dropdown {
    background: var(--color-box-body) !important;
    color: var(--color-text) !important;
}

.ui.modal > .header {
    background: var(--color-box-header) !important;
}