:root {
    /* === Theme Colors === */
    --bg-color: #050505;
    --text-color: #00ff00;
    --dim-color: #005500;
    --accent-color: #ccffcc;
    --success-color: #00ff00;
    --warning-color: #ffff00;
    --error-color: #ff0000;
    --special-color: #00ffff;
    --glow-spread: 2px;

    /* RGB versions for rgba() calculations */
    --accent-color-rgb: 204, 255, 204;
    --success-color-rgb: 0, 255, 0;
    --warning-color-rgb: 255, 255, 0;
    --error-color-rgb: 255, 0, 0;
    --special-color-rgb: 0, 255, 255;

    /* === Item Rarity Colors === */
    --rarity-basic: #666666;
    --rarity-common: #ffffff;
    --rarity-uncommon: #00cc00;
    --rarity-rare: #3399ff;
    --rarity-epic: #cc66ff;
    --rarity-basic-rgb: 102, 102, 102;
    --rarity-common-rgb: 255, 255, 255;
    --rarity-uncommon-rgb: 0, 204, 0;
    --rarity-rare-rgb: 51, 153, 255;
    --rarity-epic-rgb: 204, 102, 255;

    /* === Spacing Scale === */
    --spacing-xs: 4px;
    --spacing-sm: 6px;
    --spacing-base: 10px;
    --spacing-lg: 12px;

    /* === Overlay Opacity Scale === */
    --overlay-light: rgba(0, 0, 0, 0.1);
    --overlay-medium: rgba(0, 0, 0, 0.2);

    /* === Transition Timing === */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.2s ease;

    /* === UI Mode Foundation Tokens (Layer B: classic defaults) === */
    /* Literal-value tokens that don't reference theme palette variables */

    /* Border Radius */
    --ui-radius-xs: 0px;
    --ui-radius-sm: 3px;
    --ui-radius-md: 4px;
    --ui-radius-lg: 4px;
    --ui-radius-xl: 8px;
    --ui-radius-full: 2px;

    /* Shadows */
    --ui-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
    --ui-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
    --ui-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.5);

    /* Surfaces */
    --ui-surface-1: rgba(0, 0, 0, 0.5);
    --ui-surface-2: rgba(0, 0, 0, 0.3);
    --ui-surface-hover: rgba(255, 255, 255, 0.1);

    /* Motion / Transforms */
    --ui-transform-hover-lift: translateY(-1px);
    --ui-transform-active-press: translateY(0);
}

/* Theme-referencing tokens must be on body (same level as body.theme-*)
   so var() references to palette variables resolve with the active theme. */
body {
    /* === Layer B tokens that reference theme palette === */
    --ui-border-subtle: 1px solid var(--dim-color);
    --ui-border-light: 1px solid var(--dim-color);
    --ui-border-accent: 1px solid var(--accent-color);
    --ui-focus-ring: 0 0 8px var(--accent-color);

    /* === Component Tokens (Layer C: classic defaults) === */
    /* Panels */
    --panel-bg: linear-gradient(
        180deg,
        rgba(18, 28, 38, 0.9) 0%,
        rgba(8, 12, 18, 0.86) 100%
    );
    --panel-border: 1px solid var(--dim-color);
    --panel-radius: var(--ui-radius-md);
    --panel-shadow: var(--ui-shadow-md);
    --panel-backdrop-filter: none;
    --panel-header-bg: var(--accent-color);
    --panel-header-color: var(--bg-color);
    --panel-header-padding: 3px 8px;
    --panel-header-accent-width: 0;

    /* Buttons */
    --btn-bg: var(--accent-color);
    --btn-fg: var(--bg-color);
    --btn-border: none;
    --btn-radius: var(--ui-radius-sm);
    --btn-shadow: var(--ui-shadow-sm);
    --btn-hover-bg: var(--special-color);
    --btn-hover-transform: var(--ui-transform-hover-lift);
    --btn-hover-shadow: var(--ui-shadow-md);
    --btn-active-transform: var(--ui-transform-active-press);
    --btn-disabled-opacity: 0.6;
    --btn-variant-secondary-bg: transparent;
    --btn-variant-ghost-border: 1px solid var(--accent-color);
    --btn-variant-danger-bg: var(--error-color);
    --btn-secondary-bg: var(--btn-bg);
    --btn-secondary-color: var(--btn-fg);
    --btn-secondary-border: var(--btn-border);
    --btn-secondary-hover-bg: var(--btn-hover-bg);
    --btn-secondary-hover-border-color: transparent;
    --btn-secondary-hover-shadow: var(--btn-hover-shadow);
    --btn-ghost-bg: transparent;
    --btn-ghost-color: var(--accent-color);
    --btn-ghost-border: var(--btn-variant-ghost-border);
    --btn-ghost-shadow: none;
    --btn-ghost-hover-bg: rgba(var(--accent-color-rgb), 0.1);
    --btn-ghost-hover-shadow: var(--btn-hover-shadow);
    --btn-danger-bg: var(--btn-variant-danger-bg);
    --btn-danger-color: #ffffff;
    --btn-danger-hover-bg: var(--btn-danger-bg);
    --btn-danger-hover-color: var(--btn-danger-color);
    --btn-danger-shadow: none;
    --btn-danger-hover-shadow: var(--btn-hover-shadow);
    --btn-success-bg: var(--success-color);
    --btn-success-color: var(--bg-color);
    --btn-success-shadow: none;
    --btn-success-hover-shadow: var(--btn-hover-shadow);
    --btn-sm-padding: 4px 10px;
    --btn-sm-font-size: 0.75rem;
    --btn-lg-padding: 10px 22px;
    --btn-lg-font-size: 1rem;
    --btn-lg-radius: var(--btn-radius);
    --btn-icon-padding: 6px;
    --btn-icon-size: 32px;

    /* Inputs */
    --input-bg: #111;
    --input-border: var(--ui-border-light);
    --input-radius: var(--ui-radius-sm);
    --input-padding: 6px 8px;
    --input-font-size: inherit;
    --input-placeholder-color: var(--dim-color);
    --input-placeholder-opacity: 1;
    --input-hover-border-color: var(--accent-color);
    --input-hover-shadow: none;
    --input-focus-shadow: 0 0 8px var(--accent-color);
    --input-focus-bg: var(--input-bg);
    --checkbox-appearance: auto;
    --checkbox-width: auto;
    --checkbox-min-width: auto;
    --checkbox-height: auto;
    --checkbox-flex: initial;
    --checkbox-padding: initial;
    --checkbox-margin: 0;
    --checkbox-bg: transparent;
    --checkbox-border: none;
    --checkbox-radius: 0;
    --checkbox-position: static;
    --checkbox-accent: var(--accent-color);
    --checkbox-transition: none;
    --checkbox-hover-border-color: currentColor;
    --checkbox-checked-bg: var(--checkbox-bg);
    --checkbox-checked-border-color: var(--checkbox-hover-border-color);
    --checkbox-check-content: none;
    --checkbox-check-left: auto;
    --checkbox-check-top: auto;
    --checkbox-check-width: auto;
    --checkbox-check-height: auto;
    --checkbox-check-border: none;
    --checkbox-check-border-width: 0;
    --checkbox-check-transform: none;
    --checkbox-focus-outline: auto;
    --checkbox-focus-shadow: none;
    --select-appearance: auto;
    --select-bg-image: none;
    --select-bg-position: initial;
    --select-padding-right: initial;
    --select-option-bg: var(--bg-color);
    --select-option-color: var(--text-color);
    --select-optgroup-bg: var(--bg-color);
    --select-optgroup-color: var(--accent-color);
    --select-optgroup-font-weight: 600;

    /* Tabs */
    --tab-bg: transparent;
    --tab-color: var(--text-color);
    --tab-padding: 0.6rem 1rem;
    --tab-active-bg: rgba(255, 255, 255, 0.08);
    --tab-active-color: var(--accent-color);
    --tab-active-border-color: var(--accent-color);

    /* Menu Links */
    --menu-link-padding: 2px;
    --menu-content-padding: 10px;
    --menu-content-gap: 5px;
    --menu-link-border: 1px solid transparent;
    --menu-link-radius: var(--ui-radius-sm);
    --menu-link-font-size: inherit;
    --menu-link-font-weight: 400;
    --menu-link-bg: transparent;
    --menu-link-hover-bg: rgba(255, 255, 255, 0.1);
    --menu-link-hover-border-color: var(--accent-color);
    --menu-link-hover-color: var(--accent-color);
    --menu-link-hover-transform: translateX(3px);
    --menu-link-hover-box-shadow: -2px 0 0 var(--accent-color);
    --menu-link-hitarea-inset: 0;
    --menu-link-hover-shift: 0px;
    --menu-link-accent-bar-width: 0;
    --menu-link-focus-shadow: none;
    --menu-link-active-bg: rgba(255, 255, 255, 0.05);
    --menu-link-active-color: var(--accent-color);
    --menu-link-active-box-shadow: -2px 0 0 var(--accent-color);
    --menu-mobile-select-padding: 8px;
    --menu-mobile-select-bg: var(--bg-color);
    --menu-mobile-select-color: var(--text-color);
    --menu-mobile-select-border: 1px solid var(--dim-color);
    --menu-mobile-select-radius: 0;
    --menu-mobile-select-font-size: 0.9em;
    --menu-separator-border-top: 1px solid var(--dim-color);
    --menu-separator-margin: 8px 0;

    /* Profile link */
    --profile-link-padding: 5px;
    --profile-link-border: 1px solid var(--dim-color);
    --profile-link-radius: var(--ui-radius-sm);
    --profile-link-bg: transparent;
    --profile-link-font-weight: 400;
    --profile-link-accent-border-color: var(--special-color);
    --profile-link-hover-border-color: var(--special-color);
    --profile-link-hover-bg: rgba(255, 255, 255, 0.1);
    --profile-link-hover-color: var(--special-color);
    --profile-link-hover-transform: none;
    --profile-link-hover-box-shadow: none;

    /* Chat */
    --chat-tabs-bg: var(--ui-surface-2);
    --chat-tab-radius: var(--ui-radius-sm) var(--ui-radius-sm) 0 0;
    --chat-tab-border: 1px solid var(--dim-color);

    /* Progress */
    --progress-height: 12px;
    --progress-with-label-height: 20px;
    --progress-bg: #111;
    --progress-border: var(--ui-border-light);
    --progress-shadow: var(--ui-shadow-sm);
    --progress-fill-bg: var(--success-color);
    --progress-fill-transition: width 0.1s linear;
    --progress-radius: var(--ui-radius-full);
    --progress-shimmer-opacity: 0;
    --progress-shimmer-animation: none;
    --progress-shimmer-bg: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.2) 50%,
        transparent 100%
    );
    --progress-label-inside-color: var(--text-color);
    --progress-label-inside-font-size: 0.75em;
    --progress-label-inside-font-weight: bold;
    --progress-label-inside-text-shadow:
        -1px -1px 0 var(--bg-color),
        1px -1px 0 var(--bg-color),
        -1px 1px 0 var(--bg-color),
        1px 1px 0 var(--bg-color);
    --progress-label-above-font-size: 0.75em;
    --progress-label-above-font-weight: 400;
    --progress-label-above-margin-bottom: 0;
    --prog-level-bg: var(--progress-fill-bg);
    --prog-hack-xp-bg: var(--special-color);
    --prog-current-bg: var(--accent-color);

    /* Shared panel/content controls */
    --content-panel-body-padding: 12px;
    --content-placeholder-border: 1px dashed var(--dim-color);
    --content-placeholder-radius: 0;
    --content-placeholder-padding: 12px;
    --content-placeholder-gap: 6px;
    --content-placeholder-bg: rgba(0, 0, 0, 0.2);
    --settings-group-border: 1px solid var(--dim-color);
    --settings-group-radius: 0;
    --settings-group-padding: 10px;
    --settings-group-margin-bottom: 12px;
    --settings-group-bg: rgba(0, 0, 0, 0.2);
    --settings-group-transition-speed: 0.15s;
    --settings-group-hover-border-color: var(--text-color);
    --settings-group-hover-bg: rgba(0, 0, 0, 0.3);
    --settings-group-select-margin-top: 8px;
    --settings-group-stat-label-border-bottom: none;
    --settings-group-stat-label-margin-bottom: 6px;
    --stats-table-container-padding: 15px;
    --stats-col-border-right: 1px solid rgba(255, 255, 255, 0.1);
    --stats-col-padding: 0 15px;
    --stat-row-padding: 1px 0;
    --stat-row-hover-bg: var(--surface-hover, transparent);
    --stat-label-border-bottom: 1px solid var(--dim-color);
    --user-info-content-padding: 15px;
    --user-info-content-gap: 10px;
    --user-info-bars-gap: 4px;
    --stats-section-border: 1px solid var(--dim-color);
    --stats-section-radius: 0;
    --stats-section-padding: 15px;
    --stats-section-bg: rgba(0, 0, 0, 0.2);
    --stats-section-margin-bottom: 0;
    --stats-section-last-margin-bottom: 0;
    --stats-grid-gap: 0.75rem;
    --stats-grid-padding: 0.5rem 0;
    --stat-item-padding: 0.25rem 0.5rem;
    --stat-item-bg: rgba(0, 0, 0, 0.2);
    --stat-item-radius: 3px;
    --stat-item-border: none;
    --stat-item-transition: none;
    --stat-item-hover-border-color: transparent;
    --stat-item-hover-bg: var(--stat-item-bg);
    --stat-item-value-color: var(--accent-color);
    --stat-item-value-font-weight: 600;
    --vertical-tabs-border-right: 1px solid var(--border-color);
    --section-header-font-weight: 600;
    --section-header-color: var(--accent-color);
    --section-header-margin-bottom: 12px;
    --section-header-padding-bottom: 6px;
    --section-header-border-bottom: 1px solid var(--dim-color);
    --section-header-font-size: 0.95em;
    --section-header-letter-spacing: normal;
    --syndicate-leave-btn-padding: 0.5rem;
    --syndicate-leave-btn-font-size: 0.75rem;
    --syndicate-leave-btn-bg: var(--btn-danger-bg);
    --syndicate-leave-btn-color: inherit;
    --syndicate-leave-btn-radius: var(--btn-radius);
    --syndicate-leave-btn-font-weight: inherit;
    --syndicate-leave-btn-shadow: none;
    --syndicate-leave-btn-hover-shadow: var(--syndicate-leave-btn-shadow);
    --syndicate-leave-btn-hover-transform: none;

    /* Shared breakdown table tokens */
    --breakdown-table-width: 100%;
    --breakdown-table-border-collapse: collapse;
    --breakdown-table-border-spacing: 0;
    --breakdown-table-font-size: 0.9em;
    --breakdown-th-bg: transparent;
    --breakdown-th-padding: 8px 12px;
    --breakdown-th-border-bottom: 2px solid var(--dim-color);
    --breakdown-th-color: var(--dim-color);
    --breakdown-th-font-weight: 600;
    --breakdown-th-font-size: 0.85em;
    --breakdown-th-letter-spacing: normal;
    --breakdown-th-text-transform: uppercase;
    --breakdown-th-first-radius: 0;
    --breakdown-th-last-radius: 0;
    --breakdown-td-padding: 8px 12px;
    --breakdown-td-border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    --breakdown-td-transition: none;
    --breakdown-row-hover-bg: rgba(255, 255, 255, 0.03);
    --breakdown-cell-hover-bg: transparent;
    --breakdown-total-color: var(--warning-color);

    /* Shared dropdown tokens */
    --dropdown-bg: var(--bg-color);
    --dropdown-border: 1px solid var(--dim-color);
    --dropdown-radius: 0;
    --dropdown-padding: 8px;
    --dropdown-color: var(--text-color);
    --dropdown-font-size: 0.9em;
    --dropdown-focus-border-color: var(--accent-color);
    --dropdown-focus-shadow: none;

    /* Achievement/profile progress tokens */
    --achievement-progress-bg: rgba(255, 255, 255, 0.2);
    --achievement-progress-radius: 3px;
    --achievement-progress-fill-bg: var(--accent-color);
    --achievement-progress-text-color: var(--text-color);
    --achievement-progress-text-opacity: 0.85;
    --profile-achievement-bg: rgba(255, 255, 255, 0.15);
    --profile-achievement-radius: 4px;
    --profile-achievement-fill-bg: var(--success-color);

}

/* Classic CRT Themes */
body.theme-green {
    --bg-color: #050505;
    --text-color: #00ff00;
    --dim-color: #004400;
    --accent-color: #33ff33;
    --success-color: #00ff00;
    --warning-color: #88ff00;
    --error-color: #ff3300;
    --special-color: #00ff88;
    --glow-spread: 2px;
    --accent-color-rgb: 51, 255, 51;
    --success-color-rgb: 0, 255, 0;
    --warning-color-rgb: 136, 255, 0;
    --error-color-rgb: 255, 51, 0;
    --special-color-rgb: 0, 255, 136;
    --panel-bg: #000000;
}

body.theme-amber {
    --bg-color: #1a1000;
    --text-color: #ffb000;
    --dim-color: #553300;
    --accent-color: #ffdd99;
    --success-color: #ffaa00;
    --warning-color: #ffff00;
    --error-color: #ff5500;
    --special-color: #ffcc66;
    --glow-spread: 2px;
    --accent-color-rgb: 255, 221, 153;
    --success-color-rgb: 255, 170, 0;
    --warning-color-rgb: 255, 255, 0;
    --error-color-rgb: 255, 85, 0;
    --special-color-rgb: 255, 204, 102;
    --panel-bg: #000000;
}

body.theme-grayscale {
    --bg-color: #111111;
    --text-color: #cccccc;
    --dim-color: #444444;
    --accent-color: #ffffff;
    --success-color: #aaaaaa;
    --warning-color: #dddddd;
    --error-color: #888888;
    --special-color: #eeeeee;
    --glow-spread: 2px;
    --accent-color-rgb: 255, 255, 255;
    --success-color-rgb: 170, 170, 170;
    --warning-color-rgb: 221, 221, 221;
    --error-color-rgb: 136, 136, 136;
    --special-color-rgb: 238, 238, 238;
    --panel-bg: #000000;
}

body.theme-cga {
    --bg-color: #000000;
    --text-color: #ff55ff;     /* Magenta */
    --dim-color: #55ffff;       /* Cyan */
    --accent-color: #ffffff;    /* White */
    --success-color: #55ffff;   /* Cyan - progress bars, resources */
    --warning-color: #ffffff;   /* White - currency, warnings */
    --error-color: #ff55ff;     /* Magenta - errors, alerts */
    --special-color: #55ffff;   /* Cyan - special highlights */
    --glow-spread: 2px;
    --accent-color-rgb: 255, 255, 255;
    --success-color-rgb: 85, 255, 255;
    --warning-color-rgb: 255, 255, 255;
    --error-color-rgb: 255, 85, 255;
    --special-color-rgb: 85, 255, 255;
    --panel-bg: #000000;
}

/* Eye-Friendly Terminal Themes */

body.theme-solarized-dark {
    --bg-color: #002b36;
    --text-color: #839496;
    --dim-color: #073642;
    --accent-color: #268bd2;  /* Blue */
    --success-color: #859900;  /* Green */
    --warning-color: #cb4b16;  /* Orange */
    --error-color: #dc322f;    /* Red */
    --special-color: #d33682;  /* Magenta */
    --glow-spread: 1px;
    --accent-color-rgb: 38, 139, 210;
    --success-color-rgb: 133, 153, 0;
    --warning-color-rgb: 203, 75, 22;
    --error-color-rgb: 220, 50, 47;
    --special-color-rgb: 211, 54, 130;
}

body.theme-nord {
    --bg-color: #2e3440;
    --text-color: #d8dee9;
    --dim-color: #4c566a;
    --accent-color: #88c0d0;   /* Frost Cyan */
    --success-color: #a3be8c;  /* Aurora Green */
    --warning-color: #ebcb8b;  /* Aurora Yellow */
    --error-color: #bf616a;    /* Aurora Red */
    --special-color: #b48ead;  /* Aurora Purple */
    --glow-spread: 1px;
    --accent-color-rgb: 136, 192, 208;
    --success-color-rgb: 163, 190, 140;
    --warning-color-rgb: 235, 203, 139;
    --error-color-rgb: 191, 97, 106;
    --special-color-rgb: 180, 142, 173;
}

body.theme-gruvbox {
    --bg-color: #282828;
    --text-color: #ebdbb2;
    --dim-color: #504945;
    --accent-color: #fe8019;   /* Orange */
    --success-color: #b8bb26;  /* Green */
    --warning-color: #fabd2f;  /* Yellow */
    --error-color: #fb4934;    /* Red */
    --special-color: #d3869b;  /* Purple */
    --glow-spread: 1px;
    --accent-color-rgb: 254, 128, 25;
    --success-color-rgb: 184, 187, 38;
    --warning-color-rgb: 250, 189, 47;
    --error-color-rgb: 251, 73, 52;
    --special-color-rgb: 211, 134, 155;
}

body.theme-dracula {
    --bg-color: #282a36;
    --text-color: #f8f8f2;
    --dim-color: #6272a4;
    --accent-color: #bd93f9;   /* Purple */
    --success-color: #50fa7b;  /* Green */
    --warning-color: #f1fa8c;  /* Yellow */
    --error-color: #ff5555;    /* Red */
    --special-color: #ff79c6;  /* Pink */
    --glow-spread: 1px;
    --accent-color-rgb: 189, 147, 249;
    --success-color-rgb: 80, 250, 123;
    --warning-color-rgb: 241, 250, 140;
    --error-color-rgb: 255, 85, 85;
    --special-color-rgb: 255, 121, 198;
}

body.theme-tokyo-night {
    --bg-color: #1a1b26;
    --text-color: #c0caf5;
    --dim-color: #414868;
    --accent-color: #7aa2f7;   /* Blue */
    --success-color: #9ece6a;  /* Green */
    --warning-color: #e0af68;  /* Yellow */
    --error-color: #f7768e;    /* Red */
    --special-color: #bb9af7;  /* Purple */
    --glow-spread: 1px;
    --accent-color-rgb: 122, 162, 247;
    --success-color-rgb: 158, 206, 106;
    --warning-color-rgb: 224, 175, 104;
    --error-color-rgb: 247, 118, 142;
    --special-color-rgb: 187, 154, 247;
}

body.theme-monokai {
    --bg-color: #272822;
    --text-color: #f8f8f2;
    --dim-color: #75715e;
    --accent-color: #66d9ef;   /* Cyan */
    --success-color: #a6e22e;  /* Green */
    --warning-color: #e6db74;  /* Yellow */
    --error-color: #f92672;    /* Pink/Red */
    --special-color: #ae81ff;  /* Purple */
    --glow-spread: 1px;
    --accent-color-rgb: 102, 217, 239;
    --success-color-rgb: 166, 226, 46;
    --warning-color-rgb: 230, 219, 116;
    --error-color-rgb: 249, 38, 114;
    --special-color-rgb: 174, 129, 255;
}

body.theme-one-dark {
    --bg-color: #282c34;
    --text-color: #abb2bf;
    --dim-color: #5c6370;
    --accent-color: #61afef;   /* Blue */
    --success-color: #98c379;  /* Green */
    --warning-color: #e5c07b;  /* Yellow */
    --error-color: #e06c75;    /* Red */
    --special-color: #c678dd;  /* Purple */
    --glow-spread: 1px;
    --accent-color-rgb: 97, 175, 239;
    --success-color-rgb: 152, 195, 121;
    --warning-color-rgb: 229, 192, 123;
    --error-color-rgb: 224, 108, 117;
    --special-color-rgb: 198, 120, 221;
}

body.theme-catppuccin-mocha {
    --bg-color: #1e1e2e;
    --text-color: #cdd6f4;
    --dim-color: #6c7086;
    --accent-color: #89b4fa;   /* Blue */
    --success-color: #a6e3a1;  /* Green */
    --warning-color: #f9e2af;  /* Yellow */
    --error-color: #f38ba8;    /* Red */
    --special-color: #cba6f7;  /* Mauve */
    --glow-spread: 1px;
    --accent-color-rgb: 137, 180, 250;
    --success-color-rgb: 166, 227, 161;
    --warning-color-rgb: 249, 226, 175;
    --error-color-rgb: 243, 139, 168;
    --special-color-rgb: 203, 166, 247;
}

body.theme-catppuccin-frappe {
    --bg-color: #303446;
    --text-color: #c6d0f5;
    --dim-color: #737994;
    --accent-color: #8caaee;   /* Blue */
    --success-color: #a6d189;  /* Green */
    --warning-color: #e5c890;  /* Yellow */
    --error-color: #e78284;    /* Red */
    --special-color: #ca9ee6;  /* Mauve */
    --glow-spread: 1px;
    --accent-color-rgb: 140, 170, 238;
    --success-color-rgb: 166, 209, 137;
    --warning-color-rgb: 229, 200, 144;
    --error-color-rgb: 231, 130, 132;
    --special-color-rgb: 202, 158, 230;
}

body.theme-synthwave {
    --bg-color: #241b2f;
    --text-color: #f8f8f2;
    --dim-color: #6d6979;
    --accent-color: #ff6188;   /* Hot Pink */
    --success-color: #78dce8;  /* Neon Cyan */
    --warning-color: #ffd866;  /* Neon Yellow */
    --error-color: #ff6188;    /* Hot Pink */
    --special-color: #ab9df2;  /* Neon Purple */
    --glow-spread: 2px;
    --accent-color-rgb: 255, 97, 136;
    --success-color-rgb: 120, 220, 232;
    --warning-color-rgb: 255, 216, 102;
    --error-color-rgb: 255, 97, 136;
    --special-color-rgb: 171, 157, 242;
}

/* High Contrast Mode - Brightens dim colors for better legibility */
body.high-contrast {
    --dim-color: #00bb00;
}

body.high-contrast.theme-green {
    --dim-color: #00cc00;
}

body.high-contrast.theme-amber {
    --dim-color: #dd9933;
}

body.high-contrast.theme-grayscale {
    --dim-color: #999999;
}

body.high-contrast.theme-cga {
    --dim-color: #aaffff;
}

body.high-contrast.theme-solarized-dark {
    --dim-color: #657b83;
}

body.high-contrast.theme-nord {
    --dim-color: #81a1c1;
}

body.high-contrast.theme-gruvbox {
    --dim-color: #a89984;
}

body.high-contrast.theme-dracula {
    --dim-color: #9aaccd;
}

body.high-contrast.theme-tokyo-night {
    --dim-color: #7982a9;
}

body.high-contrast.theme-monokai {
    --dim-color: #a6a086;
}

body.high-contrast.theme-one-dark {
    --dim-color: #9da5b4;
}

body.high-contrast.theme-catppuccin-mocha {
    --dim-color: #a6adc8;
}

body.high-contrast.theme-catppuccin-frappe {
    --dim-color: #a5adce;
}

body.high-contrast.theme-synthwave {
    --dim-color: #b0a8bb;
}