MediaWiki:Citizen.css

/* Import Space Mono for code sections */
@import url('https://googleapis.com');

:root,
.skin-theme-clientpref-night,
html.skin-citizen-dark {
    /* --- Core Gruvbox Material Dark Palette --- */
    --color-surface-0: #1d2021 !important;  /* Pure Gruvbox Dark Hard canvas */
    --color-surface-1: #282828 !important;  /* Soft dark container boxes */
    --color-surface-2: #3c3836 !important;  /* Hover highlights / list bars */
    --color-surface-3: #504945 !important;  /* Form inputs and clean borders */

    /* --- Iconic Retro Text Values --- */
    --color-base: #d4be98 !important;          /* Warm Material Cream primary text */
    --color-base-variant: #a89984 !important;  /* Muted Sand secondary text */

    /* --- Desaturated Earth Accents --- */
    --color-primary: #a9b665 !important;          /* Gruvbox Moss Green for links & primary UI */
    --color-primary-variant: #89b482 !important;  /* Muted Aqua Green for active headers */

    /* --- Uniform Modern Curves --- */
    --border-radius-base: 12px !important;
    --border-radius-large: 16px !important;

    /* --- Map Monospace Variable --- */
    --font-family-monospace: 'Space Mono', monospace !important;
}

/* Force solid container layers without chaotic background gradients */
.mw-body, 
.mw-page-container, 
.skin-citizen-sidebar,
.mw-portlet {
    background-color: var(--color-surface-1) !important;
    border-radius: var(--border-radius-base) !important;
    border: 1px solid var(--color-surface-3) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

/* Structure the header tracking strip cleanly */
#mw-header {
    background-color: var(--color-surface-0) !important;
    border-bottom: 1px solid var(--color-surface-2) !important;
}

/* Target and style code blocks with clear Gruvbox syntax highlights */
code, 
pre, 
.mw-code, 
kbd, 
samp, 
.syntaxhighlight {
    font-family: var(--font-family-monospace) !important;
    font-size: 0.9em !important;
    background-color: var(--color-surface-2) !important;
    color: #e78a4e !important; /* Gruvbox Material Terracotta Orange for syntax */
    padding: 0.2em 0.4em !important;
    border-radius: 6px !important;
    border: 1px solid var(--color-surface-3) !important;
}

/* Ensure active hyperlinks use the soft Gruvbox green */
a {
    color: var(--color-primary) !important;
}
a:visited {
    color: #d3869b !important; /* Gruvbox Purple/Burgundy for visited entries */
}