{
  config,
  lib,
  ...
}:
{
  config = lib.mkIf config.programs.vesktop.enable {
    xdg.configFile."matugen/templates/vesktop.css" = {
      text = ''
        /**
         * @name system24
         * @description a tui-style discord theme. Matugen Material UI + Original Base Colors.
         * @author refact0r
         * @version 2.0.0
         * @invite nz87hXyvcy
         * @website https://github.com/refact0r/system24
         * @source https://github.com/refact0r/system24/blob/master/theme/system24.theme.css
        */

        /* import theme modules */
        @import url("https://refact0r.github.io/system24/build/system24.css");

        body {
            /* font options */
            --font: "JetBrainsMono Nerd Font"; 
            --code-font: "JetBrainsMono Nerd Font"; 
            font-weight: 300; 
            letter-spacing: -0.05ch; 

            /* sizes */
            --gap: 12px; 
            --divider-thickness: 4px; 
            --border-thickness: 2px; 
            --border-hover-transition: 0.2s ease; 

            /* animation/transition options */
            --animations: on; 
            --list-item-transition: 0.2s ease; 
            --dms-icon-svg-transition: 0.4s ease; 

            /* top bar options */
            --top-bar-height: var(--gap); 
            --top-bar-button-position: titlebar; 
            --top-bar-title-position: off; 
            --subtle-top-bar-title: off; 

            /* window controls */
            --custom-window-controls: off; 
            --window-control-size: 14px; 

            /* dms button options */
            --custom-dms-icon: off; 
            --dms-icon-svg-url: url(""); 
            --dms-icon-svg-size: 90%; 
            --dms-icon-color-before: var(--icon-subtle); 
            --dms-icon-color-after: var(--white); 
            --custom-dms-background: off; 
            --dms-background-image-url: url(""); 
            --dms-background-image-size: cover; 
            --dms-background-color: linear-gradient(70deg, var(--blue-2), var(--purple-2), var(--red-2)); 

            /* background image options */
            --background-image: off; 
            --background-image-url: url(""); 

            /* transparency/blur options */
            --transparency-tweaks: off; 
            --remove-bg-layer: off; 
            --panel-blur: off; 
            --blur-amount: 12px; 
            --bg-floating: var(--bg-3); 

            /* other options */
            --small-user-panel: on; 

            /* unrounding options */
            --unrounding: on; 

            /* styling options */
            --custom-spotify-bar: on; 
            --ascii-titles: on; 
            --ascii-loader: system24; 

            /* panel labels */
            --panel-labels: on; 
            --label-color: var(--text-muted); 
            --label-font-weight: 500; 
        }

        /* color options */
        :root {
            --colors: on; 

            /* text colors - mapped to matugen safe hex */
            --text-0: var(--bg-4); 
            --text-1: {{colors.on_surface.default.hex}}; 
            --text-2: {{colors.on_surface.default.hex}}; 
            --text-3: {{colors.on_surface_variant.default.hex}}; 
            --text-4: {{colors.outline.default.hex}}; 
            --text-5: {{colors.outline_variant.default.hex}}; 

            /* background colors - mapped to matugen safe hex */
            --bg-1: {{colors.surface_variant.default.hex}}; 
            --bg-2: {{colors.surface_container_high.default.hex}}; 
            --bg-3: {{colors.surface_container_low.default.hex}}; 
            <* if {{ is_dark_mode }} *>
            --bg-4: {{colors.surface.default.hex}}; 
            <* else *>
            --bg-4: {{colors.surface_container_low.default.hex}}; 
            <* endif *>

            /* hovers - using on_surface hex + CSS hex opacity (1a=10%, 33=20%, 4d=30%) */
            --hover: {{colors.on_surface.default.hex}}1a; 
            --active: {{colors.on_surface.default.hex}}33; 
            --active-2: {{colors.on_surface.default.hex}}4d; 
            --message-hover: var(--hover); 

            /* accent colors - Replaced with Matugen Colors */
            --accent-1: {{colors.tertiary.default.hex}}; 
            --accent-2: {{colors.primary.default.hex}}; 
            --accent-3: {{colors.primary.default.hex}}; 
            --accent-4: {{colors.primary_container.default.hex}}; 
            --accent-5: {{colors.primary_fixed_dim.default.hex}}; 
            --accent-new: {{colors.error.default.hex}}; 
            
            /* Math kept identical, only source colors swapped to Matugen */
            --mention: linear-gradient(to right, color-mix(in hsl, {{colors.primary.default.hex}}, transparent 90%) 40%, transparent); 
            --mention-hover: linear-gradient(to right, color-mix(in hsl, {{colors.primary.default.hex}}, transparent 95%) 40%, transparent); 
            --reply: linear-gradient(to right, color-mix(in hsl, {{colors.on_surface_variant.default.hex}}, transparent 90%) 40%, transparent); 
            --reply-hover: linear-gradient(to right, color-mix(in hsl, {{colors.on_surface_variant.default.hex}}, transparent 95%) 40%, transparent); 

            /* status indicator colors - Kept original as requested, updated offline */
            --online: var(--green-2); 
            --dnd: var(--red-2); 
            --idle: var(--yellow-2); 
            --streaming: var(--purple-2); 
            --offline: {{colors.outline.default.hex}}; 

            /* border colors */
            --border-light: var(--hover); 
            --border: var(--active); 
            --border-hover: {{colors.primary.default.hex}}; 
            --button-border: {{colors.on_surface.default.hex}}1a; 

            /* base colors - UNTOUCHED OKLCH FROM ORIGINAL */
            --red-1: oklch(75% 0.13 0);
            --red-2: oklch(70% 0.13 0);
            --red-3: oklch(65% 0.13 0);
            --red-4: oklch(60% 0.13 0);
            --red-5: oklch(55% 0.13 0);

            --green-1: oklch(75% 0.12 170);
            --green-2: oklch(70% 0.12 170);
            --green-3: oklch(65% 0.12 170);
            --green-4: oklch(60% 0.12 170);
            --green-5: oklch(55% 0.12 160);

            --blue-1: oklch(75% 0.11 215);
            --blue-2: oklch(70% 0.11 215);
            --blue-3: oklch(65% 0.11 215);
            --blue-4: oklch(60% 0.11 215);
            --blue-5: oklch(55% 0.11 215);

            --yellow-1: oklch(80% 0.12 90);
            --yellow-2: oklch(75% 0.12 90);
            --yellow-3: oklch(70% 0.12 90);
            --yellow-4: oklch(65% 0.12 90);
            --yellow-5: oklch(60% 0.12 90);

            --purple-1: oklch(75% 0.12 310);
            --purple-2: oklch(70% 0.12 310);
            --purple-3: oklch(65% 0.12 310);
            --purple-4: oklch(60% 0.12 310);
            --purple-5: oklch(55% 0.12 310);
        }
      '';
    };
  };
}