/* ==========================================================================
   Variables
   ========================================================================== */

:root {
    /* ==========================================================================
       Surfaces
       ========================================================================== */

    --rdmge-surface-0: #000316;
    --rdmge-surface-1: #090d24;
    --rdmge-surface-2: #15102a;
    --rdmge-surface-3: #290152;

    --rdmge-terminal: #1f2229;

    /* ==========================================================================
       Brand
       ========================================================================== */

    --rdmge-primary: #8000ff;
    --rdmge-primary-hover: #7014d8;
    --rdmge-primary-active: #5f00bd;
    --rdmge-primary-text: #ffffff;

    /* ==========================================================================
       Text
       ========================================================================== */

    --rdmge-text: #ffffff;
    --rdmge-text-muted: #b8b9c5;
    --rdmge-text-subtle: #9294a4;

    --rdmge-link: #b16cff;
    --rdmge-link-hover: #c995ff;

    /* ==========================================================================
       Borders
       ========================================================================== */

    --rdmge-border: #55586c;
    --rdmge-border-strong: #8b8da0;
    --rdmge-divider: #34374b;

    /* ==========================================================================
       States
       ========================================================================== */

    --rdmge-success: #45a049;
    --rdmge-danger: #e05252;
    --rdmge-warning: #f9a825;
    --rdmge-info: #4f9cff;

    /* ==========================================================================
       Accessibility
       ========================================================================== */

    --rdmge-focus: #b770ff;

    /* ==========================================================================
       Layout
       ========================================================================== */

    --rdmge-radius-small: 4px;
    --rdmge-radius: 7px;
    --rdmge-radius-large: 10px;

    --rdmge-shadow: 0 8px 24px rgb(0 0 0 / 35%);
}


/* ==========================================================================
   Global / Reset
   ========================================================================== */

body,
.full.height {
    background: var(--rdmge-surface-0);
    color: var(--rdmge-text);

    a {
        color: var(--rdmge-link);

        &:hover,
        &:focus-visible {
            color: var(--rdmge-link-hover);
        }
    }
}

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


/* ==========================================================================
   Typography
   ========================================================================== */



/* ==========================================================================
   Layout
   ========================================================================== */



/* ==========================================================================
   Header
   ========================================================================== */



/* ==========================================================================
   Sidebar / Navigation
   ========================================================================== */

.ui.menu {
    background: var(--rdmge-surface-1);
    border-color: var(--rdmge-divider);

    .item {
        color: var(--rdmge-text-muted);

        &:hover,
        &.active {
            color: var(--rdmge-text);
            background: rgb(128 0 255 / 16%);
        }
    }
}


/* ==========================================================================
   Buttons
   ========================================================================== */

.ui.button {
    background: var(--rdmge-surface-2);
    color: var(--rdmge-text);
    border-color: var(--rdmge-border);

    &:hover {
        background: var(--rdmge-surface-3);
        color: var(--rdmge-text);
        border-color: var(--rdmge-link);
    }

    &:focus-visible {
        border-color: var(--rdmge-focus);
    }

    &.primary {
        background: var(--rdmge-primary);
        color: var(--rdmge-primary-text);
        border-color: var(--rdmge-primary);

        &:hover {
            background: var(--rdmge-primary-hover);
            border-color: var(--rdmge-primary-hover);
        }

        &:active {
            background: var(--rdmge-primary-active);
            border-color: var(--rdmge-primary-active);
        }
    }
}


/* ==========================================================================
   Forms
   ========================================================================== */

.ui.input {
    > input {
        background: var(--rdmge-surface-0);
        color: var(--rdmge-text);
        border-color: var(--rdmge-border);

        &:focus {
            border-color: var(--rdmge-focus);
            box-shadow: 0 0 0 3px rgb(183 112 255 / 28%);
        }
    }
}


/* ==========================================================================
   Cards / Segments / Panels
   ========================================================================== */

.ui {
    &.segment,
    &.card,
    &.modal,
    &.table {
        background: var(--rdmge-surface-1);
        color: var(--rdmge-text);
        border-color: var(--rdmge-divider);
        border-radius: var(--rdmge-radius);
    }
}


/* ==========================================================================
   Tables
   ========================================================================== */



/* ==========================================================================
   Repository Pages
   ========================================================================== */

.repository {
    .repo-header {
        border-color: var(--rdmge-divider);
    }

    .metas {
        color: var(--rdmge-text-muted);
    }
}


/* ==========================================================================
   Issues
   ========================================================================== */



/* ==========================================================================
   Pull Requests
   ========================================================================== */



/* ==========================================================================
   Markdown
   ========================================================================== */

.markdown {
    code,
    pre {
        background: var(--rdmge-terminal);
        color: var(--rdmge-text);
    }
}


/* ==========================================================================
   Wiki
   ========================================================================== */



/* ==========================================================================
   Packages
   ========================================================================== */



/* ==========================================================================
   Actions
   ========================================================================== */



/* ==========================================================================
   Admin
   ========================================================================== */



/* ==========================================================================
   Utilities
   ========================================================================== */



/* ==========================================================================
   Responsive
   ========================================================================== */