/* ==========================================================
   Custom Gitea Theme — "cjratliff"
   ========================================================== */

/* ---------- Root Variables ---------- */
:root {
    /* Main Colors */
    --color-primary: #00d9ff;

    --color-red: #ef596f;
    --color-orange: #be5046;
    --color-yellow: #e5c07b;
    --color-green: #89ca78;
    --color-blue: #61afef;
    --color-indigo: #d55fde;
    --color-violet: #ba5fde;

    /* Dark Theme Base */
    --color-body: #202020;              /* Background */
    --color-body-dark: #242424;         /* Background-alt */
    --color-body-darker: #4e4e4e;       /* Background-alt2 */

    --color-text: #c2c2c2;              /* Text */
    --color-text-light: #d3d3d3;        /* Text-alt */

    --color-border: #2F3437;            /* Line/border color */

    /* Buttons */
    --color-button: var(--color-primary);
    --color-button-text: #000;

    /* Links */
    --color-link: var(--color-primary);
    --color-link-hover: #61afef;

    /* Input Fields */
    --color-input-background: #242424;
    --color-input-text: var(--color-text);
    --color-input-border: var(--color-border);

    /* Code Blocks */
    --color-pre-background: #242424;
    --color-pre-border: #2F3437;
}

/* ---------- General UI ---------- */
body {
    background: var(--color-body) !important;
    color: var(--color-text) !important;
}

a {
    color: var(--color-link);
}
a:hover {
    color: var(--color-link-hover);
}

/* ---------- Headers ---------- */
.ui.menu,
.header-wrapper {
    background: var(--color-body-dark) !important;
    border-color: var(--color-border) !important;
}

/* ---------- Panels / Boxes ---------- */
.ui.segment,
.ui.message,
.ui.attached.segment {
    background: var(--color-body-dark) !important;
    color: var(--color-text) !important;
    border-color: var(--color-border) !important;
}

/* ---------- Inputs ---------- */
input,
textarea,
select {
    background: var(--color-input-background) !important;
    color: var(--color-input-text) !important;
    border-color: var(--color-input-border) !important;
}

/* ---------- Buttons ---------- */
.ui.button.primary {
    background: var(--color-button) !important;
    color: var(--color-button-text) !important;
}

.ui.button {
    background: var(--color-body-darker) !important;
    color: var(--color-text) !important;
    border-color: var(--color-border) !important;
}
.ui.button:hover {
    background: var(--color-primary) !important;
    color: #000 !important;
}

/* ---------- Code / Syntax Areas ---------- */
pre,
code {
    background: var(--color-pre-background) !important;
    border-color: var(--color-pre-border) !important;
}

/* ---------- Tables ---------- */
table thead th {
    background: var(--color-body-darker) !important;
    color: var(--color-text) !important;
}

table tbody tr:nth-child(odd) {
    background: var(--color-body-dark) !important;
}
table tbody tr:nth-child(even) {
    background: var(--color-body) !important;
}

/* ---------- Borders ---------- */
* {
    border-color: var(--color-border) !important;
}