:root {
    --color-page-bg: #3f2f2f;
    --color-main-bg: #383838;
    --color-panel-bg: #181818;
    --color-panel-alt-bg: #2a1515;
    --color-panel-dark-bg: #000000;

    --color-primary: #52656f;
    --color-primary-hover: #3f5058;

    --color-accent: #c43333;
    --color-accent-bright: #ff0000;
    --color-accent-soft: #ffb3b3;

    --color-text: #e68e8e;
    --color-text-soft: #e6b0b0;
    --color-text-bright: #ffb3b3;
    --color-text-white: #ffffff;

    --radius-xs: 2px;
    --radius-sm: 5px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 18px;
    --radius-pill: 999px;

    --transition-fast: 0.15s ease;
    --transition-medium: 0.2s ease;
    --transition-slow: 0.35s ease;


    --fog-color-primary: rgba(196, 51, 51, 0.10);
    --fog-color-secondary: rgba(0, 0, 0, 0.18);
    --fog-color-accent: rgba(255, 255, 255, 0.03);
    --fog-blur: 80px;
    --fog-opacity: 0.55;
    --fog-brightness: 1;
    --fog-contrast: 1;
    --fog-saturate: 1;

    /* Text */

    --color-form-text: #ffffff;
    --color-form-placeholder: #999999;
    --color-form-label: #e6b0b0;
    --color-form-help: #b8b8b8;

    /* Core Field Surface */

    --color-form-bg: #181818;
    --color-form-bg-hover: #202020;
    --color-form-bg-focus: #222222;

    --color-form-border: #5a1f1f;
    --color-form-border-hover: #7a2b2b;
    --color-form-border-focus: #c43333;

    /* Focus */

    --color-form-focus-ring: rgba(196, 51, 51, 0.25);

    /* Errors */

    --color-form-error-text: #ffb3b3;
    --color-form-error-bg: #2a1515;
    --color-form-error-border: #c43333;

    /* Checkbox / Radio */

    --color-checkbox-bg: #181818;
    --color-checkbox-border: #777777;
    --color-checkbox-checked: #c43333;
    --color-checkbox-focus: #ff0000;

    /* Selects */

    --color-select-arrow: #e68e8e;

    /* Disabled */

    --color-form-disabled-bg: #242424;
    --color-form-disabled-text: #777777;
    --color-form-disabled-border: #555555;

    /* Readonly */

    --color-form-readonly-bg: #1d1d1d;
    --color-form-readonly-border: #444444;

    /* File Inputs */

    --color-file-bg: #181818;
    --color-file-border: #5a1f1f;
    --color-file-text: #ffffff;

    /* Input Groups */

    --color-input-group-bg: #202020;
    --color-input-group-border: #5a1f1f;
    --color-input-group-text: #e6b0b0;

    /* Range Sliders */

    --color-range-track: #383838;
    --color-range-thumb: #c43333;

    /* Fieldsets */

    --color-fieldset-border: #3a3a3a;
    --color-legend-text: #e6b0b0;

    /* Autofill */

    --color-form-autofill-bg: #2a1a1a;
    --color-form-autofill-text: #ffffff;

    /* Validation */

    --color-valid: #4caf50;
    --color-invalid: #ff4d4d;
    --color-warning: #ffb347;

    /* Main Navbar */

    --color-navbar-bg: #181818;
    --color-navbar-border: #5a1f1f;

    --color-navbar-shadow:
        0 0 20px rgba(0, 0, 0, 0.65);

    /* Text */

    --color-navbar-text: #f0d0d0;
    --color-navbar-text-hover: #ffffff;
    --color-navbar-text-active: #c43333;
    --color-navbar-text-muted: #9a7a7a;

    /* Brand */

    --color-navbar-brand: #e6b0b0;
    --color-navbar-brand-hover: #ffffff;

    /* Links */

    --color-navbar-link: #f0d0d0;
    --color-navbar-link-hover: #ffffff;
    --color-navbar-link-active: #c43333;

    /* Dropdowns */

    --color-navbar-dropdown-bg: #242424;
    --color-navbar-dropdown-border: #5a1f1f;

    --color-navbar-dropdown-hover: #2e2e2e;
    --color-navbar-dropdown-active: #3a1a1a;

    --color-navbar-dropdown-text: #f0d0d0;
    --color-navbar-dropdown-text-hover: #ffffff;
    --color-navbar-dropdown-text-active: #ffffff;

    /* Toggle Button */

    --color-navbar-toggler: #c43333;
    --color-navbar-toggler-hover: #2a1515;
    --color-navbar-toggler-border: #5a1f1f;

    /* Avatar */

    --color-navbar-avatar-border: #c43333;

    --color-navbar-avatar-shadow:
        0 0 8px rgba(196, 51, 51, 0.35);
}

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background-color: var(--color-page-bg);
}

body {
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
    background-color: var(--color-main-bg);
    color: var(--color-text);
    border: thin solid black;
    border-radius: 5px;
    padding: 1.5rem;
    box-shadow: var(--shadow-main);
}

main .card {
    max-width: 720px;
    margin: 0 auto;
}

/* Fog layer behind EVERYTHING */
#fog-bg {
    position: fixed;
    inset: 0;

    z-index: var(--z-fog);

    overflow: hidden;

    pointer-events: none;

    opacity: var(--fog-opacity);

    filter:
        brightness(var(--fog-brightness)) contrast(var(--fog-contrast)) saturate(var(--fog-saturate));
}

/* Make sure body doesn’t cover fog */
body {
    background: transparent;
    /* important */
}

/* Your existing background color becomes fallback only */
html {
    background-color: var(--color-page-bg);
}

/* Ensure content sits above fog */
main,
footer {
    position: relative;
    z-index: 1;
}


/* =========================================
   FORMS
========================================= */

.form-label {
    color: var(--color-form-label);
    font-weight: 600;
}

.form-text {
    color: var(--color-form-help);
}

.form-control,
.form-select {
    background: var(--color-form-bg);
    color: var(--color-form-text);

    border: 1px solid var(--color-form-border);

    transition:
        background var(--transition-fast),
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        color var(--transition-fast);
}

.form-control:hover,
.form-select:hover {
    background: var(--color-form-bg-hover);
    border-color: var(--color-form-border-hover);
}

.form-control:focus,
.form-select:focus {
    background: var(--color-form-bg-focus);
    color: var(--color-form-text);

    border-color: var(--color-form-border-focus);

    box-shadow:
        0 0 0 0.2rem var(--color-form-focus-ring);

    outline: none;
}

.form-control::placeholder,
.form-select::placeholder {
    color: var(--color-form-placeholder);
}

.form-control:disabled,
.form-select:disabled {
    background: var(--color-form-disabled-bg);
    color: var(--color-form-disabled-text);

    border-color: var(--color-form-disabled-border);

    opacity: 1;
}

.form-control[readonly],
.form-select[readonly] {
    background: var(--color-form-readonly-bg);
    border-color: var(--color-form-readonly-border);
}

.form-check-input {
    background-color: var(--color-checkbox-bg);
    border-color: var(--color-checkbox-border);
}

.form-check-input:checked {
    background-color: var(--color-checkbox-checked);
    border-color: var(--color-checkbox-checked);
}

.form-check-input:focus {
    border-color: var(--color-checkbox-focus);

    box-shadow:
        0 0 0 0.2rem var(--color-form-focus-ring);
}

.input-group-text {
    background: var(--color-input-group-bg);
    color: var(--color-input-group-text);

    border-color: var(--color-input-group-border);
}

.form-control.is-valid,
.was-validated .form-control:valid {
    border-color: var(--color-valid);
}

.form-control.is-invalid,
.was-validated .form-control:invalid {
    border-color: var(--color-invalid);
}

.invalid-feedback {
    color: var(--color-form-error-text);
}

fieldset {
    border-color: var(--color-fieldset-border);
}

legend {
    color: var(--color-legend-text);
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-text-fill-color:
        var(--color-form-autofill-text);

    -webkit-box-shadow:
        0 0 0 1000px var(--color-form-autofill-bg) inset;

    transition:
        background-color 9999s ease-in-out 0s;
}


nav {
    position: fixed;
    z-index: 100;
}

.card {
    border: thin dashed var(--color-accent-bright);
    background-color: var(--color-card-bg);
    color: var(--color-text-white);
}

.auth-card {
    max-width: 720px;
    margin: 3rem auto;
    padding: 2rem;
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    background-color: var(--color-panel-bg);
    color: var(--color-text-soft);
}

.auth-card h1 {
    color: var(--color-text-bright);
    margin-bottom: var(--space-md);
}

.auth-option {
    display: block;
    margin: var(--space-md) 0;
    padding: var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-panel-alt-bg);
}

/* =========================
   AUTH BUTTONS
========================= */

.btn-login,
.btn-logout {
    border-radius: var(--radius-pill);
    padding: var(--space-sm) 1.25rem;
    font-weight: var(--font-weight-bold);
    text-decoration: none;
    display: inline-block;
    transition: all var(--transition-medium);
    border: 2px solid;
}

.btn-login {
    background-color: var(--color-button-primary-bg);
    color: var(--color-button-primary-text);
    border-color: var(--color-button-primary-bg);
}

.btn-login:hover,
.btn-login:focus {
    background-color: var(--color-button-primary-hover);
    border-color: var(--color-button-primary-hover);
    color: var(--color-button-primary-text);
}

.btn-logout {
    background-color: transparent;
    color: var(--color-button-outline-text);
    border-color: var(--color-button-outline-border);
}

.btn-logout:hover,
.btn-logout:focus {
    background-color: var(--color-button-primary-bg);
    color: var(--color-button-primary-text);
}

.info-submit-page {
    max-width: 950px;
    margin: 0 auto;
}

.info-submit-header {
    margin-bottom: var(--space-md);
    background-color: var(--color-panel-dark-bg);
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 2px;
    padding-bottom: 2px;
    border-radius: var(--radius-sm);
}

.info-submit-header h1 {
    color: var(--color-text-bright);
    margin-bottom: var(--space-xs);
}

.info-submit-header p {
    color: var(--color-text-soft);
    margin-bottom: 0;
}

.info-submit-form {
    background-color: var(--color-panel-dark-bg);
    border: thin dashed var(--color-accent-bright);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
}

.info-form-panel {
    background-color: var(--color-panel-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    margin-bottom: var(--space-md);
}

.info-form-panel h2 {
    color: var(--color-text-bright);
    font-size: 1.35rem;
    margin: 0 0 var(--space-md) 0;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--color-border);
}

/* labels */

.info-submit-form .form-label {
    color: var(--color-text);
    font-weight: var(--font-weight-bold);
    margin-bottom: 0.35rem;
}

/* Bootstrap fields */

.info-submit-form .form-control,
.info-submit-form .form-select {
    background-color: var(--color-form-bg);
    color: var(--color-text-white);
    border: 1px solid var(--color-form-border);
    border-radius: var(--radius-sm);
    min-height: 2.4rem;
}

.info-submit-form .form-control:focus,
.info-submit-form .form-select:focus {
    background-color: var(--color-form-focus-bg);
    color: var(--color-text-white);
    border-color: var(--color-form-focus-border);
    box-shadow: 0 0 0 0.2rem rgba(196, 51, 51, 0.25);
}

/* textarea sizing */

.info-submit-form textarea.form-control {
    resize: vertical;
}

.info-submit-form textarea[name="summary"] {
    min-height: 90px;
}

.info-submit-form textarea[name="content"] {
    min-height: 190px;
}

.info-submit-form textarea[name="mechanics"] {
    min-height: 130px;
}

/* errors */

.info-submit-form .errorlist {
    color: var(--color-text-bright);
    background-color: var(--color-panel-alt-bg);
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-sm);
    list-style: none;
    margin: var(--space-sm) 0 0;
    padding: var(--space-sm);
}

/* action row */

.info-submit-actions {
    display: flex;
    justify-content: space-between;
    gap: var(--space-md);
    margin-top: var(--space-md);
}

.info-submit-actions .btn {
    min-width: 160px;
    font-weight: var(--font-weight-bold);
}

.info-submit-actions .btn-primary {
    background-color: var(--color-button-primary-bg);
    border-color: var(--color-button-primary-bg);
    color: var(--color-button-primary-text);
}

.info-submit-actions .btn-primary:hover,
.info-submit-actions .btn-primary:focus {
    background-color: var(--color-button-primary-hover);
    border-color: var(--color-button-primary-hover);
    color: var(--color-text);
}

.info-submit-actions .btn-outline-secondary {
    color: var(--color-button-outline-text);
    border-color: var(--color-button-outline-border);
}

.info-submit-actions .btn-outline-secondary:hover,
.info-submit-actions .btn-outline-secondary:focus {
    background-color: var(--color-button-primary-bg);
    border-color: var(--color-button-primary-bg);
    color: var(--color-button-primary-text);
}

.info-submit-form .form-select:disabled {
    background-color: var(--color-disabled-bg);
    color: var(--color-text-disabled);
    border-color: var(--color-border-light);
}

@media (max-width: 768px) {
    .info-submit-form {
        padding: var(--space-md);
    }

    .info-submit-actions {
        flex-direction: column-reverse;
    }

    .info-submit-actions .btn {
        width: 100%;
    }
}

.info-index {
    max-width: 1000px;
    margin: 0 auto;
}

/* header */

.info-header {
    margin-bottom: var(--space-md);
    padding: 0.75rem 1rem;
    background-color: var(--color-panel-bg);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-accent);
    border-radius: var(--radius-md);
}

.info-header h1 {
    margin-bottom: var(--space-xs);
    color: var(--color-text-bright);
}

.info-header p {
    margin: 0;
    color: var(--color-text-soft);
}

/* search */

.info-search-form {
    margin-bottom: var(--space-md);
    padding: 0.75rem;
    background-color: var(--color-panel-dark-bg);
    border: thin dashed var(--color-accent-bright);
    border-radius: var(--radius-md);
}

/* results container */

.info-results {
    margin-top: var(--space-md);
}

/* list */

.info-results-list {
    border: none;
}

/* individual result */

.info-result-item {
    background-color: var(--color-panel-bg);
    color: var(--color-text-white);
    border: 1px solid var(--color-border);
    margin-bottom: var(--space-sm);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.info-result-item:hover {
    background-color: var(--color-panel-alt-bg);
    border-color: var(--color-accent);
}

/* result header */

.info-result-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.25rem;
}

.info-result-header h5 {
    margin: 0;
    color: var(--color-text-bright);
}

.info-result-header small {
    color: var(--color-text-muted);
}

/* no results */

.info-no-results {
    padding: var(--space-md);
    text-align: center;
    color: var(--color-text-muted);
}

/* =========================================
   NAVBAR
========================================= */

.navbar {

    background-color:
        var(--color-navbar-bg);

    border-bottom:
        1px solid var(--color-navbar-border);

    box-shadow:
        var(--color-navbar-shadow);
}

/* Links */

.navbar .nav-link {

    color:
        var(--color-navbar-link);

    transition:
        color var(--transition-fast),
        background-color var(--transition-fast);
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {

    color:
        var(--color-navbar-link-hover);
}

.navbar .nav-link.active {

    color:
        var(--color-navbar-link-active);
}

/* Brand */

.navbar-brand {

    color:
        var(--color-navbar-brand);

    transition:
        color var(--transition-fast);
}

.navbar-brand:hover,
.navbar-brand:focus {

    color:
        var(--color-navbar-brand-hover);
}

/* =========================================
   NAVBAR DROPDOWNS
========================================= */

.navbar .dropdown-menu {

    background-color:
        var(--color-navbar-dropdown-bg);

    border:
        1px solid var(--color-navbar-dropdown-border);

    border-radius:
        var(--radius-md);

    padding:
        0.35rem;

    min-width:
        220px;

    box-shadow:
        var(--color-dropdown-shadow);

    animation:
        dropdownFade 0.12s ease-out;
}

/* Dropdown Items */

.navbar .dropdown-item {

    color:
        var(--color-navbar-dropdown-text);

    border-radius:
        var(--radius-sm);

    transition:
        background-color var(--transition-fast),
        color var(--transition-fast);
}

/* Hover / Focus */

.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {

    background-color:
        var(--color-navbar-dropdown-hover);

    color:
        var(--color-navbar-dropdown-text-hover);
}

/* Active */

.navbar .dropdown-item.active,
.navbar .dropdown-item:active {

    background-color:
        var(--color-navbar-dropdown-active);

    color:
        var(--color-navbar-dropdown-text-active);
}

/* Disabled/Text */

.navbar .dropdown-item-text {

    color:
        var(--color-navbar-text-muted);
}

/* Divider */

.navbar .dropdown-divider {

    border-top:
        1px solid var(--color-navbar-dropdown-border);

    opacity:
        1;
}

/* Dropdown Toggle */

.navbar .nav-link.dropdown-toggle:hover {

    color:
        var(--color-navbar-link-hover);
}

/* =========================================
   NAVBAR TOGGLER
========================================= */

.navbar-toggler {

    border-color:
        var(--color-navbar-toggler-border);

    transition:
        background-color var(--transition-fast),
        border-color var(--transition-fast);
}

.navbar-toggler:hover,
.navbar-toggler:focus {

    background-color:
        var(--color-navbar-toggler-hover);
}

/* =========================================
   NAVBAR AVATAR
========================================= */

.navbar img.rounded-circle {

    border-color:
        var(--color-navbar-avatar-border) !important;

    box-shadow:
        var(--color-navbar-avatar-shadow);
}

/* =========================================
   DROPDOWN ANIMATION
========================================= */

@keyframes dropdownFade {

    from {

        opacity:
            0;

        transform:
            translateY(-4px);
    }

    to {

        opacity:
            1;

        transform:
            translateY(0);
    }
}

.chronicle-grid {
    display: grid;

    grid-template-columns:
        repeat(auto-fill,
            minmax(360px, 1fr));

    gap: var(--space-lg);
}

.chronicle-card {
    transition: var(--transition-medium);
}

.chronicle-card:hover {
    transform: translateY(-4px);
}

.chronicle-icon {
    width: 72px;
    height: 72px;
    border-radius: var(--radius-xl);
    object-fit: cover;
}

.chronicle-icon-placeholder {
    width: 72px;
    height: 72px;
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-panel-alt-bg);
    font-size: 2rem;
    font-weight: var(--font-weight-bold);
}

.chronicle-meta {
    display: grid;

    grid-template-columns:
        repeat(2,
            1fr);

    gap: var(--space-md);
}

.chronicle-meta-item {
    display: flex;
    flex-direction: column;
}

.chronicle-meta-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    opacity: 0.7;
}

.role-chip {
    padding: 0.75rem 1rem;
    border-radius: var(--radius-lg);
    background: var(--color-panel-alt-bg);
}

.channel-row,
.audit-entry {
    padding: var(--space-md);
    border-radius: var(--radius-lg);
    background: var(--color-panel-alt-bg);
}

footer {
    width: 100%;
    font-weight: var(--font-weight-bold);
    background-color: var(--color-footer-bg);
    color: var(--color-accent-bright);
    border-top: thin solid var(--color-border-light);
}

.site-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;

    background-color: var(--color-footer-bg);
    color: var(--color-text);

    border-top:
        thin solid var(--color-border);

    padding:
        var(--space-sm) var(--space-lg);

    box-shadow: var(--shadow-main);
}

.footer-theme-switcher {
    display: flex;
    align-items: center;

    flex: 0 0 auto;
}

.footer-theme-switcher form {
    margin: 0;

    display: flex;
}

.footer-theme-switcher select {
    width: 220px;

    background-color:
        var(--color-form-bg);

    color:
        var(--color-text);

    border:
        thin solid var(--color-form-border);

    border-radius:
        var(--radius-sm);

    transition:
        var(--transition-fast);
}

.footer-theme-switcher select:hover,
.footer-theme-switcher select:focus {

    background-color:
        var(--color-form-focus-bg);

    border-color:
        var(--color-form-focus-border);

    color:
        var(--color-text-bright);

    box-shadow:
        var(--shadow-dropdown);

    outline: none;
}

body.theme-1 {
    /* Core backgrounds */
    --color-page-bg: #3f2f2f;
    --color-main-bg: #383838;
    --color-panel-bg: #181818;
    --color-panel-alt-bg: #2a1515;
    --color-panel-dark-bg: #000000;
    --color-navbar-bg: #181818;
    --color-footer-bg: #361e1e;
    --color-dropdown-bg: #181818;
    --color-input-bg: #383838;
    --color-input-focus-bg: #2a1515;
    --color-disabled-bg: #242424;

    /* Primary palette */
    --color-primary: #52656f;
    --color-primary-hover: #3f5058;
    --color-accent: #c43333;
    --color-accent-bright: #ff0000;
    --color-accent-soft: #ffb3b3;

    /* Text */
    --color-text: #e68e8e;
    --color-text-soft: #e6b0b0;
    --color-text-bright: #ffb3b3;
    --color-text-white: #ffffff;
    --color-text-muted: #c0c0c0;
    --color-text-disabled: #777777;

    /* Borders */
    --color-border: #5a1f1f;
    --color-border-light: #777777;
    --color-border-bright: #c43333;
    --color-border-dark: #000000;

    /* Shadows */
    --color-shadow-main: #7e7e7e;
    --color-shadow-dark: #000000;

    /* Status */
    --color-success: #3f8f3f;
    --color-warning: #d0a030;
    --color-danger: #c43333;
    --color-info: #52656f;

    /* Links */
    --color-link: #ffb3b3;
    --color-link-hover: #ffffff;
    --color-link-active: #c43333;

    /* Buttons */
    --color-button-primary-bg: #52656f;
    --color-button-primary-hover: #3f5058;
    --color-button-primary-text: #ffffff;
    --color-button-outline-text: #c0c0c0;
    --color-button-outline-border: #c43333;

    /* Forms */
    --color-form-bg: #383838;
    --color-form-focus-bg: #2a1515;
    --color-form-border: #777777;
    --color-form-focus-border: #c43333;

    /* Tables */
    --color-table-bg: #181818;
    --color-table-row-hover: #2a1515;
    --color-table-border: #5a1f1f;

    /* Dropdowns */
    --color-dropdown-hover: #2a1515;
    --color-dropdown-active: #52656f;

    /* Radius */
    --radius-xs: 2px;
    --radius-sm: 5px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 18px;
    --radius-pill: 999px;

    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;

    /* Shadows */
    --shadow-main: 9px 9px 20px #7e7e7e;
    --shadow-dropdown:
        0 0 12px rgba(0, 0, 0, 0.75),
        0 0 6px rgba(196, 51, 51, 0.25);
    --shadow-card: 0 0 10px #000000;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-medium: 0.2s ease;
    --transition-slow: 0.35s ease;

    /* Font weights */
    --font-weight-normal: 400;
    --font-weight-bold: 700;

    /* Background Fog */
    --fog-opacity: 0.55;
    --fog-brightness: 1;
    --fog-contrast: 1;
    --fog-saturate: 1;

    --fog-color-primary: #5a1f1f;
    --fog-color-secondary: #2a1515;
    --fog-color-highlight: #7a2f2f;

    /* Z-index */
    --z-fog: -1;
    --z-content: 1;
    --z-dropdown: 500;
    --z-modal: 1000;
}

/* COMPLETE VTM/WTA THEMES 2-20 */


/* =========================================================
   THEME 2 — BLOOD CATHEDRAL
   ========================================================= */

body.theme-2 {

    --color-page-bg: #120909;
    --color-main-bg: #1b1010;
    --color-panel-bg: #241414;
    --color-panel-alt-bg: #301818;
    --color-panel-dark-bg: #000000;

    --color-navbar-bg: #1b1010;
    --color-footer-bg: #1b1010;
    --color-dropdown-bg: #241414;

    --color-input-bg: #1b1010;
    --color-input-focus-bg: #301818;
    --color-disabled-bg: #2a2a2a;

    --color-primary: #7a1f1f;
    --color-primary-hover: #a62d2d;

    --color-accent: #d4a85f;
    --color-accent-bright: #ffffff;
    --color-accent-soft: #d4a85f;

    --color-text: #f2dddd;
    --color-text-soft: #f2dddd;
    --color-text-bright: #ffffff;
    --color-text-white: #ffffff;
    --color-text-muted: #aaaaaa;
    --color-text-disabled: #666666;

    --color-border: #7a1f1f;
    --color-border-light: #d4a85f;
    --color-border-bright: #ffffff;
    --color-border-dark: #000000;

    --color-shadow-main: rgba(0, 0, 0, 0.95);
    --color-shadow-dark: rgba(0, 0, 0, 1);

    --color-success: #5ed08f;
    --color-warning: #ffd166;
    --color-danger: #ff5c7a;
    --color-info: #7a1f1f;

    --color-link: #d4a85f;
    --color-link-hover: #ffffff;
    --color-link-active: #a62d2d;

    --color-button-primary-bg: #7a1f1f;
    --color-button-primary-hover: #a62d2d;
    --color-button-primary-text: #ffffff;

    --color-button-outline-text: #f2dddd;
    --color-button-outline-border: #d4a85f;

    --color-form-bg: #1b1010;
    --color-form-focus-bg: #301818;
    --color-form-border: #7a1f1f;
    --color-form-focus-border: #d4a85f;

    --color-table-bg: #241414;
    --color-table-row-hover: #301818;
    --color-table-border: #7a1f1f;

    --color-dropdown-hover: #301818;
    --color-dropdown-active: #7a1f1f;

    --shadow-main:
        0 0 65px rgba(0, 0, 0, 0.95),
        0 0 24px #7a1f1f;

    --shadow-dropdown:
        0 0 30px rgba(0, 0, 0, 0.98),
        0 0 14px #d4a85f;

    --shadow-card:
        0 10px 32px rgba(0, 0, 0, 0.72);

    --fog-opacity: 0.45;
    --fog-brightness: 0.82;
    --fog-contrast: 1.25;
    --fog-saturate: 1.15;

    /* IMPORTANT: HARD HEX VALUES FOR VANTA */

    --fog-color-primary: #5a1f1f;
    --fog-color-secondary: #050505;
    --fog-color-highlight: #ffd27f;

    --transition-fast: 0.15s ease;
    --transition-medium: 0.25s ease;
    --transition-slow: 0.45s ease;

    --radius-xs: 2px;
    --radius-sm: 5px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 18px;
    --radius-pill: 999px;

    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;

    --font-weight-normal: 400;
    --font-weight-bold: 700;

    --z-fog: -1;
    --z-content: 1;
    --z-dropdown: 500;
    --z-modal: 1000;

    --color-form-text: #f7e2e2;
    --color-form-placeholder: #b89595;
    --color-form-label: #f5d18a;
    --color-form-help: #d7baba;

    --color-form-error-text: #ffdede;
    --color-form-error-bg: #301818;
    --color-form-error-border: #d4a85f;

    --color-checkbox-bg: #1b1010;
    --color-checkbox-border: #7a1f1f;
    --color-checkbox-checked: #d4a85f;
    --color-checkbox-focus: #ffe6a8;

    --color-select-arrow: #d4a85f;

    --color-form-disabled-bg: #221818;
    --color-form-disabled-text: #8f7474;
    --color-form-disabled-border: #4a2c2c;

    --color-file-bg: #241414;
    --color-file-border: #7a1f1f;
    --color-file-text: #f7e2e2;

    --color-range-track: #3b2020;
    --color-range-thumb: #d4a85f;

    --color-valid: #7adf9d;
    --color-invalid: #ff7b7b;
    --color-warning: #ffd166;

    /* Navbar Tokens */
    --color-navbar-text: #f2dddd;
    --color-navbar-text-hover: #ffffff;
    --color-navbar-text-active: #d4a85f;
    --color-navbar-text-muted: #b89595;

    --color-navbar-brand: #d4a85f;
    --color-navbar-brand-hover: #ffffff;

    --color-navbar-link: #f2dddd;
    --color-navbar-link-hover: #ffffff;
    --color-navbar-link-active: #d4a85f;

    --color-navbar-dropdown-bg: #241414;
    --color-navbar-dropdown-border: #7a1f1f;
    --color-navbar-dropdown-hover: #301818;
    --color-navbar-dropdown-active: #7a1f1f;

    --color-navbar-dropdown-text: #f2dddd;
    --color-navbar-dropdown-text-hover: #ffffff;
    --color-navbar-dropdown-text-active: #ffffff;

    --color-navbar-toggler: #d4a85f;
    --color-navbar-toggler-hover: #301818;
    --color-navbar-toggler-border: #7a1f1f;

    --color-navbar-avatar-border: #d4a85f;
    --color-navbar-avatar-shadow:
        0 0 10px rgba(212, 168, 95, 0.35);

    /* Dropdown Tokens */
    --color-dropdown-border: #7a1f1f;
    --color-dropdown-shadow:
        0 0 24px rgba(0, 0, 0, 0.75);

    --color-dropdown-text: #f2dddd;
    --color-dropdown-text-muted: #b89595;
    --color-dropdown-text-hover: #ffffff;
    --color-dropdown-text-active: #ffffff;

    --color-dropdown-selected: #d4a85f;

    --color-dropdown-header: #d4a85f;
    --color-dropdown-header-border: #5a1f1f;

    --color-dropdown-divider: #4a2c2c;

    --color-dropdown-icon: #d4a85f;
    --color-dropdown-icon-hover: #ffe6a8;

    --color-dropdown-focus-ring:
        0 0 0 0.2rem rgba(212, 168, 95, 0.24);

    --color-dropdown-disabled-bg: #221818;
    --color-dropdown-disabled-text: #7f6a6a;

    --color-dropdown-submenu-bg: #2b1616;
    --color-dropdown-submenu-border: #7a1f1f;
    --color-dropdown-submenu-hover: #381d1d;

    --color-form-bg-hover: #241414;
    --color-form-bg-focus: #301818;

    --color-form-border-hover: #a62d2d;
    --color-form-border-focus: #d4a85f;

    --color-form-focus-ring:
        rgba(212, 168, 95, 0.24);

    --color-form-autofill-bg: #301818;
    --color-form-autofill-text: #ffffff;

    --color-input-group-bg: #241414;
    --color-input-group-border: #7a1f1f;
    --color-input-group-text: #f5d18a;

    --color-form-readonly-bg: #221818;
    --color-form-readonly-border: #4a2c2c;

    --color-fieldset-border: #4a2c2c;
    --color-legend-text: #f5d18a;

}


/* =========================================================
   THEME 3 — NEON MASQUERADE
   ========================================================= */

body.theme-3 {

    --color-page-bg: #081018;
    --color-main-bg: #0d1621;
    --color-panel-bg: #121f2e;
    --color-panel-alt-bg: #1b2940;
    --color-panel-dark-bg: #000000;

    --color-navbar-bg: #0d1621;
    --color-footer-bg: #0d1621;
    --color-dropdown-bg: #121f2e;

    --color-input-bg: #0d1621;
    --color-input-focus-bg: #1b2940;
    --color-disabled-bg: #2a2a2a;

    --color-primary: #00d4ff;
    --color-primary-hover: #7cecff;

    --color-accent: #ff2f92;
    --color-accent-bright: #ffffff;
    --color-accent-soft: #ff2f92;

    --color-text: #d8f5ff;
    --color-text-soft: #d8f5ff;
    --color-text-bright: #ffffff;
    --color-text-white: #ffffff;
    --color-text-muted: #aaaaaa;
    --color-text-disabled: #666666;

    --color-border: #00d4ff;
    --color-border-light: #ff2f92;
    --color-border-bright: #ffffff;
    --color-border-dark: #000000;

    --color-shadow-main: rgba(0, 0, 0, 0.95);
    --color-shadow-dark: rgba(0, 0, 0, 1);

    --color-success: #5ed08f;
    --color-warning: #ffd166;
    --color-danger: #ff5c7a;
    --color-info: #00d4ff;

    --color-link: #ff2f92;
    --color-link-hover: #ffffff;
    --color-link-active: #7cecff;

    --color-button-primary-bg: #00d4ff;
    --color-button-primary-hover: #7cecff;
    --color-button-primary-text: #ffffff;

    --color-button-outline-text: #d8f5ff;
    --color-button-outline-border: #ff2f92;

    --color-form-bg: #0d1621;
    --color-form-focus-bg: #1b2940;
    --color-form-border: #00d4ff;
    --color-form-focus-border: #ff2f92;

    --color-table-bg: #121f2e;
    --color-table-row-hover: #1b2940;
    --color-table-border: #00d4ff;

    --color-dropdown-hover: #1b2940;
    --color-dropdown-active: #00d4ff;

    --shadow-main:
        0 0 65px rgba(0, 0, 0, 0.95),
        0 0 24px #00d4ff;

    --shadow-dropdown:
        0 0 30px rgba(0, 0, 0, 0.98),
        0 0 14px #ff2f92;

    --shadow-card:
        0 10px 32px rgba(0, 0, 0, 0.72);

    --fog-opacity: 0.45;
    --fog-brightness: 0.82;
    --fog-contrast: 1.25;
    --fog-saturate: 1.15;

    /* IMPORTANT: HARD HEX VALUES FOR VANTA */

    --fog-color-primary: #00d4ff;
    --fog-color-secondary: #140018;
    --fog-color-highlight: #ff82c1;

    --transition-fast: 0.15s ease;
    --transition-medium: 0.25s ease;
    --transition-slow: 0.45s ease;

    --radius-xs: 2px;
    --radius-sm: 5px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 18px;
    --radius-pill: 999px;

    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;

    --font-weight-normal: 400;
    --font-weight-bold: 700;

    --z-fog: -1;
    --z-content: 1;
    --z-dropdown: 500;
    --z-modal: 1000;

    --color-form-text: #d8f5ff;
    --color-form-placeholder: #6db4c8;
    --color-form-label: #ff82c1;
    --color-form-help: #9adcec;

    --color-form-error-text: #ffd0e6;
    --color-form-error-bg: #25111d;
    --color-form-error-border: #ff2f92;

    --color-checkbox-bg: #0f1a24;
    --color-checkbox-border: #00d4ff;
    --color-checkbox-checked: #ff2f92;
    --color-checkbox-focus: #5de7ff;

    --color-select-arrow: #00d4ff;

    --color-form-disabled-bg: #18222d;
    --color-form-disabled-text: #5d7d8a;
    --color-form-disabled-border: #29404c;

    --color-file-bg: #101a22;
    --color-file-border: #00d4ff;
    --color-file-text: #d8f5ff;

    --color-range-track: #163040;
    --color-range-thumb: #ff2f92;

    --color-valid: #5dffb3;
    --color-invalid: #ff5fa2;
    --color-warning: #ffd166;

    /* Navbar Tokens */
    --color-navbar-text: #d8f5ff;
    --color-navbar-text-hover: #ffffff;
    --color-navbar-text-active: #ff2f92;
    --color-navbar-text-muted: #aaaaaa;

    --color-navbar-brand: #ff2f92;
    --color-navbar-brand-hover: #ffffff;

    --color-navbar-link: #d8f5ff;
    --color-navbar-link-hover: #ffffff;
    --color-navbar-link-active: #ff2f92;

    --color-navbar-dropdown-bg: #121f2e;
    --color-navbar-dropdown-border: #00d4ff;
    --color-navbar-dropdown-hover: #1b2940;
    --color-navbar-dropdown-active: #00d4ff;

    --color-navbar-dropdown-text: #d8f5ff;
    --color-navbar-dropdown-text-hover: #ffffff;
    --color-navbar-dropdown-text-active: #ffffff;

    --color-navbar-toggler: #ff2f92;
    --color-navbar-toggler-hover: #1b2940;
    --color-navbar-toggler-border: #00d4ff;

    --color-navbar-avatar-border: #ff2f92;
    --color-navbar-avatar-shadow:
        0 0 10px #ff2f9255;

    /* Dropdown Tokens */
    --color-dropdown-border: #00d4ff;

    --color-dropdown-shadow:
        0 0 24px rgba(0, 0, 0, 0.75);

    --color-dropdown-text: #d8f5ff;
    --color-dropdown-text-muted: #aaaaaa;
    --color-dropdown-text-hover: #ffffff;
    --color-dropdown-text-active: #ffffff;

    --color-dropdown-selected: #ff2f92;

    --color-dropdown-header: #ff2f92;
    --color-dropdown-header-border: #00d4ff;

    --color-dropdown-divider: #00d4ff;

    --color-dropdown-icon: #ff2f92;
    --color-dropdown-icon-hover: #ffffff;

    --color-dropdown-focus-ring:
        0 0 0 0.2rem #ff2f9244;

    --color-dropdown-disabled-bg: #222222;
    --color-dropdown-disabled-text: #777777;

    --color-dropdown-submenu-bg: #121f2e;
    --color-dropdown-submenu-border: #00d4ff;
    --color-dropdown-submenu-hover: #1b2940;

    --color-form-bg-hover: #241414;
    --color-form-bg-focus: #301818;

    --color-form-border-hover: #a62d2d;
    --color-form-border-focus: #d4a85f;

    --color-form-focus-ring:
        rgba(212, 168, 95, 0.24);

    --color-form-autofill-bg: #301818;
    --color-form-autofill-text: #ffffff;

    --color-input-group-bg: #241414;
    --color-input-group-border: #7a1f1f;
    --color-input-group-text: #f5d18a;

    --color-form-readonly-bg: #221818;
    --color-form-readonly-border: #4a2c2c;

    --color-fieldset-border: #4a2c2c;
    --color-legend-text: #f5d18a;
}


/* =========================================================
   THEME 4 — MOONLIT UMBRA
   ========================================================= */

body.theme-4 {

    --color-page-bg: #0d1412;
    --color-main-bg: #111c19;
    --color-panel-bg: #172722;
    --color-panel-alt-bg: #1f352f;
    --color-panel-dark-bg: #000000;

    --color-navbar-bg: #111c19;
    --color-footer-bg: #111c19;
    --color-dropdown-bg: #172722;

    --color-input-bg: #111c19;
    --color-input-focus-bg: #1f352f;
    --color-disabled-bg: #2a2a2a;

    --color-primary: #6fd4b1;
    --color-primary-hover: #b7f0db;

    --color-accent: #d9f6ff;
    --color-accent-bright: #ffffff;
    --color-accent-soft: #d9f6ff;

    --color-text: #e2fff6;
    --color-text-soft: #e2fff6;
    --color-text-bright: #ffffff;
    --color-text-white: #ffffff;
    --color-text-muted: #aaaaaa;
    --color-text-disabled: #666666;

    --color-border: #6fd4b1;
    --color-border-light: #d9f6ff;
    --color-border-bright: #ffffff;
    --color-border-dark: #000000;

    --color-shadow-main: rgba(0, 0, 0, 0.95);
    --color-shadow-dark: rgba(0, 0, 0, 1);

    --color-success: #5ed08f;
    --color-warning: #ffd166;
    --color-danger: #ff5c7a;
    --color-info: #6fd4b1;

    --color-link: #d9f6ff;
    --color-link-hover: #ffffff;
    --color-link-active: #b7f0db;

    --color-button-primary-bg: #6fd4b1;
    --color-button-primary-hover: #b7f0db;
    --color-button-primary-text: #ffffff;

    --color-button-outline-text: #e2fff6;
    --color-button-outline-border: #d9f6ff;

    --color-form-bg: #111c19;
    --color-form-focus-bg: #1f352f;
    --color-form-border: #6fd4b1;
    --color-form-focus-border: #d9f6ff;

    --color-table-bg: #172722;
    --color-table-row-hover: #1f352f;
    --color-table-border: #6fd4b1;

    --color-dropdown-hover: #1f352f;
    --color-dropdown-active: #6fd4b1;

    --shadow-main:
        0 0 65px rgba(0, 0, 0, 0.95),
        0 0 24px #6fd4b1;

    --shadow-dropdown:
        0 0 30px rgba(0, 0, 0, 0.98),
        0 0 14px #d9f6ff;

    --shadow-card:
        0 10px 32px rgba(0, 0, 0, 0.72);

    --fog-opacity: 0.45;
    --fog-brightness: 0.82;
    --fog-contrast: 1.25;
    --fog-saturate: 1.15;

    /* IMPORTANT: HARD HEX VALUES FOR VANTA */

    --fog-color-primary: #4e8f7d;
    --fog-color-secondary: #08100d;
    --fog-color-highlight: #d9f6ff;

    --transition-fast: 0.15s ease;
    --transition-medium: 0.25s ease;
    --transition-slow: 0.45s ease;

    --radius-xs: 2px;
    --radius-sm: 5px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 18px;
    --radius-pill: 999px;

    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;

    --font-weight-normal: 400;
    --font-weight-bold: 700;

    --z-fog: -1;
    --z-content: 1;
    --z-dropdown: 500;
    --z-modal: 1000;

    --color-form-text: #e2fff6;
    --color-form-placeholder: #87b5a5;
    --color-form-label: #d9f6ff;
    --color-form-help: #b6ddd0;

    --color-form-error-text: #ffe3e3;
    --color-form-error-bg: #1f2a25;
    --color-form-error-border: #8fd9bf;

    --color-checkbox-bg: #14201c;
    --color-checkbox-border: #4e8f7d;
    --color-checkbox-checked: #8fd9bf;
    --color-checkbox-focus: #d9f6ff;

    --color-select-arrow: #8fd9bf;

    --color-form-disabled-bg: #1a2622;
    --color-form-disabled-text: #738f84;
    --color-form-disabled-border: #39564d;

    --color-file-bg: #16231f;
    --color-file-border: #4e8f7d;
    --color-file-text: #e2fff6;

    --color-range-track: #274038;
    --color-range-thumb: #8fd9bf;

    --color-valid: #8fe3aa;
    --color-invalid: #ff8f8f;
    --color-warning: #ffe08a;

    /* Navbar Tokens */
    --color-navbar-text: #e2fff6;
    --color-navbar-text-hover: #ffffff;
    --color-navbar-text-active: #d9f6ff;
    --color-navbar-text-muted: #aaaaaa;

    --color-navbar-brand: #d9f6ff;
    --color-navbar-brand-hover: #ffffff;

    --color-navbar-link: #e2fff6;
    --color-navbar-link-hover: #ffffff;
    --color-navbar-link-active: #d9f6ff;

    --color-navbar-dropdown-bg: #172722;
    --color-navbar-dropdown-border: #6fd4b1;
    --color-navbar-dropdown-hover: #1f352f;
    --color-navbar-dropdown-active: #6fd4b1;

    --color-navbar-dropdown-text: #e2fff6;
    --color-navbar-dropdown-text-hover: #ffffff;
    --color-navbar-dropdown-text-active: #ffffff;

    --color-navbar-toggler: #d9f6ff;
    --color-navbar-toggler-hover: #1f352f;
    --color-navbar-toggler-border: #6fd4b1;

    --color-navbar-avatar-border: #d9f6ff;
    --color-navbar-avatar-shadow:
        0 0 10px #d9f6ff55;

    /* Dropdown Tokens */
    --color-dropdown-border: #6fd4b1;

    --color-dropdown-shadow:
        0 0 24px rgba(0, 0, 0, 0.75);

    --color-dropdown-text: #e2fff6;
    --color-dropdown-text-muted: #aaaaaa;
    --color-dropdown-text-hover: #ffffff;
    --color-dropdown-text-active: #ffffff;

    --color-dropdown-selected: #d9f6ff;

    --color-dropdown-header: #d9f6ff;
    --color-dropdown-header-border: #6fd4b1;

    --color-dropdown-divider: #6fd4b1;

    --color-dropdown-icon: #d9f6ff;
    --color-dropdown-icon-hover: #ffffff;

    --color-dropdown-focus-ring:
        0 0 0 0.2rem #d9f6ff44;

    --color-dropdown-disabled-bg: #222222;
    --color-dropdown-disabled-text: #777777;

    --color-dropdown-submenu-bg: #172722;
    --color-dropdown-submenu-border: #6fd4b1;
    --color-dropdown-submenu-hover: #1f352f;

        --color-form-bg-hover: #241414;
    --color-form-bg-focus: #301818;

    --color-form-border-hover: #a62d2d;
    --color-form-border-focus: #d4a85f;

    --color-form-focus-ring:
        rgba(212, 168, 95, 0.24);

    --color-form-autofill-bg: #301818;
    --color-form-autofill-text: #ffffff;

    --color-input-group-bg: #241414;
    --color-input-group-border: #7a1f1f;
    --color-input-group-text: #f5d18a;

    --color-form-readonly-bg: #221818;
    --color-form-readonly-border: #4a2c2c;

    --color-fieldset-border: #4a2c2c;
    --color-legend-text: #f5d18a;
}


/* =========================================================
   THEME 5 — TZIMISCE FLESHCRAFT
   ========================================================= */

body.theme-5 {

    --color-page-bg: #160b10;
    --color-main-bg: #211017;
    --color-panel-bg: #2d1620;
    --color-panel-alt-bg: #3d1c29;
    --color-panel-dark-bg: #000000;

    --color-navbar-bg: #211017;
    --color-footer-bg: #211017;
    --color-dropdown-bg: #2d1620;

    --color-input-bg: #211017;
    --color-input-focus-bg: #3d1c29;
    --color-disabled-bg: #2a2a2a;

    --color-primary: #a13d66;
    --color-primary-hover: #d65f8e;

    --color-accent: #ff8ca8;
    --color-accent-bright: #ffffff;
    --color-accent-soft: #ff8ca8;

    --color-text: #ffe6ee;
    --color-text-soft: #ffe6ee;
    --color-text-bright: #ffffff;
    --color-text-white: #ffffff;
    --color-text-muted: #aaaaaa;
    --color-text-disabled: #666666;

    --color-border: #a13d66;
    --color-border-light: #ff8ca8;
    --color-border-bright: #ffffff;
    --color-border-dark: #000000;

    --color-shadow-main: rgba(0, 0, 0, 0.95);
    --color-shadow-dark: rgba(0, 0, 0, 1);

    --color-success: #5ed08f;
    --color-warning: #ffd166;
    --color-danger: #ff5c7a;
    --color-info: #a13d66;

    --color-link: #ff8ca8;
    --color-link-hover: #ffffff;
    --color-link-active: #d65f8e;

    --color-button-primary-bg: #a13d66;
    --color-button-primary-hover: #d65f8e;
    --color-button-primary-text: #ffffff;

    --color-button-outline-text: #ffe6ee;
    --color-button-outline-border: #ff8ca8;

    --color-form-bg: #211017;
    --color-form-focus-bg: #3d1c29;
    --color-form-border: #a13d66;
    --color-form-focus-border: #ff8ca8;

    --color-table-bg: #2d1620;
    --color-table-row-hover: #3d1c29;
    --color-table-border: #a13d66;

    --color-dropdown-hover: #3d1c29;
    --color-dropdown-active: #a13d66;

    --shadow-main:
        0 0 65px rgba(0, 0, 0, 0.95),
        0 0 24px #a13d66;

    --shadow-dropdown:
        0 0 30px rgba(0, 0, 0, 0.98),
        0 0 14px #ff8ca8;

    --shadow-card:
        0 10px 32px rgba(0, 0, 0, 0.72);

    --fog-opacity: 0.45;
    --fog-brightness: 0.82;
    --fog-contrast: 1.25;
    --fog-saturate: 1.15;

    /* IMPORTANT: HARD HEX VALUES FOR VANTA */

    --fog-color-primary: #7a304d;
    --fog-color-secondary: #140008;
    --fog-color-highlight: #ffc1d2;

    --transition-fast: 0.15s ease;
    --transition-medium: 0.25s ease;
    --transition-slow: 0.45s ease;

    --radius-xs: 2px;
    --radius-sm: 5px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 18px;
    --radius-pill: 999px;

    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;

    --font-weight-normal: 400;
    --font-weight-bold: 700;

    --z-fog: -1;
    --z-content: 1;
    --z-dropdown: 500;
    --z-modal: 1000;

    --color-form-text: #ffe6ee;
    --color-form-placeholder: #c793aa;
    --color-form-label: #ffb8cb;
    --color-form-help: #e8bccb;

    --color-form-error-text: #ffd8e5;
    --color-form-error-bg: #351822;
    --color-form-error-border: #ff8ca8;

    --color-checkbox-bg: #251019;
    --color-checkbox-border: #a13d66;
    --color-checkbox-checked: #ff8ca8;
    --color-checkbox-focus: #ffc7d7;

    --color-select-arrow: #ff8ca8;

    --color-form-disabled-bg: #2b1720;
    --color-form-disabled-text: #9b7282;
    --color-form-disabled-border: #5a3042;

    --color-file-bg: #24111a;
    --color-file-border: #a13d66;
    --color-file-text: #ffe6ee;

    --color-range-track: #4a2333;
    --color-range-thumb: #ff8ca8;

    --color-valid: #8fe0b2;
    --color-invalid: #ff7098;
    --color-warning: #ffcb7d;

    /* Navbar Tokens */
    --color-navbar-text: #ffe6ee;
    --color-navbar-text-hover: #ffffff;
    --color-navbar-text-active: #ff8ca8;
    --color-navbar-text-muted: #aaaaaa;

    --color-navbar-brand: #ff8ca8;
    --color-navbar-brand-hover: #ffffff;

    --color-navbar-link: #ffe6ee;
    --color-navbar-link-hover: #ffffff;
    --color-navbar-link-active: #ff8ca8;

    --color-navbar-dropdown-bg: #2d1620;
    --color-navbar-dropdown-border: #a13d66;
    --color-navbar-dropdown-hover: #3d1c29;
    --color-navbar-dropdown-active: #a13d66;

    --color-navbar-dropdown-text: #ffe6ee;
    --color-navbar-dropdown-text-hover: #ffffff;
    --color-navbar-dropdown-text-active: #ffffff;

    --color-navbar-toggler: #ff8ca8;
    --color-navbar-toggler-hover: #3d1c29;
    --color-navbar-toggler-border: #a13d66;

    --color-navbar-avatar-border: #ff8ca8;
    --color-navbar-avatar-shadow:
        0 0 10px #ff8ca855;

    /* Dropdown Tokens */
    --color-dropdown-border: #a13d66;

    --color-dropdown-shadow:
        0 0 24px rgba(0, 0, 0, 0.75);

    --color-dropdown-text: #ffe6ee;
    --color-dropdown-text-muted: #aaaaaa;
    --color-dropdown-text-hover: #ffffff;
    --color-dropdown-text-active: #ffffff;

    --color-dropdown-selected: #ff8ca8;

    --color-dropdown-header: #ff8ca8;
    --color-dropdown-header-border: #a13d66;

    --color-dropdown-divider: #a13d66;

    --color-dropdown-icon: #ff8ca8;
    --color-dropdown-icon-hover: #ffffff;

    --color-dropdown-focus-ring:
        0 0 0 0.2rem #ff8ca844;

    --color-dropdown-disabled-bg: #222222;
    --color-dropdown-disabled-text: #777777;

    --color-dropdown-submenu-bg: #2d1620;
    --color-dropdown-submenu-border: #a13d66;
    --color-dropdown-submenu-hover: #3d1c29;

        --color-form-bg-hover: #241414;
    --color-form-bg-focus: #301818;

    --color-form-border-hover: #a62d2d;
    --color-form-border-focus: #d4a85f;

    --color-form-focus-ring:
        rgba(212, 168, 95, 0.24);

    --color-form-autofill-bg: #301818;
    --color-form-autofill-text: #ffffff;

    --color-input-group-bg: #241414;
    --color-input-group-border: #7a1f1f;
    --color-input-group-text: #f5d18a;

    --color-form-readonly-bg: #221818;
    --color-form-readonly-border: #4a2c2c;

    --color-fieldset-border: #4a2c2c;
    --color-legend-text: #f5d18a;
}


/* =========================================================
   THEME 6 — RUST & BONE
   ========================================================= */

body.theme-6 {

    --color-page-bg: #17110d;
    --color-main-bg: #221711;
    --color-panel-bg: #2f1e16;
    --color-panel-alt-bg: #41271c;
    --color-panel-dark-bg: #000000;

    --color-navbar-bg: #221711;
    --color-footer-bg: #221711;
    --color-dropdown-bg: #2f1e16;

    --color-input-bg: #221711;
    --color-input-focus-bg: #41271c;
    --color-disabled-bg: #2a2a2a;

    --color-primary: #c46b3a;
    --color-primary-hover: #ff9b5c;

    --color-accent: #ffb074;
    --color-accent-bright: #ffffff;
    --color-accent-soft: #ffb074;

    --color-text: #ffe8d8;
    --color-text-soft: #ffe8d8;
    --color-text-bright: #ffffff;
    --color-text-white: #ffffff;
    --color-text-muted: #aaaaaa;
    --color-text-disabled: #666666;

    --color-border: #c46b3a;
    --color-border-light: #ffb074;
    --color-border-bright: #ffffff;
    --color-border-dark: #000000;

    --color-shadow-main: rgba(0, 0, 0, 0.95);
    --color-shadow-dark: rgba(0, 0, 0, 1);

    --color-success: #5ed08f;
    --color-warning: #ffd166;
    --color-danger: #ff5c7a;
    --color-info: #c46b3a;

    --color-link: #ffb074;
    --color-link-hover: #ffffff;
    --color-link-active: #ff9b5c;

    --color-button-primary-bg: #c46b3a;
    --color-button-primary-hover: #ff9b5c;
    --color-button-primary-text: #ffffff;

    --color-button-outline-text: #ffe8d8;
    --color-button-outline-border: #ffb074;

    --color-form-bg: #221711;
    --color-form-focus-bg: #41271c;
    --color-form-border: #c46b3a;
    --color-form-focus-border: #ffb074;

    --color-table-bg: #2f1e16;
    --color-table-row-hover: #41271c;
    --color-table-border: #c46b3a;

    --color-dropdown-hover: #41271c;
    --color-dropdown-active: #c46b3a;

    --shadow-main:
        0 0 65px rgba(0, 0, 0, 0.95),
        0 0 24px #c46b3a;

    --shadow-dropdown:
        0 0 30px rgba(0, 0, 0, 0.98),
        0 0 14px #ffb074;

    --shadow-card:
        0 10px 32px rgba(0, 0, 0, 0.72);

    --fog-opacity: 0.45;
    --fog-brightness: 0.82;
    --fog-contrast: 1.25;
    --fog-saturate: 1.15;

    /* IMPORTANT: HARD HEX VALUES FOR VANTA */

    --fog-color-primary: #8f4d24;
    --fog-color-secondary: #120804;
    --fog-color-highlight: #ffd0a1;

    --transition-fast: 0.15s ease;
    --transition-medium: 0.25s ease;
    --transition-slow: 0.45s ease;

    --radius-xs: 2px;
    --radius-sm: 5px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 18px;
    --radius-pill: 999px;

    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;

    --font-weight-normal: 400;
    --font-weight-bold: 700;

    --z-fog: -1;
    --z-content: 1;
    --z-dropdown: 500;
    --z-modal: 1000;

    --color-form-text: #ffe8d8;
    --color-form-placeholder: #c7a188;
    --color-form-label: #ffcfaa;
    --color-form-help: #e0c1ac;

    --color-form-error-text: #ffd9c9;
    --color-form-error-bg: #352117;
    --color-form-error-border: #ff9b5c;

    --color-checkbox-bg: #24170f;
    --color-checkbox-border: #c46b3a;
    --color-checkbox-checked: #ffb074;
    --color-checkbox-focus: #ffd1ad;

    --color-select-arrow: #ffb074;

    --color-form-disabled-bg: #2a1c15;
    --color-form-disabled-text: #9b7d6b;
    --color-form-disabled-border: #5f4333;

    --color-file-bg: #23160f;
    --color-file-border: #c46b3a;
    --color-file-text: #ffe8d8;

    --color-range-track: #4a2e22;
    --color-range-thumb: #ffb074;

    --color-valid: #8fdf9f;
    --color-invalid: #ff8b6b;
    --color-warning: #ffd27a;

    /* Navbar Tokens */
    --color-navbar-text: #ffe8d8;
    --color-navbar-text-hover: #ffffff;
    --color-navbar-text-active: #ffb074;
    --color-navbar-text-muted: #aaaaaa;

    --color-navbar-brand: #ffb074;
    --color-navbar-brand-hover: #ffffff;

    --color-navbar-link: #ffe8d8;
    --color-navbar-link-hover: #ffffff;
    --color-navbar-link-active: #ffb074;

    --color-navbar-dropdown-bg: #2f1e16;
    --color-navbar-dropdown-border: #c46b3a;
    --color-navbar-dropdown-hover: #41271c;
    --color-navbar-dropdown-active: #c46b3a;

    --color-navbar-dropdown-text: #ffe8d8;
    --color-navbar-dropdown-text-hover: #ffffff;
    --color-navbar-dropdown-text-active: #ffffff;

    --color-navbar-toggler: #ffb074;
    --color-navbar-toggler-hover: #41271c;
    --color-navbar-toggler-border: #c46b3a;

    --color-navbar-avatar-border: #ffb074;
    --color-navbar-avatar-shadow:
        0 0 10px #ffb07455;

    /* Dropdown Tokens */
    --color-dropdown-border: #c46b3a;

    --color-dropdown-shadow:
        0 0 24px rgba(0, 0, 0, 0.75);

    --color-dropdown-text: #ffe8d8;
    --color-dropdown-text-muted: #aaaaaa;
    --color-dropdown-text-hover: #ffffff;
    --color-dropdown-text-active: #ffffff;

    --color-dropdown-selected: #ffb074;

    --color-dropdown-header: #ffb074;
    --color-dropdown-header-border: #c46b3a;

    --color-dropdown-divider: #c46b3a;

    --color-dropdown-icon: #ffb074;
    --color-dropdown-icon-hover: #ffffff;

    --color-dropdown-focus-ring:
        0 0 0 0.2rem #ffb07444;

    --color-dropdown-disabled-bg: #222222;
    --color-dropdown-disabled-text: #777777;

    --color-dropdown-submenu-bg: #2f1e16;
    --color-dropdown-submenu-border: #c46b3a;
    --color-dropdown-submenu-hover: #41271c;

    --color-form-bg-hover: #241414;
    --color-form-bg-focus: #301818;

    --color-form-border-hover: #a62d2d;
    --color-form-border-focus: #d4a85f;

    --color-form-focus-ring:
        rgba(212, 168, 95, 0.24);

    --color-form-autofill-bg: #301818;
    --color-form-autofill-text: #ffffff;

    --color-input-group-bg: #241414;
    --color-input-group-border: #7a1f1f;
    --color-input-group-text: #f5d18a;

    --color-form-readonly-bg: #221818;
    --color-form-readonly-border: #4a2c2c;

    --color-fieldset-border: #4a2c2c;
    --color-legend-text: #f5d18a;
}


/* =========================================================
   THEME 7 — OBSIDIAN MONASTERY
   ========================================================= */

body.theme-7 {

    --color-page-bg: #050505;
    --color-main-bg: #0a0a0a;
    --color-panel-bg: #101010;
    --color-panel-alt-bg: #171717;
    --color-panel-dark-bg: #000000;

    --color-navbar-bg: #0a0a0a;
    --color-footer-bg: #0a0a0a;
    --color-dropdown-bg: #101010;

    --color-input-bg: #0a0a0a;
    --color-input-focus-bg: #171717;
    --color-disabled-bg: #2a2a2a;

    --color-primary: #888888;
    --color-primary-hover: #d8d8d8;

    --color-accent: #f0f0f0;
    --color-accent-bright: #ffffff;
    --color-accent-soft: #f0f0f0;

    --color-text: #e8e8e8;
    --color-text-soft: #e8e8e8;
    --color-text-bright: #ffffff;
    --color-text-white: #ffffff;
    --color-text-muted: #aaaaaa;
    --color-text-disabled: #666666;

    --color-border: #888888;
    --color-border-light: #f0f0f0;
    --color-border-bright: #ffffff;
    --color-border-dark: #000000;

    --color-shadow-main: rgba(0, 0, 0, 0.95);
    --color-shadow-dark: rgba(0, 0, 0, 1);

    --color-success: #5ed08f;
    --color-warning: #ffd166;
    --color-danger: #ff5c7a;
    --color-info: #888888;

    --color-link: #f0f0f0;
    --color-link-hover: #ffffff;
    --color-link-active: #d8d8d8;

    --color-button-primary-bg: #888888;
    --color-button-primary-hover: #d8d8d8;
    --color-button-primary-text: #ffffff;

    --color-button-outline-text: #e8e8e8;
    --color-button-outline-border: #f0f0f0;

    --color-form-bg: #0a0a0a;
    --color-form-focus-bg: #171717;
    --color-form-border: #888888;
    --color-form-focus-border: #f0f0f0;

    --color-table-bg: #101010;
    --color-table-row-hover: #171717;
    --color-table-border: #888888;

    --color-dropdown-hover: #171717;
    --color-dropdown-active: #888888;

    --shadow-main:
        0 0 65px rgba(0, 0, 0, 0.95),
        0 0 24px #888888;

    --shadow-dropdown:
        0 0 30px rgba(0, 0, 0, 0.98),
        0 0 14px #f0f0f0;

    --shadow-card:
        0 10px 32px rgba(0, 0, 0, 0.72);

    --fog-opacity: 0.45;
    --fog-brightness: 0.82;
    --fog-contrast: 1.25;
    --fog-saturate: 1.15;

    /* IMPORTANT: HARD HEX VALUES FOR VANTA */

    --fog-color-primary: #444444;
    --fog-color-secondary: #000000;
    --fog-color-highlight: #ffffff;

    --transition-fast: 0.15s ease;
    --transition-medium: 0.25s ease;
    --transition-slow: 0.45s ease;

    --radius-xs: 2px;
    --radius-sm: 5px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 18px;
    --radius-pill: 999px;

    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;

    --font-weight-normal: 400;
    --font-weight-bold: 700;

    --z-fog: -1;
    --z-content: 1;
    --z-dropdown: 500;
    --z-modal: 1000;

    --color-form-text: #f2f2f2;
    --color-form-placeholder: #777777;
    --color-form-label: #ffffff;
    --color-form-help: #bbbbbb;

    --color-form-error-text: #ffffff;
    --color-form-error-bg: #1a1a1a;
    --color-form-error-border: #aaaaaa;

    --color-checkbox-bg: #121212;
    --color-checkbox-border: #555555;
    --color-checkbox-checked: #f0f0f0;
    --color-checkbox-focus: #ffffff;

    --color-select-arrow: #cccccc;

    --color-form-disabled-bg: #1c1c1c;
    --color-form-disabled-text: #666666;
    --color-form-disabled-border: #3d3d3d;

    --color-file-bg: #141414;
    --color-file-border: #444444;
    --color-file-text: #f2f2f2;

    --color-range-track: #333333;
    --color-range-thumb: #ffffff;

    --color-valid: #9fe3b0;
    --color-invalid: #ff9a9a;
    --color-warning: #ffe08a;

    /* Navbar Tokens */
    --color-navbar-text: #f2f2f2;
    --color-navbar-text-hover: #ffffff;
    --color-navbar-text-active: #f0f0f0;
    --color-navbar-text-muted: #aaaaaa;

    --color-navbar-brand: #f0f0f0;
    --color-navbar-brand-hover: #ffffff;

    --color-navbar-link: #f2f2f2;
    --color-navbar-link-hover: #ffffff;
    --color-navbar-link-active: #f0f0f0;

    --color-navbar-dropdown-bg: #101010;
    --color-navbar-dropdown-border: #888888;
    --color-navbar-dropdown-hover: #171717;
    --color-navbar-dropdown-active: #888888;

    --color-navbar-dropdown-text: #f2f2f2;
    --color-navbar-dropdown-text-hover: #ffffff;
    --color-navbar-dropdown-text-active: #ffffff;

    --color-navbar-toggler: #f0f0f0;
    --color-navbar-toggler-hover: #171717;
    --color-navbar-toggler-border: #888888;

    --color-navbar-avatar-border: #f0f0f0;
    --color-navbar-avatar-shadow:
        0 0 10px #f0f0f055;

    /* Dropdown Tokens */
    --color-dropdown-border: #888888;

    --color-dropdown-shadow:
        0 0 24px rgba(0, 0, 0, 0.75);

    --color-dropdown-text: #f2f2f2;
    --color-dropdown-text-muted: #aaaaaa;
    --color-dropdown-text-hover: #ffffff;
    --color-dropdown-text-active: #ffffff;

    --color-dropdown-selected: #f0f0f0;

    --color-dropdown-header: #f0f0f0;
    --color-dropdown-header-border: #888888;

    --color-dropdown-divider: #888888;

    --color-dropdown-icon: #f0f0f0;
    --color-dropdown-icon-hover: #ffffff;

    --color-dropdown-focus-ring:
        0 0 0 0.2rem #f0f0f044;

    --color-dropdown-disabled-bg: #222222;
    --color-dropdown-disabled-text: #777777;

    --color-dropdown-submenu-bg: #101010;
    --color-dropdown-submenu-border: #888888;
    --color-dropdown-submenu-hover: #171717;

        --color-form-bg-hover: #241414;
    --color-form-bg-focus: #301818;

    --color-form-border-hover: #a62d2d;
    --color-form-border-focus: #d4a85f;

    --color-form-focus-ring:
        rgba(212, 168, 95, 0.24);

    --color-form-autofill-bg: #301818;
    --color-form-autofill-text: #ffffff;

    --color-input-group-bg: #241414;
    --color-input-group-border: #7a1f1f;
    --color-input-group-text: #f5d18a;

    --color-form-readonly-bg: #221818;
    --color-form-readonly-border: #4a2c2c;

    --color-fieldset-border: #4a2c2c;
    --color-legend-text: #f5d18a;
}


/* =========================================================
   THEME 8 — ROSE COURT
   ========================================================= */

body.theme-8 {

    --color-page-bg: #190d12;
    --color-main-bg: #24131a;
    --color-panel-bg: #311b24;
    --color-panel-alt-bg: #442430;
    --color-panel-dark-bg: #000000;

    --color-navbar-bg: #24131a;
    --color-footer-bg: #24131a;
    --color-dropdown-bg: #311b24;

    --color-input-bg: #24131a;
    --color-input-focus-bg: #442430;
    --color-disabled-bg: #2a2a2a;

    --color-primary: #d04f82;
    --color-primary-hover: #ff85b2;

    --color-accent: #ffd0de;
    --color-accent-bright: #ffffff;
    --color-accent-soft: #ffd0de;

    --color-text: #ffeaf0;
    --color-text-soft: #ffeaf0;
    --color-text-bright: #ffffff;
    --color-text-white: #ffffff;
    --color-text-muted: #aaaaaa;
    --color-text-disabled: #666666;

    --color-border: #d04f82;
    --color-border-light: #ffd0de;
    --color-border-bright: #ffffff;
    --color-border-dark: #000000;

    --color-shadow-main: rgba(0, 0, 0, 0.95);
    --color-shadow-dark: rgba(0, 0, 0, 1);

    --color-success: #5ed08f;
    --color-warning: #ffd166;
    --color-danger: #ff5c7a;
    --color-info: #d04f82;

    --color-link: #ffd0de;
    --color-link-hover: #ffffff;
    --color-link-active: #ff85b2;

    --color-button-primary-bg: #d04f82;
    --color-button-primary-hover: #ff85b2;
    --color-button-primary-text: #ffffff;

    --color-button-outline-text: #ffeaf0;
    --color-button-outline-border: #ffd0de;

    --color-form-bg: #24131a;
    --color-form-focus-bg: #442430;
    --color-form-border: #d04f82;
    --color-form-focus-border: #ffd0de;

    --color-table-bg: #311b24;
    --color-table-row-hover: #442430;
    --color-table-border: #d04f82;

    --color-dropdown-hover: #442430;
    --color-dropdown-active: #d04f82;

    --shadow-main:
        0 0 65px rgba(0, 0, 0, 0.95),
        0 0 24px #d04f82;

    --shadow-dropdown:
        0 0 30px rgba(0, 0, 0, 0.98),
        0 0 14px #ffd0de;

    --shadow-card:
        0 10px 32px rgba(0, 0, 0, 0.72);

    --fog-opacity: 0.45;
    --fog-brightness: 0.82;
    --fog-contrast: 1.25;
    --fog-saturate: 1.15;

    /* IMPORTANT: HARD HEX VALUES FOR VANTA */

    --fog-color-primary: #b0436c;
    --fog-color-secondary: #12040a;
    --fog-color-highlight: #fff0f5;

    --transition-fast: 0.15s ease;
    --transition-medium: 0.25s ease;
    --transition-slow: 0.45s ease;

    --radius-xs: 2px;
    --radius-sm: 5px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 18px;
    --radius-pill: 999px;

    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;

    --font-weight-normal: 400;
    --font-weight-bold: 700;

    --z-fog: -1;
    --z-content: 1;
    --z-dropdown: 500;
    --z-modal: 1000;

    --color-form-text: #ffeaf0;
    --color-form-placeholder: #c49aaa;
    --color-form-label: #ffd0de;
    --color-form-help: #e8c3cf;

    --color-form-error-text: #ffe0ea;
    --color-form-error-bg: #341b25;
    --color-form-error-border: #ff85b2;

    --color-checkbox-bg: #24131a;
    --color-checkbox-border: #d04f82;
    --color-checkbox-checked: #ff85b2;
    --color-checkbox-focus: #ffd0de;

    --color-select-arrow: #ff85b2;

    --color-form-disabled-bg: #2b1920;
    --color-form-disabled-text: #9f7885;
    --color-form-disabled-border: #5f3845;

    --color-file-bg: #26141b;
    --color-file-border: #d04f82;
    --color-file-text: #ffeaf0;

    --color-range-track: #4b2333;
    --color-range-thumb: #ff85b2;

    --color-valid: #95e6b8;
    --color-invalid: #ff6fa1;
    --color-warning: #ffd47f;

    /* Navbar Tokens */
    --color-navbar-text: #ffeaf0;
    --color-navbar-text-hover: #ffffff;
    --color-navbar-text-active: #ffd0de;
    --color-navbar-text-muted: #aaaaaa;

    --color-navbar-brand: #ffd0de;
    --color-navbar-brand-hover: #ffffff;

    --color-navbar-link: #ffeaf0;
    --color-navbar-link-hover: #ffffff;
    --color-navbar-link-active: #ffd0de;

    --color-navbar-dropdown-bg: #311b24;
    --color-navbar-dropdown-border: #d04f82;
    --color-navbar-dropdown-hover: #442430;
    --color-navbar-dropdown-active: #d04f82;

    --color-navbar-dropdown-text: #ffeaf0;
    --color-navbar-dropdown-text-hover: #ffffff;
    --color-navbar-dropdown-text-active: #ffffff;

    --color-navbar-toggler: #ffd0de;
    --color-navbar-toggler-hover: #442430;
    --color-navbar-toggler-border: #d04f82;

    --color-navbar-avatar-border: #ffd0de;
    --color-navbar-avatar-shadow:
        0 0 10px #ffd0de55;

    /* Dropdown Tokens */
    --color-dropdown-border: #d04f82;

    --color-dropdown-shadow:
        0 0 24px rgba(0, 0, 0, 0.75);

    --color-dropdown-text: #ffeaf0;
    --color-dropdown-text-muted: #aaaaaa;
    --color-dropdown-text-hover: #ffffff;
    --color-dropdown-text-active: #ffffff;

    --color-dropdown-selected: #ffd0de;

    --color-dropdown-header: #ffd0de;
    --color-dropdown-header-border: #d04f82;

    --color-dropdown-divider: #d04f82;

    --color-dropdown-icon: #ffd0de;
    --color-dropdown-icon-hover: #ffffff;

    --color-dropdown-focus-ring:
        0 0 0 0.2rem #ffd0de44;

    --color-dropdown-disabled-bg: #222222;
    --color-dropdown-disabled-text: #777777;

    --color-dropdown-submenu-bg: #311b24;
    --color-dropdown-submenu-border: #d04f82;
    --color-dropdown-submenu-hover: #442430;

        --color-form-bg-hover: #241414;
    --color-form-bg-focus: #301818;

    --color-form-border-hover: #a62d2d;
    --color-form-border-focus: #d4a85f;

    --color-form-focus-ring:
        rgba(212, 168, 95, 0.24);

    --color-form-autofill-bg: #301818;
    --color-form-autofill-text: #ffffff;

    --color-input-group-bg: #241414;
    --color-input-group-border: #7a1f1f;
    --color-input-group-text: #f5d18a;

    --color-form-readonly-bg: #221818;
    --color-form-readonly-border: #4a2c2c;

    --color-fieldset-border: #4a2c2c;
    --color-legend-text: #f5d18a;
}


/* =========================================================
   THEME 9 — DEEP OCEAN ABYSS
   ========================================================= */

body.theme-9 {

    --color-page-bg: #061118;
    --color-main-bg: #0a1b24;
    --color-panel-bg: #102734;
    --color-panel-alt-bg: #18384a;
    --color-panel-dark-bg: #000000;

    --color-navbar-bg: #0a1b24;
    --color-footer-bg: #0a1b24;
    --color-dropdown-bg: #102734;

    --color-input-bg: #0a1b24;
    --color-input-focus-bg: #18384a;
    --color-disabled-bg: #2a2a2a;

    --color-primary: #2cc4ff;
    --color-primary-hover: #74ddff;

    --color-accent: #7ff0ff;
    --color-accent-bright: #ffffff;
    --color-accent-soft: #7ff0ff;

    --color-text: #dcfaff;
    --color-text-soft: #dcfaff;
    --color-text-bright: #ffffff;
    --color-text-white: #ffffff;
    --color-text-muted: #aaaaaa;
    --color-text-disabled: #666666;

    --color-border: #2cc4ff;
    --color-border-light: #7ff0ff;
    --color-border-bright: #ffffff;
    --color-border-dark: #000000;

    --color-shadow-main: rgba(0, 0, 0, 0.95);
    --color-shadow-dark: rgba(0, 0, 0, 1);

    --color-success: #5ed08f;
    --color-warning: #ffd166;
    --color-danger: #ff5c7a;
    --color-info: #2cc4ff;

    --color-link: #7ff0ff;
    --color-link-hover: #ffffff;
    --color-link-active: #74ddff;

    --color-button-primary-bg: #2cc4ff;
    --color-button-primary-hover: #74ddff;
    --color-button-primary-text: #ffffff;

    --color-button-outline-text: #dcfaff;
    --color-button-outline-border: #7ff0ff;

    --color-form-bg: #0a1b24;
    --color-form-focus-bg: #18384a;
    --color-form-border: #2cc4ff;
    --color-form-focus-border: #7ff0ff;

    --color-table-bg: #102734;
    --color-table-row-hover: #18384a;
    --color-table-border: #2cc4ff;

    --color-dropdown-hover: #18384a;
    --color-dropdown-active: #2cc4ff;

    --shadow-main:
        0 0 65px rgba(0, 0, 0, 0.95),
        0 0 24px #2cc4ff;

    --shadow-dropdown:
        0 0 30px rgba(0, 0, 0, 0.98),
        0 0 14px #7ff0ff;

    --shadow-card:
        0 10px 32px rgba(0, 0, 0, 0.72);

    --fog-opacity: 0.45;
    --fog-brightness: 0.82;
    --fog-contrast: 1.25;
    --fog-saturate: 1.15;

    /* IMPORTANT: HARD HEX VALUES FOR VANTA */

    --fog-color-primary: #147da6;
    --fog-color-secondary: #020b12;
    --fog-color-highlight: #c8f7ff;

    --transition-fast: 0.15s ease;
    --transition-medium: 0.25s ease;
    --transition-slow: 0.45s ease;

    --radius-xs: 2px;
    --radius-sm: 5px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 18px;
    --radius-pill: 999px;

    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;

    --font-weight-normal: 400;
    --font-weight-bold: 700;

    --z-fog: -1;
    --z-content: 1;
    --z-dropdown: 500;
    --z-modal: 1000;


    --color-form-text: #dcfaff;
    --color-form-placeholder: #7db6c4;
    --color-form-label: #7ff0ff;
    --color-form-help: #b8e8f0;

    --color-form-error-text: #ffe3e3;
    --color-form-error-bg: #10242d;
    --color-form-error-border: #5fdfff;

    --color-checkbox-bg: #0d1d24;
    --color-checkbox-border: #2cc4ff;
    --color-checkbox-checked: #7ff0ff;
    --color-checkbox-focus: #b6f8ff;

    --color-select-arrow: #7ff0ff;

    --color-form-disabled-bg: #13262f;
    --color-form-disabled-text: #6d8d99;
    --color-form-disabled-border: #31515f;

    --color-file-bg: #0f2028;
    --color-file-border: #2cc4ff;
    --color-file-text: #dcfaff;

    --color-range-track: #204050;
    --color-range-thumb: #7ff0ff;

    --color-valid: #7fe6c4;
    --color-invalid: #ff8c8c;
    --color-warning: #ffd27a;

    /* Navbar Tokens */
    --color-navbar-text: #dcfaff;
    --color-navbar-text-hover: #ffffff;
    --color-navbar-text-active: #7ff0ff;
    --color-navbar-text-muted: #aaaaaa;

    --color-navbar-brand: #7ff0ff;
    --color-navbar-brand-hover: #ffffff;

    --color-navbar-link: #dcfaff;
    --color-navbar-link-hover: #ffffff;
    --color-navbar-link-active: #7ff0ff;

    --color-navbar-dropdown-bg: #102734;
    --color-navbar-dropdown-border: #2cc4ff;
    --color-navbar-dropdown-hover: #18384a;
    --color-navbar-dropdown-active: #2cc4ff;

    --color-navbar-dropdown-text: #dcfaff;
    --color-navbar-dropdown-text-hover: #ffffff;
    --color-navbar-dropdown-text-active: #ffffff;

    --color-navbar-toggler: #7ff0ff;
    --color-navbar-toggler-hover: #18384a;
    --color-navbar-toggler-border: #2cc4ff;

    --color-navbar-avatar-border: #7ff0ff;
    --color-navbar-avatar-shadow:
        0 0 10px #7ff0ff55;

    /* Dropdown Tokens */
    --color-dropdown-border: #2cc4ff;

    --color-dropdown-shadow:
        0 0 24px rgba(0, 0, 0, 0.75);

    --color-dropdown-text: #dcfaff;
    --color-dropdown-text-muted: #aaaaaa;
    --color-dropdown-text-hover: #ffffff;
    --color-dropdown-text-active: #ffffff;

    --color-dropdown-selected: #7ff0ff;

    --color-dropdown-header: #7ff0ff;
    --color-dropdown-header-border: #2cc4ff;

    --color-dropdown-divider: #2cc4ff;

    --color-dropdown-icon: #7ff0ff;
    --color-dropdown-icon-hover: #ffffff;

    --color-dropdown-focus-ring:
        0 0 0 0.2rem #7ff0ff44;

    --color-dropdown-disabled-bg: #222222;
    --color-dropdown-disabled-text: #777777;

    --color-dropdown-submenu-bg: #102734;
    --color-dropdown-submenu-border: #2cc4ff;
    --color-dropdown-submenu-hover: #18384a;

    --color-form-bg-hover: #241414;
    --color-form-bg-focus: #301818;

    --color-form-border-hover: #a62d2d;
    --color-form-border-focus: #d4a85f;

    --color-form-focus-ring:
        rgba(212, 168, 95, 0.24);

    --color-form-autofill-bg: #301818;
    --color-form-autofill-text: #ffffff;

    --color-input-group-bg: #241414;
    --color-input-group-border: #7a1f1f;
    --color-input-group-text: #f5d18a;

    --color-form-readonly-bg: #221818;
    --color-form-readonly-border: #4a2c2c;

    --color-fieldset-border: #4a2c2c;
    --color-legend-text: #f5d18a;
}


/* =========================================================
   THEME 10 — HOLY FIRE
   ========================================================= */

body.theme-10 {

    --color-page-bg: #1c160d;
    --color-main-bg: #282015;
    --color-panel-bg: #382b1c;
    --color-panel-alt-bg: #4a3924;
    --color-panel-dark-bg: #000000;

    --color-navbar-bg: #282015;
    --color-footer-bg: #282015;
    --color-dropdown-bg: #382b1c;

    --color-input-bg: #282015;
    --color-input-focus-bg: #4a3924;
    --color-disabled-bg: #2a2a2a;

    --color-primary: #cfa24f;
    --color-primary-hover: #ffd27a;

    --color-accent: #ffe6a8;
    --color-accent-bright: #ffffff;
    --color-accent-soft: #ffe6a8;

    --color-text: #fff4dc;
    --color-text-soft: #fff4dc;
    --color-text-bright: #ffffff;
    --color-text-white: #ffffff;
    --color-text-muted: #aaaaaa;
    --color-text-disabled: #666666;

    --color-border: #cfa24f;
    --color-border-light: #ffe6a8;
    --color-border-bright: #ffffff;
    --color-border-dark: #000000;

    --color-shadow-main: rgba(0, 0, 0, 0.95);
    --color-shadow-dark: rgba(0, 0, 0, 1);

    --color-success: #5ed08f;
    --color-warning: #ffd166;
    --color-danger: #ff5c7a;
    --color-info: #cfa24f;

    --color-link: #ffe6a8;
    --color-link-hover: #ffffff;
    --color-link-active: #ffd27a;

    --color-button-primary-bg: #cfa24f;
    --color-button-primary-hover: #ffd27a;
    --color-button-primary-text: #ffffff;

    --color-button-outline-text: #fff4dc;
    --color-button-outline-border: #ffe6a8;

    --color-form-bg: #282015;
    --color-form-focus-bg: #4a3924;
    --color-form-border: #cfa24f;
    --color-form-focus-border: #ffe6a8;

    --color-table-bg: #382b1c;
    --color-table-row-hover: #4a3924;
    --color-table-border: #cfa24f;

    --color-dropdown-hover: #4a3924;
    --color-dropdown-active: #cfa24f;

    --shadow-main:
        0 0 65px rgba(0, 0, 0, 0.95),
        0 0 24px #cfa24f;

    --shadow-dropdown:
        0 0 30px rgba(0, 0, 0, 0.98),
        0 0 14px #ffe6a8;

    --shadow-card:
        0 10px 32px rgba(0, 0, 0, 0.72);

    --fog-opacity: 0.45;
    --fog-brightness: 0.82;
    --fog-contrast: 1.25;
    --fog-saturate: 1.15;

    /* IMPORTANT: HARD HEX VALUES FOR VANTA */

    --fog-color-primary: #b57a18;
    --fog-color-secondary: #140d05;
    --fog-color-highlight: #fff0c8;

    --transition-fast: 0.15s ease;
    --transition-medium: 0.25s ease;
    --transition-slow: 0.45s ease;

    --radius-xs: 2px;
    --radius-sm: 5px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 18px;
    --radius-pill: 999px;

    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;

    --font-weight-normal: 400;
    --font-weight-bold: 700;

    --z-fog: -1;
    --z-content: 1;
    --z-dropdown: 500;
    --z-modal: 1000;

    --color-form-text: #fff4dc;
    --color-form-placeholder: #c7b08a;
    --color-form-label: #ffe6a8;
    --color-form-help: #dbcaa8;

    --color-form-error-text: #fff0d9;
    --color-form-error-bg: #3a2a16;
    --color-form-error-border: #ffd27a;

    --color-checkbox-bg: #2a1f12;
    --color-checkbox-border: #9f7a33;
    --color-checkbox-checked: #ffe6a8;
    --color-checkbox-focus: #fff2cc;

    --color-select-arrow: #ffe6a8;

    --color-form-disabled-bg: #302417;
    --color-form-disabled-text: #9f8a67;
    --color-form-disabled-border: #5d4928;

    --color-file-bg: #2b2115;
    --color-file-border: #9f7a33;
    --color-file-text: #fff4dc;

    --color-range-track: #5a4728;
    --color-range-thumb: #ffe6a8;

    --color-valid: #a4e49a;
    --color-invalid: #ff8b6b;
    --color-warning: #ffd27a;

    /* Navbar Tokens */
    --color-navbar-text: #fff4dc;
    --color-navbar-text-hover: #ffffff;
    --color-navbar-text-active: #ffe6a8;
    --color-navbar-text-muted: #aaaaaa;

    --color-navbar-brand: #ffe6a8;
    --color-navbar-brand-hover: #ffffff;

    --color-navbar-link: #fff4dc;
    --color-navbar-link-hover: #ffffff;
    --color-navbar-link-active: #ffe6a8;

    --color-navbar-dropdown-bg: #382b1c;
    --color-navbar-dropdown-border: #cfa24f;
    --color-navbar-dropdown-hover: #4a3924;
    --color-navbar-dropdown-active: #cfa24f;

    --color-navbar-dropdown-text: #fff4dc;
    --color-navbar-dropdown-text-hover: #ffffff;
    --color-navbar-dropdown-text-active: #ffffff;

    --color-navbar-toggler: #ffe6a8;
    --color-navbar-toggler-hover: #4a3924;
    --color-navbar-toggler-border: #cfa24f;

    --color-navbar-avatar-border: #ffe6a8;
    --color-navbar-avatar-shadow:
        0 0 10px #ffe6a855;

    /* Dropdown Tokens */
    --color-dropdown-border: #cfa24f;

    --color-dropdown-shadow:
        0 0 24px rgba(0, 0, 0, 0.75);

    --color-dropdown-text: #fff4dc;
    --color-dropdown-text-muted: #aaaaaa;
    --color-dropdown-text-hover: #ffffff;
    --color-dropdown-text-active: #ffffff;

    --color-dropdown-selected: #ffe6a8;

    --color-dropdown-header: #ffe6a8;
    --color-dropdown-header-border: #cfa24f;

    --color-dropdown-divider: #cfa24f;

    --color-dropdown-icon: #ffe6a8;
    --color-dropdown-icon-hover: #ffffff;

    --color-dropdown-focus-ring:
        0 0 0 0.2rem #ffe6a844;

    --color-dropdown-disabled-bg: #222222;
    --color-dropdown-disabled-text: #777777;

    --color-dropdown-submenu-bg: #382b1c;
    --color-dropdown-submenu-border: #cfa24f;
    --color-dropdown-submenu-hover: #4a3924;

    --color-form-bg-hover: #241414;
    --color-form-bg-focus: #301818;

    --color-form-border-hover: #a62d2d;
    --color-form-border-focus: #d4a85f;

    --color-form-focus-ring:
        rgba(212, 168, 95, 0.24);

    --color-form-autofill-bg: #301818;
    --color-form-autofill-text: #ffffff;

    --color-input-group-bg: #241414;
    --color-input-group-border: #7a1f1f;
    --color-input-group-text: #f5d18a;

    --color-form-readonly-bg: #221818;
    --color-form-readonly-border: #4a2c2c;

    --color-fieldset-border: #4a2c2c;
    --color-legend-text: #f5d18a;
}


/* =========================================================
   THEME 11 — VERDANT RAGE
   ========================================================= */

body.theme-11 {

    --color-page-bg: #0f1710;
    --color-main-bg: #172218;
    --color-panel-bg: #213025;
    --color-panel-alt-bg: #2c4432;
    --color-panel-dark-bg: #000000;

    --color-navbar-bg: #172218;
    --color-footer-bg: #172218;
    --color-dropdown-bg: #213025;

    --color-input-bg: #172218;
    --color-input-focus-bg: #2c4432;
    --color-disabled-bg: #2a2a2a;

    --color-primary: #4fd46b;
    --color-primary-hover: #8effa3;

    --color-accent: #b8ffd0;
    --color-accent-bright: #ffffff;
    --color-accent-soft: #b8ffd0;

    --color-text: #e0ffe8;
    --color-text-soft: #e0ffe8;
    --color-text-bright: #ffffff;
    --color-text-white: #ffffff;
    --color-text-muted: #aaaaaa;
    --color-text-disabled: #666666;

    --color-border: #4fd46b;
    --color-border-light: #b8ffd0;
    --color-border-bright: #ffffff;
    --color-border-dark: #000000;

    --color-shadow-main: rgba(0, 0, 0, 0.95);
    --color-shadow-dark: rgba(0, 0, 0, 1);

    --color-success: #5ed08f;
    --color-warning: #ffd166;
    --color-danger: #ff5c7a;
    --color-info: #4fd46b;

    --color-link: #b8ffd0;
    --color-link-hover: #ffffff;
    --color-link-active: #8effa3;

    --color-button-primary-bg: #4fd46b;
    --color-button-primary-hover: #8effa3;
    --color-button-primary-text: #ffffff;

    --color-button-outline-text: #e0ffe8;
    --color-button-outline-border: #b8ffd0;

    --color-form-bg: #172218;
    --color-form-focus-bg: #2c4432;
    --color-form-border: #4fd46b;
    --color-form-focus-border: #b8ffd0;

    --color-table-bg: #213025;
    --color-table-row-hover: #2c4432;
    --color-table-border: #4fd46b;

    --color-dropdown-hover: #2c4432;
    --color-dropdown-active: #4fd46b;

    --shadow-main:
        0 0 65px rgba(0, 0, 0, 0.95),
        0 0 24px #4fd46b;

    --shadow-dropdown:
        0 0 30px rgba(0, 0, 0, 0.98),
        0 0 14px #b8ffd0;

    --shadow-card:
        0 10px 32px rgba(0, 0, 0, 0.72);

    --fog-opacity: 0.45;
    --fog-brightness: 0.82;
    --fog-contrast: 1.25;
    --fog-saturate: 1.15;

    /* IMPORTANT: HARD HEX VALUES FOR VANTA */

    --fog-color-primary: #3d8f4f;
    --fog-color-secondary: #081208;
    --fog-color-highlight: #e0fff0;

    --transition-fast: 0.15s ease;
    --transition-medium: 0.25s ease;
    --transition-slow: 0.45s ease;

    --radius-xs: 2px;
    --radius-sm: 5px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 18px;
    --radius-pill: 999px;

    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;

    --font-weight-normal: 400;
    --font-weight-bold: 700;

    --z-fog: -1;
    --z-content: 1;
    --z-dropdown: 500;
    --z-modal: 1000;

    --color-form-text: #e7ffe7;
    --color-form-placeholder: #89b889;
    --color-form-label: #b7ffb7;
    --color-form-help: #cfe8cf;

    --color-form-error-text: #ffe0e0;
    --color-form-error-bg: #1d2f1d;
    --color-form-error-border: #6eff8e;

    --color-checkbox-bg: #142014;
    --color-checkbox-border: #4caf50;
    --color-checkbox-checked: #8dff98;
    --color-checkbox-focus: #c9ffd1;

    --color-select-arrow: #8dff98;

    --color-form-disabled-bg: #1a281a;
    --color-form-disabled-text: #729072;
    --color-form-disabled-border: #426142;

    --color-file-bg: #172317;
    --color-file-border: #4caf50;
    --color-file-text: #e7ffe7;

    --color-range-track: #2f4f2f;
    --color-range-thumb: #8dff98;

    --color-valid: #8dff98;
    --color-invalid: #ff8f8f;
    --color-warning: #ffe08a;

    /* Navbar Tokens */
    --color-navbar-text: #e7ffe7;
    --color-navbar-text-hover: #ffffff;
    --color-navbar-text-active: #b7ffb7;
    --color-navbar-text-muted: #aaaaaa;

    --color-navbar-brand: #b7ffb7;
    --color-navbar-brand-hover: #ffffff;

    --color-navbar-link: #e7ffe7;
    --color-navbar-link-hover: #ffffff;
    --color-navbar-link-active: #b7ffb7;

    --color-navbar-dropdown-bg: #1b261b;
    --color-navbar-dropdown-border: #4caf50;
    --color-navbar-dropdown-hover: #263326;
    --color-navbar-dropdown-active: #4caf50;

    --color-navbar-dropdown-text: #e7ffe7;
    --color-navbar-dropdown-text-hover: #ffffff;
    --color-navbar-dropdown-text-active: #ffffff;

    --color-navbar-toggler: #b7ffb7;
    --color-navbar-toggler-hover: #263326;
    --color-navbar-toggler-border: #4caf50;

    --color-navbar-avatar-border: #b7ffb7;
    --color-navbar-avatar-shadow:
        0 0 10px #b7ffb755;

    /* Dropdown Tokens */
    --color-dropdown-border: #4caf50;

    --color-dropdown-shadow:
        0 0 24px rgba(0, 0, 0, 0.75);

    --color-dropdown-text: #e7ffe7;
    --color-dropdown-text-muted: #aaaaaa;
    --color-dropdown-text-hover: #ffffff;
    --color-dropdown-text-active: #ffffff;

    --color-dropdown-selected: #b7ffb7;

    --color-dropdown-header: #b7ffb7;
    --color-dropdown-header-border: #4caf50;

    --color-dropdown-divider: #4caf50;

    --color-dropdown-icon: #b7ffb7;
    --color-dropdown-icon-hover: #ffffff;

    --color-dropdown-focus-ring:
        0 0 0 0.2rem #b7ffb744;

    --color-dropdown-disabled-bg: #222222;
    --color-dropdown-disabled-text: #777777;

    --color-dropdown-submenu-bg: #1b261b;
    --color-dropdown-submenu-border: #4caf50;
    --color-dropdown-submenu-hover: #263326;

    --color-form-bg-hover: #241414;
    --color-form-bg-focus: #301818;

    --color-form-border-hover: #a62d2d;
    --color-form-border-focus: #d4a85f;

    --color-form-focus-ring:
        rgba(212, 168, 95, 0.24);

    --color-form-autofill-bg: #301818;
    --color-form-autofill-text: #ffffff;

    --color-input-group-bg: #241414;
    --color-input-group-border: #7a1f1f;
    --color-input-group-text: #f5d18a;

    --color-form-readonly-bg: #221818;
    --color-form-readonly-border: #4a2c2c;

    --color-fieldset-border: #4a2c2c;
    --color-legend-text: #f5d18a;
}


/* =========================================================
   THEME 12 — INFERNO ENGINE
   ========================================================= */

body.theme-12 {

    --color-page-bg: #170909;
    --color-main-bg: #221010;
    --color-panel-bg: #331515;
    --color-panel-alt-bg: #471d1d;
    --color-panel-dark-bg: #000000;

    --color-navbar-bg: #221010;
    --color-footer-bg: #221010;
    --color-dropdown-bg: #331515;

    --color-input-bg: #221010;
    --color-input-focus-bg: #471d1d;
    --color-disabled-bg: #2a2a2a;

    --color-primary: #ff3b2f;
    --color-primary-hover: #ff7d73;

    --color-accent: #ff9c74;
    --color-accent-bright: #ffffff;
    --color-accent-soft: #ff9c74;

    --color-text: #ffe0d8;
    --color-text-soft: #ffe0d8;
    --color-text-bright: #ffffff;
    --color-text-white: #ffffff;
    --color-text-muted: #aaaaaa;
    --color-text-disabled: #666666;

    --color-border: #ff3b2f;
    --color-border-light: #ff9c74;
    --color-border-bright: #ffffff;
    --color-border-dark: #000000;

    --color-shadow-main: rgba(0, 0, 0, 0.95);
    --color-shadow-dark: rgba(0, 0, 0, 1);

    --color-success: #5ed08f;
    --color-warning: #ffd166;
    --color-danger: #ff5c7a;
    --color-info: #ff3b2f;

    --color-link: #ff9c74;
    --color-link-hover: #ffffff;
    --color-link-active: #ff7d73;

    --color-button-primary-bg: #ff3b2f;
    --color-button-primary-hover: #ff7d73;
    --color-button-primary-text: #ffffff;

    --color-button-outline-text: #ffe0d8;
    --color-button-outline-border: #ff9c74;

    --color-form-bg: #221010;
    --color-form-focus-bg: #471d1d;
    --color-form-border: #ff3b2f;
    --color-form-focus-border: #ff9c74;

    --color-table-bg: #331515;
    --color-table-row-hover: #471d1d;
    --color-table-border: #ff3b2f;

    --color-dropdown-hover: #471d1d;
    --color-dropdown-active: #ff3b2f;

    --shadow-main:
        0 0 65px rgba(0, 0, 0, 0.95),
        0 0 24px #ff3b2f;

    --shadow-dropdown:
        0 0 30px rgba(0, 0, 0, 0.98),
        0 0 14px #ff9c74;

    --shadow-card:
        0 10px 32px rgba(0, 0, 0, 0.72);

    --fog-opacity: 0.45;
    --fog-brightness: 0.82;
    --fog-contrast: 1.25;
    --fog-saturate: 1.15;

    /* IMPORTANT: HARD HEX VALUES FOR VANTA */

    --fog-color-primary: #b82118;
    --fog-color-secondary: #100000;
    --fog-color-highlight: #ffd1c4;

    --transition-fast: 0.15s ease;
    --transition-medium: 0.25s ease;
    --transition-slow: 0.45s ease;

    --radius-xs: 2px;
    --radius-sm: 5px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 18px;
    --radius-pill: 999px;

    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;

    --font-weight-normal: 400;
    --font-weight-bold: 700;

    --z-fog: -1;
    --z-content: 1;
    --z-dropdown: 500;
    --z-modal: 1000;

    --color-form-text: #ffe7d9;
    --color-form-placeholder: #c78c74;
    --color-form-label: #ffb38a;
    --color-form-help: #e8bda7;

    --color-form-error-text: #ffd8d0;
    --color-form-error-bg: #35160f;
    --color-form-error-border: #ff7043;

    --color-checkbox-bg: #22120d;
    --color-checkbox-border: #ff5722;
    --color-checkbox-checked: #ff9b74;
    --color-checkbox-focus: #ffd0bf;

    --color-select-arrow: #ff9b74;

    --color-form-disabled-bg: #291914;
    --color-form-disabled-text: #967267;
    --color-form-disabled-border: #613b2f;

    --color-file-bg: #24140f;
    --color-file-border: #ff5722;
    --color-file-text: #ffe7d9;

    --color-range-track: #4a281e;
    --color-range-thumb: #ff9b74;

    --color-valid: #8fe39d;
    --color-invalid: #ff6b5a;
    --color-warning: #ffc266;

    /* Navbar Tokens */
    --color-navbar-text: #ffe7d9;
    --color-navbar-text-hover: #ffffff;
    --color-navbar-text-active: #ffb38a;
    --color-navbar-text-muted: #aaaaaa;

    --color-navbar-brand: #ffb38a;
    --color-navbar-brand-hover: #ffffff;

    --color-navbar-link: #ffe7d9;
    --color-navbar-link-hover: #ffffff;
    --color-navbar-link-active: #ffb38a;

    --color-navbar-dropdown-bg: #2d140f;
    --color-navbar-dropdown-border: #ff5722;
    --color-navbar-dropdown-hover: #402019;
    --color-navbar-dropdown-active: #ff5722;

    --color-navbar-dropdown-text: #ffe7d9;
    --color-navbar-dropdown-text-hover: #ffffff;
    --color-navbar-dropdown-text-active: #ffffff;

    --color-navbar-toggler: #ffb38a;
    --color-navbar-toggler-hover: #402019;
    --color-navbar-toggler-border: #ff5722;

    --color-navbar-avatar-border: #ffb38a;
    --color-navbar-avatar-shadow:
        0 0 10px #ffb38a55;

    /* Dropdown Tokens */
    --color-dropdown-border: #ff5722;

    --color-dropdown-shadow:
        0 0 24px rgba(0, 0, 0, 0.75);

    --color-dropdown-text: #ffe7d9;
    --color-dropdown-text-muted: #aaaaaa;
    --color-dropdown-text-hover: #ffffff;
    --color-dropdown-text-active: #ffffff;

    --color-dropdown-selected: #ffb38a;

    --color-dropdown-header: #ffb38a;
    --color-dropdown-header-border: #ff5722;

    --color-dropdown-divider: #ff5722;

    --color-dropdown-icon: #ffb38a;
    --color-dropdown-icon-hover: #ffffff;

    --color-dropdown-focus-ring:
        0 0 0 0.2rem #ffb38a44;

    --color-dropdown-disabled-bg: #222222;
    --color-dropdown-disabled-text: #777777;

    --color-dropdown-submenu-bg: #2d140f;
    --color-dropdown-submenu-border: #ff5722;
    --color-dropdown-submenu-hover: #402019;

    --color-form-bg-hover: #241414;
    --color-form-bg-focus: #301818;

    --color-form-border-hover: #a62d2d;
    --color-form-border-focus: #d4a85f;

    --color-form-focus-ring:
        rgba(212, 168, 95, 0.24);

    --color-form-autofill-bg: #301818;
    --color-form-autofill-text: #ffffff;

    --color-input-group-bg: #241414;
    --color-input-group-border: #7a1f1f;
    --color-input-group-text: #f5d18a;

    --color-form-readonly-bg: #221818;
    --color-form-readonly-border: #4a2c2c;

    --color-fieldset-border: #4a2c2c;
    --color-legend-text: #f5d18a;
}


/* =========================================================
   THEME 13 — STORM PROTOCOL
   ========================================================= */

body.theme-13 {

    --color-page-bg: #0a1218;
    --color-main-bg: #101d24;
    --color-panel-bg: #182b35;
    --color-panel-alt-bg: #22404d;
    --color-panel-dark-bg: #000000;

    --color-navbar-bg: #101d24;
    --color-footer-bg: #101d24;
    --color-dropdown-bg: #182b35;

    --color-input-bg: #101d24;
    --color-input-focus-bg: #22404d;
    --color-disabled-bg: #2a2a2a;

    --color-primary: #3bd4ff;
    --color-primary-hover: #86e8ff;

    --color-accent: #9befff;
    --color-accent-bright: #ffffff;
    --color-accent-soft: #9befff;

    --color-text: #e0faff;
    --color-text-soft: #e0faff;
    --color-text-bright: #ffffff;
    --color-text-white: #ffffff;
    --color-text-muted: #aaaaaa;
    --color-text-disabled: #666666;

    --color-border: #3bd4ff;
    --color-border-light: #9befff;
    --color-border-bright: #ffffff;
    --color-border-dark: #000000;

    --color-shadow-main: rgba(0, 0, 0, 0.95);
    --color-shadow-dark: rgba(0, 0, 0, 1);

    --color-success: #5ed08f;
    --color-warning: #ffd166;
    --color-danger: #ff5c7a;
    --color-info: #3bd4ff;

    --color-link: #9befff;
    --color-link-hover: #ffffff;
    --color-link-active: #86e8ff;

    --color-button-primary-bg: #3bd4ff;
    --color-button-primary-hover: #86e8ff;
    --color-button-primary-text: #ffffff;

    --color-button-outline-text: #e0faff;
    --color-button-outline-border: #9befff;

    --color-form-bg: #101d24;
    --color-form-focus-bg: #22404d;
    --color-form-border: #3bd4ff;
    --color-form-focus-border: #9befff;

    --color-table-bg: #182b35;
    --color-table-row-hover: #22404d;
    --color-table-border: #3bd4ff;

    --color-dropdown-hover: #22404d;
    --color-dropdown-active: #3bd4ff;

    --shadow-main:
        0 0 65px rgba(0, 0, 0, 0.95),
        0 0 24px #3bd4ff;

    --shadow-dropdown:
        0 0 30px rgba(0, 0, 0, 0.98),
        0 0 14px #9befff;

    --shadow-card:
        0 10px 32px rgba(0, 0, 0, 0.72);

    --fog-opacity: 0.45;
    --fog-brightness: 0.82;
    --fog-contrast: 1.25;
    --fog-saturate: 1.15;

    /* IMPORTANT: HARD HEX VALUES FOR VANTA */

    --fog-color-primary: #2196b8;
    --fog-color-secondary: #050d12;
    --fog-color-highlight: #d8ffff;

    --transition-fast: 0.15s ease;
    --transition-medium: 0.25s ease;
    --transition-slow: 0.45s ease;

    --radius-xs: 2px;
    --radius-sm: 5px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 18px;
    --radius-pill: 999px;

    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;

    --font-weight-normal: 400;
    --font-weight-bold: 700;

    --z-fog: -1;
    --z-content: 1;
    --z-dropdown: 500;
    --z-modal: 1000;

    --color-form-text: #e7f3ff;
    --color-form-placeholder: #8ba9c7;
    --color-form-label: #9bd0ff;
    --color-form-help: #c6d9ec;

    --color-form-error-text: #ffe0e0;
    --color-form-error-bg: #172432;
    --color-form-error-border: #64b5ff;

    --color-checkbox-bg: #121c28;
    --color-checkbox-border: #3f8cff;
    --color-checkbox-checked: #9bd0ff;
    --color-checkbox-focus: #d6ecff;

    --color-select-arrow: #9bd0ff;

    --color-form-disabled-bg: #182430;
    --color-form-disabled-text: #71879c;
    --color-form-disabled-border: #3a5268;

    --color-file-bg: #14202b;
    --color-file-border: #3f8cff;
    --color-file-text: #e7f3ff;

    --color-range-track: #2b4661;
    --color-range-thumb: #9bd0ff;

    --color-valid: #9de0b0;
    --color-invalid: #ff8c8c;
    --color-warning: #ffe08a;

    /* Navbar Tokens */
    --color-navbar-text: #e7f3ff;
    --color-navbar-text-hover: #ffffff;
    --color-navbar-text-active: #9bd0ff;
    --color-navbar-text-muted: #aaaaaa;

    --color-navbar-brand: #9bd0ff;
    --color-navbar-brand-hover: #ffffff;

    --color-navbar-link: #e7f3ff;
    --color-navbar-link-hover: #ffffff;
    --color-navbar-link-active: #9bd0ff;

    --color-navbar-dropdown-bg: #182838;
    --color-navbar-dropdown-border: #3f8cff;
    --color-navbar-dropdown-hover: #22364b;
    --color-navbar-dropdown-active: #3f8cff;

    --color-navbar-dropdown-text: #e7f3ff;
    --color-navbar-dropdown-text-hover: #ffffff;
    --color-navbar-dropdown-text-active: #ffffff;

    --color-navbar-toggler: #9bd0ff;
    --color-navbar-toggler-hover: #22364b;
    --color-navbar-toggler-border: #3f8cff;

    --color-navbar-avatar-border: #9bd0ff;
    --color-navbar-avatar-shadow:
        0 0 10px #9bd0ff55;

    /* Dropdown Tokens */
    --color-dropdown-border: #3f8cff;

    --color-dropdown-shadow:
        0 0 24px rgba(0, 0, 0, 0.75);

    --color-dropdown-text: #e7f3ff;
    --color-dropdown-text-muted: #aaaaaa;
    --color-dropdown-text-hover: #ffffff;
    --color-dropdown-text-active: #ffffff;

    --color-dropdown-selected: #9bd0ff;

    --color-dropdown-header: #9bd0ff;
    --color-dropdown-header-border: #3f8cff;

    --color-dropdown-divider: #3f8cff;

    --color-dropdown-icon: #9bd0ff;
    --color-dropdown-icon-hover: #ffffff;

    --color-dropdown-focus-ring:
        0 0 0 0.2rem #9bd0ff44;

    --color-dropdown-disabled-bg: #222222;
    --color-dropdown-disabled-text: #777777;

    --color-dropdown-submenu-bg: #182838;
    --color-dropdown-submenu-border: #3f8cff;
    --color-dropdown-submenu-hover: #22364b;

    --color-form-bg-hover: #241414;
    --color-form-bg-focus: #301818;

    --color-form-border-hover: #a62d2d;
    --color-form-border-focus: #d4a85f;

    --color-form-focus-ring:
        rgba(212, 168, 95, 0.24);

    --color-form-autofill-bg: #301818;
    --color-form-autofill-text: #ffffff;

    --color-input-group-bg: #241414;
    --color-input-group-border: #7a1f1f;
    --color-input-group-text: #f5d18a;

    --color-form-readonly-bg: #221818;
    --color-form-readonly-border: #4a2c2c;

    --color-fieldset-border: #4a2c2c;
    --color-legend-text: #f5d18a;
}


/* =========================================================
   THEME 14 — ANCIENT MANUSCRIPT
   ========================================================= */

body.theme-14 {

    --color-page-bg: #1d1811;
    --color-main-bg: #292117;
    --color-panel-bg: #382d1f;
    --color-panel-alt-bg: #4a3c29;
    --color-panel-dark-bg: #000000;

    --color-navbar-bg: #292117;
    --color-footer-bg: #292117;
    --color-dropdown-bg: #382d1f;

    --color-input-bg: #292117;
    --color-input-focus-bg: #4a3c29;
    --color-disabled-bg: #2a2a2a;

    --color-primary: #c4a86b;
    --color-primary-hover: #e0c58d;

    --color-accent: #fff0c8;
    --color-accent-bright: #ffffff;
    --color-accent-soft: #fff0c8;

    --color-text: #fff7e8;
    --color-text-soft: #fff7e8;
    --color-text-bright: #ffffff;
    --color-text-white: #ffffff;
    --color-text-muted: #aaaaaa;
    --color-text-disabled: #666666;

    --color-border: #c4a86b;
    --color-border-light: #fff0c8;
    --color-border-bright: #ffffff;
    --color-border-dark: #000000;

    --color-shadow-main: rgba(0, 0, 0, 0.95);
    --color-shadow-dark: rgba(0, 0, 0, 1);

    --color-success: #5ed08f;
    --color-warning: #ffd166;
    --color-danger: #ff5c7a;
    --color-info: #c4a86b;

    --color-link: #fff0c8;
    --color-link-hover: #ffffff;
    --color-link-active: #e0c58d;

    --color-button-primary-bg: #c4a86b;
    --color-button-primary-hover: #e0c58d;
    --color-button-primary-text: #ffffff;

    --color-button-outline-text: #fff7e8;
    --color-button-outline-border: #fff0c8;

    --color-form-bg: #292117;
    --color-form-focus-bg: #4a3c29;
    --color-form-border: #c4a86b;
    --color-form-focus-border: #fff0c8;

    --color-table-bg: #382d1f;
    --color-table-row-hover: #4a3c29;
    --color-table-border: #c4a86b;

    --color-dropdown-hover: #4a3c29;
    --color-dropdown-active: #c4a86b;

    --shadow-main:
        0 0 65px rgba(0, 0, 0, 0.95),
        0 0 24px #c4a86b;

    --shadow-dropdown:
        0 0 30px rgba(0, 0, 0, 0.98),
        0 0 14px #fff0c8;

    --shadow-card:
        0 10px 32px rgba(0, 0, 0, 0.72);

    --fog-opacity: 0.45;
    --fog-brightness: 0.82;
    --fog-contrast: 1.25;
    --fog-saturate: 1.15;

    /* IMPORTANT: HARD HEX VALUES FOR VANTA */

    --fog-color-primary: #8a6a30;
    --fog-color-secondary: #120e08;
    --fog-color-highlight: #fff7dc;

    --transition-fast: 0.15s ease;
    --transition-medium: 0.25s ease;
    --transition-slow: 0.45s ease;

    --radius-xs: 2px;
    --radius-sm: 5px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 18px;
    --radius-pill: 999px;

    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;

    --font-weight-normal: 400;
    --font-weight-bold: 700;

    --z-fog: -1;
    --z-content: 1;
    --z-dropdown: 500;
    --z-modal: 1000;

    --color-form-text: #3d2b1f;
    --color-form-placeholder: #8c7767;
    --color-form-label: #5a402f;
    --color-form-help: #7d6756;

    --color-form-error-text: #7a1f1f;
    --color-form-error-bg: #f5e6c8;
    --color-form-error-border: #b86b4b;

    --color-checkbox-bg: #ead7b5;
    --color-checkbox-border: #8a6a4a;
    --color-checkbox-checked: #5a402f;
    --color-checkbox-focus: #b86b4b;

    --color-select-arrow: #5a402f;

    --color-form-disabled-bg: #ddd0b3;
    --color-form-disabled-text: #8f806f;
    --color-form-disabled-border: #b5a488;

    --color-file-bg: #eadfc8;
    --color-file-border: #8a6a4a;
    --color-file-text: #3d2b1f;

    --color-range-track: #c9b89c;
    --color-range-thumb: #5a402f;

    --color-valid: #5e8b5e;
    --color-invalid: #b54d4d;
    --color-warning: #c9983a;

    /* Navbar Tokens */
    --color-navbar-text: #fff7e8;
    --color-navbar-text-hover: #ffffff;
    --color-navbar-text-active: #fff0c8;
    --color-navbar-text-muted: #aaaaaa;

    --color-navbar-brand: #fff0c8;
    --color-navbar-brand-hover: #ffffff;

    --color-navbar-link: #fff7e8;
    --color-navbar-link-hover: #ffffff;
    --color-navbar-link-active: #fff0c8;

    --color-navbar-dropdown-bg: #2b2118;
    --color-navbar-dropdown-border: #8a6a4a;
    --color-navbar-dropdown-hover: #3b2d20;
    --color-navbar-dropdown-active: #8a6a4a;

    --color-navbar-dropdown-text: #fff7e8;
    --color-navbar-dropdown-text-hover: #ffffff;
    --color-navbar-dropdown-text-active: #ffffff;

    --color-navbar-toggler: #fff0c8;
    --color-navbar-toggler-hover: #3b2d20;
    --color-navbar-toggler-border: #8a6a4a;

    --color-navbar-avatar-border: #fff0c8;
    --color-navbar-avatar-shadow:
        0 0 10px #fff0c855;

    /* Dropdown Tokens */
    --color-dropdown-border: #8a6a4a;

    --color-dropdown-shadow:
        0 0 24px rgba(0, 0, 0, 0.75);

    --color-dropdown-text: #fff7e8;
    --color-dropdown-text-muted: #aaaaaa;
    --color-dropdown-text-hover: #ffffff;
    --color-dropdown-text-active: #ffffff;

    --color-dropdown-selected: #fff0c8;

    --color-dropdown-header: #fff0c8;
    --color-dropdown-header-border: #8a6a4a;

    --color-dropdown-divider: #8a6a4a;

    --color-dropdown-icon: #fff0c8;
    --color-dropdown-icon-hover: #ffffff;

    --color-dropdown-focus-ring:
        0 0 0 0.2rem #fff0c844;

    --color-dropdown-disabled-bg: #222222;
    --color-dropdown-disabled-text: #777777;

    --color-dropdown-submenu-bg: #2b2118;
    --color-dropdown-submenu-border: #8a6a4a;
    --color-dropdown-submenu-hover: #3b2d20;

    --color-form-bg-hover: #241414;
    --color-form-bg-focus: #301818;

    --color-form-border-hover: #a62d2d;
    --color-form-border-focus: #d4a85f;

    --color-form-focus-ring:
        rgba(212, 168, 95, 0.24);

    --color-form-autofill-bg: #301818;
    --color-form-autofill-text: #ffffff;

    --color-input-group-bg: #241414;
    --color-input-group-border: #7a1f1f;
    --color-input-group-text: #f5d18a;

    --color-form-readonly-bg: #221818;
    --color-form-readonly-border: #4a2c2c;

    --color-fieldset-border: #4a2c2c;
    --color-legend-text: #f5d18a;
}


/* =========================================================
   THEME 15 — VELVET ABYSS
   ========================================================= */

body.theme-15 {

    --color-page-bg: #120d16;
    --color-main-bg: #1a1321;
    --color-panel-bg: #25182f;
    --color-panel-alt-bg: #321f42;
    --color-panel-dark-bg: #000000;

    --color-navbar-bg: #1a1321;
    --color-footer-bg: #1a1321;
    --color-dropdown-bg: #25182f;

    --color-input-bg: #1a1321;
    --color-input-focus-bg: #321f42;
    --color-disabled-bg: #2a2a2a;

    --color-primary: #b15cff;
    --color-primary-hover: #cf9cff;

    --color-accent: #e4b8ff;
    --color-accent-bright: #ffffff;
    --color-accent-soft: #e4b8ff;

    --color-text: #f7e8ff;
    --color-text-soft: #f7e8ff;
    --color-text-bright: #ffffff;
    --color-text-white: #ffffff;
    --color-text-muted: #aaaaaa;
    --color-text-disabled: #666666;

    --color-border: #b15cff;
    --color-border-light: #e4b8ff;
    --color-border-bright: #ffffff;
    --color-border-dark: #000000;

    --color-shadow-main: rgba(0, 0, 0, 0.95);
    --color-shadow-dark: rgba(0, 0, 0, 1);

    --color-success: #5ed08f;
    --color-warning: #ffd166;
    --color-danger: #ff5c7a;
    --color-info: #b15cff;

    --color-link: #e4b8ff;
    --color-link-hover: #ffffff;
    --color-link-active: #cf9cff;

    --color-button-primary-bg: #b15cff;
    --color-button-primary-hover: #cf9cff;
    --color-button-primary-text: #ffffff;

    --color-button-outline-text: #f7e8ff;
    --color-button-outline-border: #e4b8ff;

    --color-form-bg: #1a1321;
    --color-form-focus-bg: #321f42;
    --color-form-border: #b15cff;
    --color-form-focus-border: #e4b8ff;

    --color-table-bg: #25182f;
    --color-table-row-hover: #321f42;
    --color-table-border: #b15cff;

    --color-dropdown-hover: #321f42;
    --color-dropdown-active: #b15cff;

    --shadow-main:
        0 0 65px rgba(0, 0, 0, 0.95),
        0 0 24px #b15cff;

    --shadow-dropdown:
        0 0 30px rgba(0, 0, 0, 0.98),
        0 0 14px #e4b8ff;

    --shadow-card:
        0 10px 32px rgba(0, 0, 0, 0.72);

    --fog-opacity: 0.45;
    --fog-brightness: 0.82;
    --fog-contrast: 1.25;
    --fog-saturate: 1.15;

    /* IMPORTANT: HARD HEX VALUES FOR VANTA */

    --fog-color-primary: #7b3db0;
    --fog-color-secondary: #08040f;
    --fog-color-highlight: #f0dcff;

    --transition-fast: 0.15s ease;
    --transition-medium: 0.25s ease;
    --transition-slow: 0.45s ease;

    --radius-xs: 2px;
    --radius-sm: 5px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 18px;
    --radius-pill: 999px;

    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;

    --font-weight-normal: 400;
    --font-weight-bold: 700;

    --z-fog: -1;
    --z-content: 1;
    --z-dropdown: 500;
    --z-modal: 1000;


    --color-form-text: #f0e7ff;
    --color-form-placeholder: #9a8cb8;
    --color-form-label: #d5b3ff;
    --color-form-help: #cfc0e8;

    --color-form-error-text: #ffe0ff;
    --color-form-error-bg: #221633;
    --color-form-error-border: #b388ff;

    --color-checkbox-bg: #171021;
    --color-checkbox-border: #8e44ff;
    --color-checkbox-checked: #d5b3ff;
    --color-checkbox-focus: #f0dcff;

    --color-select-arrow: #d5b3ff;

    --color-form-disabled-bg: #21192d;
    --color-form-disabled-text: #84749a;
    --color-form-disabled-border: #534467;

    --color-file-bg: #1b1427;
    --color-file-border: #8e44ff;
    --color-file-text: #f0e7ff;

    --color-range-track: #3f3155;
    --color-range-thumb: #d5b3ff;

    --color-valid: #a6ebb8;
    --color-invalid: #ff8fcf;
    --color-warning: #ffd27a;

    /* Navbar Tokens */
    --color-navbar-text: #f0e7ff;
    --color-navbar-text-hover: #ffffff;
    --color-navbar-text-active: #d5b3ff;
    --color-navbar-text-muted: #aaaaaa;

    --color-navbar-brand: #d5b3ff;
    --color-navbar-brand-hover: #ffffff;

    --color-navbar-link: #f0e7ff;
    --color-navbar-link-hover: #ffffff;
    --color-navbar-link-active: #d5b3ff;

    --color-navbar-dropdown-bg: #24193a;
    --color-navbar-dropdown-border: #8e44ff;
    --color-navbar-dropdown-hover: #32214f;
    --color-navbar-dropdown-active: #8e44ff;

    --color-navbar-dropdown-text: #f0e7ff;
    --color-navbar-dropdown-text-hover: #ffffff;
    --color-navbar-dropdown-text-active: #ffffff;

    --color-navbar-toggler: #d5b3ff;
    --color-navbar-toggler-hover: #32214f;
    --color-navbar-toggler-border: #8e44ff;

    --color-navbar-avatar-border: #d5b3ff;
    --color-navbar-avatar-shadow:
        0 0 10px #d5b3ff55;

    /* Dropdown Tokens */
    --color-dropdown-border: #8e44ff;

    --color-dropdown-shadow:
        0 0 24px rgba(0, 0, 0, 0.75);

    --color-dropdown-text: #f0e7ff;
    --color-dropdown-text-muted: #aaaaaa;
    --color-dropdown-text-hover: #ffffff;
    --color-dropdown-text-active: #ffffff;

    --color-dropdown-selected: #d5b3ff;

    --color-dropdown-header: #d5b3ff;
    --color-dropdown-header-border: #8e44ff;

    --color-dropdown-divider: #8e44ff;

    --color-dropdown-icon: #d5b3ff;
    --color-dropdown-icon-hover: #ffffff;

    --color-dropdown-focus-ring:
        0 0 0 0.2rem #d5b3ff44;

    --color-dropdown-disabled-bg: #222222;
    --color-dropdown-disabled-text: #777777;

    --color-dropdown-submenu-bg: #24193a;
    --color-dropdown-submenu-border: #8e44ff;
    --color-dropdown-submenu-hover: #32214f;

    --color-form-bg-hover: #241414;
    --color-form-bg-focus: #301818;

    --color-form-border-hover: #a62d2d;
    --color-form-border-focus: #d4a85f;

    --color-form-focus-ring:
        rgba(212, 168, 95, 0.24);

    --color-form-autofill-bg: #301818;
    --color-form-autofill-text: #ffffff;

    --color-input-group-bg: #241414;
    --color-input-group-border: #7a1f1f;
    --color-input-group-text: #f5d18a;

    --color-form-readonly-bg: #221818;
    --color-form-readonly-border: #4a2c2c;

    --color-fieldset-border: #4a2c2c;
    --color-legend-text: #f5d18a;
}


/* =========================================================
   THEME 16 — ARCANE VIOLET
   ========================================================= */

body.theme-16 {

    --color-page-bg: #16111f;
    --color-main-bg: #21192d;
    --color-panel-bg: #2e2140;
    --color-panel-alt-bg: #412d5c;
    --color-panel-dark-bg: #000000;

    --color-navbar-bg: #21192d;
    --color-footer-bg: #21192d;
    --color-dropdown-bg: #2e2140;

    --color-input-bg: #21192d;
    --color-input-focus-bg: #412d5c;
    --color-disabled-bg: #2a2a2a;

    --color-primary: #9f6fff;
    --color-primary-hover: #c3a3ff;

    --color-accent: #d8c4ff;
    --color-accent-bright: #ffffff;
    --color-accent-soft: #d8c4ff;

    --color-text: #f0e8ff;
    --color-text-soft: #f0e8ff;
    --color-text-bright: #ffffff;
    --color-text-white: #ffffff;
    --color-text-muted: #aaaaaa;
    --color-text-disabled: #666666;

    --color-border: #9f6fff;
    --color-border-light: #d8c4ff;
    --color-border-bright: #ffffff;
    --color-border-dark: #000000;

    --color-shadow-main: rgba(0, 0, 0, 0.95);
    --color-shadow-dark: rgba(0, 0, 0, 1);

    --color-success: #5ed08f;
    --color-warning: #ffd166;
    --color-danger: #ff5c7a;
    --color-info: #9f6fff;

    --color-link: #d8c4ff;
    --color-link-hover: #ffffff;
    --color-link-active: #c3a3ff;

    --color-button-primary-bg: #9f6fff;
    --color-button-primary-hover: #c3a3ff;
    --color-button-primary-text: #ffffff;

    --color-button-outline-text: #f0e8ff;
    --color-button-outline-border: #d8c4ff;

    --color-form-bg: #21192d;
    --color-form-focus-bg: #412d5c;
    --color-form-border: #9f6fff;
    --color-form-focus-border: #d8c4ff;

    --color-table-bg: #2e2140;
    --color-table-row-hover: #412d5c;
    --color-table-border: #9f6fff;

    --color-dropdown-hover: #412d5c;
    --color-dropdown-active: #9f6fff;

    --shadow-main:
        0 0 65px rgba(0, 0, 0, 0.95),
        0 0 24px #9f6fff;

    --shadow-dropdown:
        0 0 30px rgba(0, 0, 0, 0.98),
        0 0 14px #d8c4ff;

    --shadow-card:
        0 10px 32px rgba(0, 0, 0, 0.72);

    --fog-opacity: 0.45;
    --fog-brightness: 0.82;
    --fog-contrast: 1.25;
    --fog-saturate: 1.15;

    /* IMPORTANT: HARD HEX VALUES FOR VANTA */

    --fog-color-primary: #7040c4;
    --fog-color-secondary: #0b0614;
    --fog-color-highlight: #efe0ff;

    --transition-fast: 0.15s ease;
    --transition-medium: 0.25s ease;
    --transition-slow: 0.45s ease;

    --radius-xs: 2px;
    --radius-sm: 5px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 18px;
    --radius-pill: 999px;

    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;

    --font-weight-normal: 400;
    --font-weight-bold: 700;

    --z-fog: -1;
    --z-content: 1;
    --z-dropdown: 500;
    --z-modal: 1000;

    --color-form-text: #ffe5e5;
    --color-form-placeholder: #c08a8a;
    --color-form-label: #ffb3b3;
    --color-form-help: #e3bcbc;

    --color-form-error-text: #ffd9d9;
    --color-form-error-bg: #341414;
    --color-form-error-border: #ff5c5c;

    --color-checkbox-bg: #220d0d;
    --color-checkbox-border: #a61f1f;
    --color-checkbox-checked: #ff8080;
    --color-checkbox-focus: #ffc2c2;

    --color-select-arrow: #ff8080;

    --color-form-disabled-bg: #291616;
    --color-form-disabled-text: #8f6e6e;
    --color-form-disabled-border: #5f3434;

    --color-file-bg: #241010;
    --color-file-border: #a61f1f;
    --color-file-text: #ffe5e5;

    --color-range-track: #4a1f1f;
    --color-range-thumb: #ff8080;

    --color-valid: #8fe0a5;
    --color-invalid: #ff6666;
    --color-warning: #ffcc66;

    /* Navbar Tokens */
    --color-navbar-text: #ffe5e5;
    --color-navbar-text-hover: #ffffff;
    --color-navbar-text-active: #ff8080;
    --color-navbar-text-muted: #aaaaaa;

    --color-navbar-brand: #ff8080;
    --color-navbar-brand-hover: #ffffff;

    --color-navbar-link: #ffe5e5;
    --color-navbar-link-hover: #ffffff;
    --color-navbar-link-active: #ff8080;

    --color-navbar-dropdown-bg: #2b1212;
    --color-navbar-dropdown-border: #a61f1f;
    --color-navbar-dropdown-hover: #3b1c1c;
    --color-navbar-dropdown-active: #a61f1f;

    --color-navbar-dropdown-text: #ffe5e5;
    --color-navbar-dropdown-text-hover: #ffffff;
    --color-navbar-dropdown-text-active: #ffffff;

    --color-navbar-toggler: #ff8080;
    --color-navbar-toggler-hover: #3b1c1c;
    --color-navbar-toggler-border: #a61f1f;

    --color-navbar-avatar-border: #ff8080;
    --color-navbar-avatar-shadow:
        0 0 10px #ff808055;

    /* Dropdown Tokens */
    --color-dropdown-border: #a61f1f;

    --color-dropdown-shadow:
        0 0 24px rgba(0, 0, 0, 0.75);

    --color-dropdown-text: #ffe5e5;
    --color-dropdown-text-muted: #aaaaaa;
    --color-dropdown-text-hover: #ffffff;
    --color-dropdown-text-active: #ffffff;

    --color-dropdown-selected: #ff8080;

    --color-dropdown-header: #ff8080;
    --color-dropdown-header-border: #a61f1f;

    --color-dropdown-divider: #a61f1f;

    --color-dropdown-icon: #ff8080;
    --color-dropdown-icon-hover: #ffffff;

    --color-dropdown-focus-ring:
        0 0 0 0.2rem #ff808044;

    --color-dropdown-disabled-bg: #222222;
    --color-dropdown-disabled-text: #777777;

    --color-dropdown-submenu-bg: #2b1212;
    --color-dropdown-submenu-border: #a61f1f;
    --color-dropdown-submenu-hover: #3b1c1c;

    --color-form-bg-hover: #241414;
    --color-form-bg-focus: #301818;

    --color-form-border-hover: #a62d2d;
    --color-form-border-focus: #d4a85f;

    --color-form-focus-ring:
        rgba(212, 168, 95, 0.24);

    --color-form-autofill-bg: #301818;
    --color-form-autofill-text: #ffffff;

    --color-input-group-bg: #241414;
    --color-input-group-border: #7a1f1f;
    --color-input-group-text: #f5d18a;

    --color-form-readonly-bg: #221818;
    --color-form-readonly-border: #4a2c2c;

    --color-fieldset-border: #4a2c2c;
    --color-legend-text: #f5d18a;
}


/* =========================================================
   THEME 17 — COLD STEEL
   ========================================================= */

body.theme-17 {

    --color-page-bg: #0f1418;
    --color-main-bg: #161d24;
    --color-panel-bg: #1f2930;
    --color-panel-alt-bg: #2a3640;
    --color-panel-dark-bg: #000000;

    --color-navbar-bg: #161d24;
    --color-footer-bg: #161d24;
    --color-dropdown-bg: #1f2930;

    --color-input-bg: #161d24;
    --color-input-focus-bg: #2a3640;
    --color-disabled-bg: #2a2a2a;

    --color-primary: #7ca8c4;
    --color-primary-hover: #b2d1e6;

    --color-accent: #d8f0ff;
    --color-accent-bright: #ffffff;
    --color-accent-soft: #d8f0ff;

    --color-text: #e8f6ff;
    --color-text-soft: #e8f6ff;
    --color-text-bright: #ffffff;
    --color-text-white: #ffffff;
    --color-text-muted: #aaaaaa;
    --color-text-disabled: #666666;

    --color-border: #7ca8c4;
    --color-border-light: #d8f0ff;
    --color-border-bright: #ffffff;
    --color-border-dark: #000000;

    --color-shadow-main: rgba(0, 0, 0, 0.95);
    --color-shadow-dark: rgba(0, 0, 0, 1);

    --color-success: #5ed08f;
    --color-warning: #ffd166;
    --color-danger: #ff5c7a;
    --color-info: #7ca8c4;

    --color-link: #d8f0ff;
    --color-link-hover: #ffffff;
    --color-link-active: #b2d1e6;

    --color-button-primary-bg: #7ca8c4;
    --color-button-primary-hover: #b2d1e6;
    --color-button-primary-text: #ffffff;

    --color-button-outline-text: #e8f6ff;
    --color-button-outline-border: #d8f0ff;

    --color-form-bg: #161d24;
    --color-form-focus-bg: #2a3640;
    --color-form-border: #7ca8c4;
    --color-form-focus-border: #d8f0ff;

    --color-table-bg: #1f2930;
    --color-table-row-hover: #2a3640;
    --color-table-border: #7ca8c4;

    --color-dropdown-hover: #2a3640;
    --color-dropdown-active: #7ca8c4;

    --shadow-main:
        0 0 65px rgba(0, 0, 0, 0.95),
        0 0 24px #7ca8c4;

    --shadow-dropdown:
        0 0 30px rgba(0, 0, 0, 0.98),
        0 0 14px #d8f0ff;

    --shadow-card:
        0 10px 32px rgba(0, 0, 0, 0.72);

    --fog-opacity: 0.45;
    --fog-brightness: 0.82;
    --fog-contrast: 1.25;
    --fog-saturate: 1.15;

    /* IMPORTANT: HARD HEX VALUES FOR VANTA */

    --fog-color-primary: #54748a;
    --fog-color-secondary: #05080a;
    --fog-color-highlight: #f0fbff;

    --transition-fast: 0.15s ease;
    --transition-medium: 0.25s ease;
    --transition-slow: 0.45s ease;

    --radius-xs: 2px;
    --radius-sm: 5px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 18px;
    --radius-pill: 999px;

    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;

    --font-weight-normal: 400;
    --font-weight-bold: 700;

    --z-fog: -1;
    --z-content: 1;
    --z-dropdown: 500;
    --z-modal: 1000;


    --color-form-text: #eef8ff;
    --color-form-placeholder: #92a9bb;
    --color-form-label: #d6f0ff;
    --color-form-help: #c9dce8;

    --color-form-error-text: #ffe3e3;
    --color-form-error-bg: #1d2c38;
    --color-form-error-border: #8ed0ff;

    --color-checkbox-bg: #15202a;
    --color-checkbox-border: #5da9d6;
    --color-checkbox-checked: #d6f0ff;
    --color-checkbox-focus: #ffffff;

    --color-select-arrow: #d6f0ff;

    --color-form-disabled-bg: #1b2731;
    --color-form-disabled-text: #72889a;
    --color-form-disabled-border: #45596a;

    --color-file-bg: #16222c;
    --color-file-border: #5da9d6;
    --color-file-text: #eef8ff;

    --color-range-track: #314757;
    --color-range-thumb: #d6f0ff;

    --color-valid: #a5e0c2;
    --color-invalid: #ff9c9c;
    --color-warning: #ffe08a;

    /* Navbar Tokens */
    --color-navbar-text: #eef8ff;
    --color-navbar-text-hover: #ffffff;
    --color-navbar-text-active: #d6f0ff;
    --color-navbar-text-muted: #aaaaaa;

    --color-navbar-brand: #d6f0ff;
    --color-navbar-brand-hover: #ffffff;

    --color-navbar-link: #eef8ff;
    --color-navbar-link-hover: #ffffff;
    --color-navbar-link-active: #d6f0ff;

    --color-navbar-dropdown-bg: #1b2731;
    --color-navbar-dropdown-border: #5da9d6;
    --color-navbar-dropdown-hover: #263847;
    --color-navbar-dropdown-active: #5da9d6;

    --color-navbar-dropdown-text: #eef8ff;
    --color-navbar-dropdown-text-hover: #ffffff;
    --color-navbar-dropdown-text-active: #ffffff;

    --color-navbar-toggler: #d6f0ff;
    --color-navbar-toggler-hover: #263847;
    --color-navbar-toggler-border: #5da9d6;

    --color-navbar-avatar-border: #d6f0ff;
    --color-navbar-avatar-shadow:
        0 0 10px #d6f0ff55;

    /* Dropdown Tokens */
    --color-dropdown-border: #5da9d6;

    --color-dropdown-shadow:
        0 0 24px rgba(0, 0, 0, 0.75);

    --color-dropdown-text: #eef8ff;
    --color-dropdown-text-muted: #aaaaaa;
    --color-dropdown-text-hover: #ffffff;
    --color-dropdown-text-active: #ffffff;

    --color-dropdown-selected: #d6f0ff;

    --color-dropdown-header: #d6f0ff;
    --color-dropdown-header-border: #5da9d6;

    --color-dropdown-divider: #5da9d6;

    --color-dropdown-icon: #d6f0ff;
    --color-dropdown-icon-hover: #ffffff;

    --color-dropdown-focus-ring:
        0 0 0 0.2rem #d6f0ff44;

    --color-dropdown-disabled-bg: #222222;
    --color-dropdown-disabled-text: #777777;

    --color-dropdown-submenu-bg: #1b2731;
    --color-dropdown-submenu-border: #5da9d6;
    --color-dropdown-submenu-hover: #263847;

    --color-form-bg-hover: #241414;
    --color-form-bg-focus: #301818;

    --color-form-border-hover: #a62d2d;
    --color-form-border-focus: #d4a85f;

    --color-form-focus-ring:
        rgba(212, 168, 95, 0.24);

    --color-form-autofill-bg: #301818;
    --color-form-autofill-text: #ffffff;

    --color-input-group-bg: #241414;
    --color-input-group-border: #7a1f1f;
    --color-input-group-text: #f5d18a;

    --color-form-readonly-bg: #221818;
    --color-form-readonly-border: #4a2c2c;

    --color-fieldset-border: #4a2c2c;
    --color-legend-text: #f5d18a;
}


/* =========================================================
   THEME 18 — DUST KINGDOM
   ========================================================= */

body.theme-18 {

    --color-page-bg: #1c1710;
    --color-main-bg: #2a2218;
    --color-panel-bg: #3a2e1f;
    --color-panel-alt-bg: #4d3e29;
    --color-panel-dark-bg: #000000;

    --color-navbar-bg: #2a2218;
    --color-footer-bg: #2a2218;
    --color-dropdown-bg: #3a2e1f;

    --color-input-bg: #2a2218;
    --color-input-focus-bg: #4d3e29;
    --color-disabled-bg: #2a2a2a;

    --color-primary: #d4a15a;
    --color-primary-hover: #ebc17f;

    --color-accent: #ffe0b0;
    --color-accent-bright: #ffffff;
    --color-accent-soft: #ffe0b0;

    --color-text: #fff0dc;
    --color-text-soft: #fff0dc;
    --color-text-bright: #ffffff;
    --color-text-white: #ffffff;
    --color-text-muted: #aaaaaa;
    --color-text-disabled: #666666;

    --color-border: #d4a15a;
    --color-border-light: #ffe0b0;
    --color-border-bright: #ffffff;
    --color-border-dark: #000000;

    --color-shadow-main: rgba(0, 0, 0, 0.95);
    --color-shadow-dark: rgba(0, 0, 0, 1);

    --color-success: #5ed08f;
    --color-warning: #ffd166;
    --color-danger: #ff5c7a;
    --color-info: #d4a15a;

    --color-link: #ffe0b0;
    --color-link-hover: #ffffff;
    --color-link-active: #ebc17f;

    --color-button-primary-bg: #d4a15a;
    --color-button-primary-hover: #ebc17f;
    --color-button-primary-text: #ffffff;

    --color-button-outline-text: #fff0dc;
    --color-button-outline-border: #ffe0b0;

    --color-form-bg: #2a2218;
    --color-form-focus-bg: #4d3e29;
    --color-form-border: #d4a15a;
    --color-form-focus-border: #ffe0b0;

    --color-table-bg: #3a2e1f;
    --color-table-row-hover: #4d3e29;
    --color-table-border: #d4a15a;

    --color-dropdown-hover: #4d3e29;
    --color-dropdown-active: #d4a15a;

    --shadow-main:
        0 0 65px rgba(0, 0, 0, 0.95),
        0 0 24px #d4a15a;

    --shadow-dropdown:
        0 0 30px rgba(0, 0, 0, 0.98),
        0 0 14px #ffe0b0;

    --shadow-card:
        0 10px 32px rgba(0, 0, 0, 0.72);

    --fog-opacity: 0.45;
    --fog-brightness: 0.82;
    --fog-contrast: 1.25;
    --fog-saturate: 1.15;

    /* IMPORTANT: HARD HEX VALUES FOR VANTA */

    --fog-color-primary: #9e6f2e;
    --fog-color-secondary: #120d05;
    --fog-color-highlight: #fff0d0;

    --transition-fast: 0.15s ease;
    --transition-medium: 0.25s ease;
    --transition-slow: 0.45s ease;

    --radius-xs: 2px;
    --radius-sm: 5px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 18px;
    --radius-pill: 999px;

    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;

    --font-weight-normal: 400;
    --font-weight-bold: 700;

    --z-fog: -1;
    --z-content: 1;
    --z-dropdown: 500;
    --z-modal: 1000;

    --color-form-text: #f1ffe0;
    --color-form-placeholder: #a0b57a;
    --color-form-label: #d4ff8c;
    --color-form-help: #d2e6b4;

    --color-form-error-text: #ffe0e0;
    --color-form-error-bg: #263317;
    --color-form-error-border: #c0ff5c;

    --color-checkbox-bg: #1a220f;
    --color-checkbox-border: #89c93d;
    --color-checkbox-checked: #d4ff8c;
    --color-checkbox-focus: #efffc7;

    --color-select-arrow: #d4ff8c;

    --color-form-disabled-bg: #222b17;
    --color-form-disabled-text: #81916b;
    --color-form-disabled-border: #506238;

    --color-file-bg: #1d2612;
    --color-file-border: #89c93d;
    --color-file-text: #f1ffe0;

    --color-range-track: #3f5525;
    --color-range-thumb: #d4ff8c;

    --color-valid: #9cff9c;
    --color-invalid: #ff8f8f;
    --color-warning: #ffe27a;

    /* Navbar Tokens */
    --color-navbar-text: #f1ffe0;
    --color-navbar-text-hover: #ffffff;
    --color-navbar-text-active: #d4ff8c;
    --color-navbar-text-muted: #aaaaaa;

    --color-navbar-brand: #d4ff8c;
    --color-navbar-brand-hover: #ffffff;

    --color-navbar-link: #f1ffe0;
    --color-navbar-link-hover: #ffffff;
    --color-navbar-link-active: #d4ff8c;

    --color-navbar-dropdown-bg: #263317;
    --color-navbar-dropdown-border: #89c93d;
    --color-navbar-dropdown-hover: #364822;
    --color-navbar-dropdown-active: #89c93d;

    --color-navbar-dropdown-text: #f1ffe0;
    --color-navbar-dropdown-text-hover: #ffffff;
    --color-navbar-dropdown-text-active: #ffffff;

    --color-navbar-toggler: #d4ff8c;
    --color-navbar-toggler-hover: #364822;
    --color-navbar-toggler-border: #89c93d;

    --color-navbar-avatar-border: #d4ff8c;
    --color-navbar-avatar-shadow:
        0 0 10px #d4ff8c55;

    /* Dropdown Tokens */
    --color-dropdown-border: #89c93d;

    --color-dropdown-shadow:
        0 0 24px rgba(0, 0, 0, 0.75);

    --color-dropdown-text: #f1ffe0;
    --color-dropdown-text-muted: #aaaaaa;
    --color-dropdown-text-hover: #ffffff;
    --color-dropdown-text-active: #ffffff;

    --color-dropdown-selected: #d4ff8c;

    --color-dropdown-header: #d4ff8c;
    --color-dropdown-header-border: #89c93d;

    --color-dropdown-divider: #89c93d;

    --color-dropdown-icon: #d4ff8c;
    --color-dropdown-icon-hover: #ffffff;

    --color-dropdown-focus-ring:
        0 0 0 0.2rem #d4ff8c44;

    --color-dropdown-disabled-bg: #222222;
    --color-dropdown-disabled-text: #777777;

    --color-dropdown-submenu-bg: #263317;
    --color-dropdown-submenu-border: #89c93d;
    --color-dropdown-submenu-hover: #364822;

    --color-form-bg-hover: #241414;
    --color-form-bg-focus: #301818;

    --color-form-border-hover: #a62d2d;
    --color-form-border-focus: #d4a85f;

    --color-form-focus-ring:
        rgba(212, 168, 95, 0.24);

    --color-form-autofill-bg: #301818;
    --color-form-autofill-text: #ffffff;

    --color-input-group-bg: #241414;
    --color-input-group-border: #7a1f1f;
    --color-input-group-text: #f5d18a;

    --color-form-readonly-bg: #221818;
    --color-form-readonly-border: #4a2c2c;

    --color-fieldset-border: #4a2c2c;
    --color-legend-text: #f5d18a;
}


/* =========================================================
   THEME 19 — EMERALD VEIL
   ========================================================= */

body.theme-19 {

    --color-page-bg: #0f1813;
    --color-main-bg: #17241b;
    --color-panel-bg: #223526;
    --color-panel-alt-bg: #2f4a37;
    --color-panel-dark-bg: #000000;

    --color-navbar-bg: #17241b;
    --color-footer-bg: #17241b;
    --color-dropdown-bg: #223526;

    --color-input-bg: #17241b;
    --color-input-focus-bg: #2f4a37;
    --color-disabled-bg: #2a2a2a;

    --color-primary: #66d48f;
    --color-primary-hover: #a2f0be;

    --color-accent: #d0ffe0;
    --color-accent-bright: #ffffff;
    --color-accent-soft: #d0ffe0;

    --color-text: #e8fff0;
    --color-text-soft: #e8fff0;
    --color-text-bright: #ffffff;
    --color-text-white: #ffffff;
    --color-text-muted: #aaaaaa;
    --color-text-disabled: #666666;

    --color-border: #66d48f;
    --color-border-light: #d0ffe0;
    --color-border-bright: #ffffff;
    --color-border-dark: #000000;

    --color-shadow-main: rgba(0, 0, 0, 0.95);
    --color-shadow-dark: rgba(0, 0, 0, 1);

    --color-success: #5ed08f;
    --color-warning: #ffd166;
    --color-danger: #ff5c7a;
    --color-info: #66d48f;

    --color-link: #d0ffe0;
    --color-link-hover: #ffffff;
    --color-link-active: #a2f0be;

    --color-button-primary-bg: #66d48f;
    --color-button-primary-hover: #a2f0be;
    --color-button-primary-text: #ffffff;

    --color-button-outline-text: #e8fff0;
    --color-button-outline-border: #d0ffe0;

    --color-form-bg: #17241b;
    --color-form-focus-bg: #2f4a37;
    --color-form-border: #66d48f;
    --color-form-focus-border: #d0ffe0;

    --color-table-bg: #223526;
    --color-table-row-hover: #2f4a37;
    --color-table-border: #66d48f;

    --color-dropdown-hover: #2f4a37;
    --color-dropdown-active: #66d48f;

    --shadow-main:
        0 0 65px rgba(0, 0, 0, 0.95),
        0 0 24px #66d48f;

    --shadow-dropdown:
        0 0 30px rgba(0, 0, 0, 0.98),
        0 0 14px #d0ffe0;

    --shadow-card:
        0 10px 32px rgba(0, 0, 0, 0.72);

    --fog-opacity: 0.45;
    --fog-brightness: 0.82;
    --fog-contrast: 1.25;
    --fog-saturate: 1.15;

    /* IMPORTANT: HARD HEX VALUES FOR VANTA */

    --fog-color-primary: #3c9c60;
    --fog-color-secondary: #07100a;
    --fog-color-highlight: #f0fff5;

    --transition-fast: 0.15s ease;
    --transition-medium: 0.25s ease;
    --transition-slow: 0.45s ease;

    --radius-xs: 2px;
    --radius-sm: 5px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 18px;
    --radius-pill: 999px;

    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;

    --font-weight-normal: 400;
    --font-weight-bold: 700;

    --z-fog: -1;
    --z-content: 1;
    --z-dropdown: 500;
    --z-modal: 1000;

    --color-form-text: #fff0f6;
    --color-form-placeholder: #b596a5;
    --color-form-label: #ffc1da;
    --color-form-help: #e7c9d6;

    --color-form-error-text: #ffe0ea;
    --color-form-error-bg: #2c1822;
    --color-form-error-border: #ff7aa8;

    --color-checkbox-bg: #1d1117;
    --color-checkbox-border: #c24b78;
    --color-checkbox-checked: #ff9dc2;
    --color-checkbox-focus: #ffd6e6;

    --color-select-arrow: #ff9dc2;

    --color-form-disabled-bg: #25161d;
    --color-form-disabled-text: #927483;
    --color-form-disabled-border: #5c3c49;

    --color-file-bg: #21131a;
    --color-file-border: #c24b78;
    --color-file-text: #fff0f6;

    --color-range-track: #4b2634;
    --color-range-thumb: #ff9dc2;

    --color-valid: #a8e8b8;
    --color-invalid: #ff7098;
    --color-warning: #ffd27a;

    /* Navbar Tokens */
    --color-navbar-text: #fff0f6;
    --color-navbar-text-hover: #ffffff;
    --color-navbar-text-active: #ff9dc2;
    --color-navbar-text-muted: #aaaaaa;

    --color-navbar-brand: #ff9dc2;
    --color-navbar-brand-hover: #ffffff;

    --color-navbar-link: #fff0f6;
    --color-navbar-link-hover: #ffffff;
    --color-navbar-link-active: #ff9dc2;

    --color-navbar-dropdown-bg: #2c1822;
    --color-navbar-dropdown-border: #c24b78;
    --color-navbar-dropdown-hover: #3d2330;
    --color-navbar-dropdown-active: #c24b78;

    --color-navbar-dropdown-text: #fff0f6;
    --color-navbar-dropdown-text-hover: #ffffff;
    --color-navbar-dropdown-text-active: #ffffff;

    --color-navbar-toggler: #ff9dc2;
    --color-navbar-toggler-hover: #3d2330;
    --color-navbar-toggler-border: #c24b78;

    --color-navbar-avatar-border: #ff9dc2;
    --color-navbar-avatar-shadow:
        0 0 10px #ff9dc255;

    /* Dropdown Tokens */
    --color-dropdown-border: #c24b78;

    --color-dropdown-shadow:
        0 0 24px rgba(0, 0, 0, 0.75);

    --color-dropdown-text: #fff0f6;
    --color-dropdown-text-muted: #aaaaaa;
    --color-dropdown-text-hover: #ffffff;
    --color-dropdown-text-active: #ffffff;

    --color-dropdown-selected: #ff9dc2;

    --color-dropdown-header: #ff9dc2;
    --color-dropdown-header-border: #c24b78;

    --color-dropdown-divider: #c24b78;

    --color-dropdown-icon: #ff9dc2;
    --color-dropdown-icon-hover: #ffffff;

    --color-dropdown-focus-ring:
        0 0 0 0.2rem #ff9dc244;

    --color-dropdown-disabled-bg: #222222;
    --color-dropdown-disabled-text: #777777;

    --color-dropdown-submenu-bg: #2c1822;
    --color-dropdown-submenu-border: #c24b78;
    --color-dropdown-submenu-hover: #3d2330;

    --color-form-bg-hover: #241414;
    --color-form-bg-focus: #301818;

    --color-form-border-hover: #a62d2d;
    --color-form-border-focus: #d4a85f;

    --color-form-focus-ring:
        rgba(212, 168, 95, 0.24);

    --color-form-autofill-bg: #301818;
    --color-form-autofill-text: #ffffff;

    --color-input-group-bg: #241414;
    --color-input-group-border: #7a1f1f;
    --color-input-group-text: #f5d18a;

    --color-form-readonly-bg: #221818;
    --color-form-readonly-border: #4a2c2c;

    --color-fieldset-border: #4a2c2c;
    --color-legend-text: #f5d18a;
}


/* =========================================================
   THEME 20 — VOID SIGNAL
   ========================================================= */

body.theme-20 {

    --color-page-bg: #05060a;
    --color-main-bg: #0b0d14;
    --color-panel-bg: #121621;
    --color-panel-alt-bg: #1a1f2d;
    --color-panel-dark-bg: #000000;

    --color-navbar-bg: #0b0d14;
    --color-footer-bg: #0b0d14;
    --color-dropdown-bg: #121621;

    --color-input-bg: #0b0d14;
    --color-input-focus-bg: #1a1f2d;
    --color-disabled-bg: #2a2a2a;

    --color-primary: #8f7cff;
    --color-primary-hover: #c0b7ff;

    --color-accent: #c9c2ff;
    --color-accent-bright: #ffffff;
    --color-accent-soft: #c9c2ff;

    --color-text: #ece9ff;
    --color-text-soft: #ece9ff;
    --color-text-bright: #ffffff;
    --color-text-white: #ffffff;
    --color-text-muted: #aaaaaa;
    --color-text-disabled: #666666;

    --color-border: #8f7cff;
    --color-border-light: #c9c2ff;
    --color-border-bright: #ffffff;
    --color-border-dark: #000000;

    --color-shadow-main: rgba(0, 0, 0, 0.95);
    --color-shadow-dark: rgba(0, 0, 0, 1);

    --color-success: #5ed08f;
    --color-warning: #ffd166;
    --color-danger: #ff5c7a;
    --color-info: #8f7cff;

    --color-link: #c9c2ff;
    --color-link-hover: #ffffff;
    --color-link-active: #c0b7ff;

    --color-button-primary-bg: #8f7cff;
    --color-button-primary-hover: #c0b7ff;
    --color-button-primary-text: #ffffff;

    --color-button-outline-text: #ece9ff;
    --color-button-outline-border: #c9c2ff;

    --color-form-bg: #0b0d14;
    --color-form-focus-bg: #1a1f2d;
    --color-form-border: #8f7cff;
    --color-form-focus-border: #c9c2ff;

    --color-table-bg: #121621;
    --color-table-row-hover: #1a1f2d;
    --color-table-border: #8f7cff;

    --color-dropdown-hover: #1a1f2d;
    --color-dropdown-active: #8f7cff;

    --shadow-main:
        0 0 65px rgba(0, 0, 0, 0.95),
        0 0 24px #8f7cff;

    --shadow-dropdown:
        0 0 30px rgba(0, 0, 0, 0.98),
        0 0 14px #c9c2ff;

    --shadow-card:
        0 10px 32px rgba(0, 0, 0, 0.72);

    --fog-opacity: 0.45;
    --fog-brightness: 0.82;
    --fog-contrast: 1.25;
    --fog-saturate: 1.15;

    /* IMPORTANT: HARD HEX VALUES FOR VANTA */

    --fog-color-primary: #5f4fc2;
    --fog-color-secondary: #000000;
    --fog-color-highlight: #f0edff;

    --transition-fast: 0.15s ease;
    --transition-medium: 0.25s ease;
    --transition-slow: 0.45s ease;

    --radius-xs: 2px;
    --radius-sm: 5px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 18px;
    --radius-pill: 999px;

    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;

    --font-weight-normal: 400;
    --font-weight-bold: 700;

    --z-fog: -1;
    --z-content: 1;
    --z-dropdown: 500;
    --z-modal: 1000;


    --color-form-text: #f5f2ff;
    --color-form-placeholder: #a59bc4;
    --color-form-label: #d9ccff;
    --color-form-help: #d8d0eb;

    --color-form-error-text: #ffe6f5;
    --color-form-error-bg: #241c36;
    --color-form-error-border: #b89cff;

    --color-checkbox-bg: #191325;
    --color-checkbox-border: #8d72d6;
    --color-checkbox-checked: #d9ccff;
    --color-checkbox-focus: #f2ebff;

    --color-select-arrow: #d9ccff;

    --color-form-disabled-bg: #221b30;
    --color-form-disabled-text: #847a9f;
    --color-form-disabled-border: #51466b;

    --color-file-bg: #1d1729;
    --color-file-border: #8d72d6;
    --color-file-text: #f5f2ff;

    --color-range-track: #3b3155;
    --color-range-thumb: #d9ccff;

    --color-valid: #a7e3c0;
    --color-invalid: #ff9fcf;
    --color-warning: #ffe08a;

    /* Navbar Tokens */
    --color-navbar-text: #f5f2ff;
    --color-navbar-text-hover: #ffffff;
    --color-navbar-text-active: #d9ccff;
    --color-navbar-text-muted: #aaaaaa;

    --color-navbar-brand: #d9ccff;
    --color-navbar-brand-hover: #ffffff;

    --color-navbar-link: #f5f2ff;
    --color-navbar-link-hover: #ffffff;
    --color-navbar-link-active: #d9ccff;

    --color-navbar-dropdown-bg: #241c36;
    --color-navbar-dropdown-border: #8d72d6;
    --color-navbar-dropdown-hover: #32284a;
    --color-navbar-dropdown-active: #8d72d6;

    --color-navbar-dropdown-text: #f5f2ff;
    --color-navbar-dropdown-text-hover: #ffffff;
    --color-navbar-dropdown-text-active: #ffffff;

    --color-navbar-toggler: #d9ccff;
    --color-navbar-toggler-hover: #32284a;
    --color-navbar-toggler-border: #8d72d6;

    --color-navbar-avatar-border: #d9ccff;
    --color-navbar-avatar-shadow:
        0 0 10px #d9ccff55;

    /* Dropdown Tokens */
    --color-dropdown-border: #8d72d6;

    --color-dropdown-shadow:
        0 0 24px rgba(0, 0, 0, 0.75);

    --color-dropdown-text: #f5f2ff;
    --color-dropdown-text-muted: #aaaaaa;
    --color-dropdown-text-hover: #ffffff;
    --color-dropdown-text-active: #ffffff;

    --color-dropdown-selected: #d9ccff;

    --color-dropdown-header: #d9ccff;
    --color-dropdown-header-border: #8d72d6;

    --color-dropdown-divider: #8d72d6;

    --color-dropdown-icon: #d9ccff;
    --color-dropdown-icon-hover: #ffffff;

    --color-dropdown-focus-ring:
        0 0 0 0.2rem #d9ccff44;

    --color-dropdown-disabled-bg: #222222;
    --color-dropdown-disabled-text: #777777;

    --color-dropdown-submenu-bg: #241c36;
    --color-dropdown-submenu-border: #8d72d6;
    --color-dropdown-submenu-hover: #32284a;

    --color-form-bg-hover: #241414;
    --color-form-bg-focus: #301818;

    --color-form-border-hover: #a62d2d;
    --color-form-border-focus: #d4a85f;

    --color-form-focus-ring:
        rgba(212, 168, 95, 0.24);

    --color-form-autofill-bg: #301818;
    --color-form-autofill-text: #ffffff;

    --color-input-group-bg: #241414;
    --color-input-group-border: #7a1f1f;
    --color-input-group-text: #f5d18a;

    --color-form-readonly-bg: #221818;
    --color-form-readonly-border: #4a2c2c;

    --color-fieldset-border: #4a2c2c;
    --color-legend-text: #f5d18a;
}