// ╔══════════════════════════╦═════════════════════════════════════════════════════════════════════════════[─]═[□]═[×]═╗
// ║ Variables                ║ General                                                                                 ║
// ╚══════════════════════════╩═════════════════════════════════════════════════════════════════════════════════════════╝

:root {
  // Info (Custom)
  --info-version: "v3.0.3";
  --info-skin: var(--SKIN-skin, "Default");
  --info-author: var(--SKIN-author, "CorellanStoma");

  // Wallpaper (Custom)
  --wallpaper: var(--SKIN-wallpaper, url(""));
  --wallpaper-opacity: var(--SKIN-wallpaper-opacity, 1);

  // Fonts (Custom)
  --font-titlebar: var(--SKIN-titlebar-font, "Segoe UI", "Whitney", "Helvetica Neue", Helvetica, Arial, sans-serif);
  --font-primary: var(--SKIN-primary-font, "Whitney", "Helvetica Neue", Helvetica, Arial, sans-serif);
  --font-display: var(--SKIN-display-font, "Ginto", "Helvetica Neue", "Helvetica", "Arial", "sans-serif";);
  --font-headline: var(--SKIN-headline-font, "Ginto", "Helvetica Neue", "Helvetica", "Arial", "sans-serif";);
  --font-code: var(--SKIN-code-font, "Consolas", "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Monaco", "Courier New", Courier, monospace;);
  
  // Opacity (Custom)
  --opacity-titlebar-wordmark: var(--SKIN-opacity-titlebar-wordmark, 1.0);
  --opacity-titlebar-title: var(--SKIN-opacity-titlebar-title, 1.0);
  --opacity-titlebar-buttons: var(--SKIN-opacity-titlebar-buttons, 1.0);
}

// ╔══════════════════════════╦═════════════════════════════════════════════════════════════════════════════[─]═[□]═[×]═╗
// ║ Variables                ║ Shape                                                                                   ║
// ╚══════════════════════════╩═════════════════════════════════════════════════════════════════════════════════════════╝

:root {
  // Info (Custom)
  --info-shape: var(--SKIN-info-shape);

  // Radius (Custom)
  --radius-primary: var(--SKIN-radius-primary, 18px);
  --radius-secondary: var(--SKIN-radius-secondary, 12px);
  --radius-tertiary: var(--SKIN-radius-tertiary, 6px);

  // Layout (Custom)
  --layout-margin: var(--SKIN-layout-margin, 20px);
  --layout-margin-top: var(--SKIN-layout-margin-top, 20px);
  --layout-margin-left: var(--SKIN-layout-margin-left, 20px);
  --layout-margin-right: var(--SKIN-layout-margin-right, 20px);
  --layout-margin-bottom: var(--SKIN-layout-margin-bottom, 20px);

  // Inner (Custom)
  --inner-primary: var(--SKIN-inner-primary, 8px);
  --inner-secondary: var(--SKIN-inner-secondary, 12px);
  --inner-tertiary: var(--SKIN-inner-tertiary, 16px);

  // Width (Custom)
  --width-channel: var(--SKIN-width-channel, 260px);
  --width-members: var(--SKIN-width-members, 240px);

  // Height (Custom)
  --height-titlebar: var(--SKIN-height-titlebar, 32px);
  --height-header: var(--SKIN-height-header, 44px);
}

// ╔══════════════════════════╦═════════════════════════════════════════════════════════════════════════════[─]═[□]═[×]═╗
// ║ Variables                ║ Palette                                                                                 ║
// ╚══════════════════════════╩═════════════════════════════════════════════════════════════════════════════════════════╝

.theme-dark {
  // Lightness (Custom)
  --lightness: 0%;

  // Grading (Custom)
  --grading-0: 0%;
  --grading-1: 3%;
  --grading-2: 6%;
  --grading-3: 9%;

  // Interactive (Custom)
  --interactive-h: 216;
  --interactive-s: 4%;
  --interactive-l: 74%;
  --interactive-a: 1.0;

  // Background (Custom)
  --background-h: 220;
  --background-s: 8%;
  --background-l: 23%;
  --background-a: 1.0;

  // Accent (Custom)
  --accent-h: 235;
  --accent-s: 100%;
  --accent-l: 71%;
  --accent-a: 1.0;

  // Green (Custom)
  --green-h: 153;
  --green-s: 46%;
  --green-l: 49%;
  --green-a: 1.0;

  // Yellow (Custom)
  --yellow-h: 38;
  --yellow-s: 96%;
  --yellow-l: 54%;
  --yellow-a: 1.0;

  // Red (Custom)
  --red-h: 0;
  --red-s: 85%;
  --red-l: 61%;
  --red-a: 1.0;

  // Purple (Custom)
  --purple-h: 262;
  --purple-s: 47%;
  --purple-l: 40%;
  --purple-a: 1.0;
}

// ╔══════════════════════════╦═════════════════════════════════════════════════════════════════════════════[─]═[□]═[×]═╗
// ║ Variables                ║ System                                                                                  ║
// ╚══════════════════════════╩═════════════════════════════════════════════════════════════════════════════════════════╝

.theme-dark {
  // Interactive (Default)
  --interactive-active: hsla(var(--SKIN-interactive-h, var(--interactive-h)), calc(var(--saturation-factor, 1) * var(--SKIN-interactive-s, var(--interactive-s))), calc(var(--SKIN-interactive-l, var(--interactive-l)) + 100% + var(--SKIN-lightness, var(--lightness))), var(--SKIN-interactive-a, var(--interactive-a)));
  --interactive-hover: hsla(var(--SKIN-interactive-h, var(--interactive-h)), calc(var(--saturation-factor, 1) * var(--SKIN-interactive-s, var(--interactive-s))), calc(var(--SKIN-interactive-l, var(--interactive-l)) + 10% + var(--SKIN-lightness, var(--lightness))), var(--SKIN-interactive-a, var(--interactive-a)));
  --interactive-normal: hsla(var(--SKIN-interactive-h, var(--interactive-h)), calc(var(--saturation-factor, 1) * var(--SKIN-interactive-s, var(--interactive-s))), calc(var(--SKIN-interactive-l, var(--interactive-l)) - 10% + var(--SKIN-lightness, var(--lightness))), var(--SKIN-interactive-a, var(--interactive-a)));
  --interactive-muted: hsla(var(--SKIN-interactive-h, var(--interactive-h)), calc(var(--saturation-factor, 1) * var(--SKIN-interactive-s, var(--interactive-s))), calc(var(--SKIN-interactive-l, var(--interactive-l)) - 20% + var(--SKIN-lightness, var(--lightness))), calc(var(--SKIN-interactive-a, var(--interactive-a)) - 0.8));

  // Background (Default)
  --background-primary: hsla(var(--SKIN-background-h, var(--background-h)), calc(var(--saturation-factor, 1) * var(--SKIN-background-s, var(--background-s))), calc(var(--SKIN-background-l, var(--background-l)) - var(--SKIN-grading-0, var(--grading-0)) + var(--SKIN-lightness, var(--lightness))), var(--SKIN-background-a, var(--background-a)));
  --background-secondary: hsla(var(--SKIN-background-h, var(--background-h)), calc(var(--saturation-factor, 1) * var(--SKIN-background-s, var(--background-s))), calc(var(--SKIN-background-l, var(--background-l)) - var(--SKIN-grading-1, var(--grading-1)) + var(--SKIN-lightness, var(--lightness))), var(--SKIN-background-a, var(--background-a)));
  --background-secondary-alt: hsla(var(--SKIN-background-h, var(--background-h)), calc(var(--saturation-factor, 1) * var(--SKIN-background-s, var(--background-s))), calc(var(--SKIN-background-l, var(--background-l)) - var(--SKIN-grading-2, var(--grading-2)) + var(--SKIN-lightness, var(--lightness))), var(--SKIN-background-a, var(--background-a)));
  --background-tertiary: hsla(var(--SKIN-background-h, var(--background-h)), calc(var(--saturation-factor, 1) * var(--SKIN-background-s, var(--background-s))), calc(var(--SKIN-background-l, var(--background-l)) - var(--SKIN-grading-3, var(--grading-3)) + var(--SKIN-lightness, var(--lightness))), var(--SKIN-background-a, var(--background-a)));

  // Accent (Custom)
  --accent-primary: hsla(var(--SKIN-accent-h, var(--accent-h)), calc(var(--saturation-factor, 1) * var(--SKIN-accent-s, var(--accent-s))), calc(var(--SKIN-accent-l, var(--accent-l)) - 0% + var(--SKIN-lightness, var(--lightness))), var(--SKIN-accent-a, var(--accent-a)));
  --accent-secondary: hsla(var(--SKIN-accent-h, var(--accent-h)), calc(var(--saturation-factor, 1) * var(--SKIN-accent-s, var(--accent-s))), calc(var(--SKIN-accent-l, var(--accent-l)) - 10% + var(--SKIN-lightness, var(--lightness))), var(--SKIN-accent-a, var(--accent-a)));
  --accent-tertiary: hsla(var(--SKIN-accent-h, var(--accent-h)), calc(var(--saturation-factor, 1) * var(--SKIN-accent-s, var(--accent-s))), calc(var(--SKIN-accent-l, var(--accent-l)) - 20% + var(--SKIN-lightness, var(--lightness))), var(--SKIN-accent-a, var(--accent-a)));

  // Green (Custom)
  --green-primary: hsla(var(--SKIN-green-h, var(--green-h)), calc(var(--saturation-factor, 1) * var(--SKIN-green-s, var(--green-s))), calc(var(--SKIN-green-l, var(--green-l)) - 0% + var(--SKIN-lightness, var(--lightness))), var(--SKIN-green-a, var(--green-a)));
  --green-secondary: hsla(var(--SKIN-green-h, var(--green-h)), calc(var(--saturation-factor, 1) * var(--SKIN-green-s, var(--green-s))), calc(var(--SKIN-green-l, var(--green-l)) - 10% + var(--SKIN-lightness, var(--lightness))), var(--SKIN-green-a, var(--green-a)));
  --green-tertiary: hsla(var(--SKIN-green-h, var(--green-h)), calc(var(--saturation-factor, 1) * var(--SKIN-green-s, var(--green-s))), calc(var(--SKIN-green-l, var(--green-l)) - 20% + var(--SKIN-lightness, var(--lightness))), var(--SKIN-green-a, var(--green-a)));

  // Yellow (Custom)
  --yellow-primary: hsla(var(--SKIN-yellow-h, var(--yellow-h)), calc(var(--saturation-factor, 1) * var(--SKIN-yellow-s, var(--yellow-s))), calc(var(--SKIN-yellow-l, var(--yellow-l)) - 0% + var(--SKIN-lightness, var(--lightness))), var(--SKIN-yellow-a, var(--yellow-a)));
  --yellow-secondary: hsla(var(--SKIN-yellow-h, var(--yellow-h)), calc(var(--saturation-factor, 1) * var(--SKIN-yellow-s, var(--yellow-s))), calc(var(--SKIN-yellow-l, var(--yellow-l)) - 10% + var(--SKIN-lightness, var(--lightness))), var(--SKIN-yellow-a, var(--yellow-a)));
  --yellow-tertiary: hsla(var(--SKIN-yellow-h, var(--yellow-h)), calc(var(--saturation-factor, 1) * var(--SKIN-yellow-s, var(--yellow-s))), calc(var(--SKIN-yellow-l, var(--yellow-l)) - 20% + var(--SKIN-lightness, var(--lightness))), var(--SKIN-yellow-a, var(--yellow-a)));

  // Red (Custom)
  --red-primary: hsla(var(--SKIN-red-h, var(--red-h)), calc(var(--saturation-factor, 1) * var(--SKIN-red-s, var(--red-s))), calc(var(--SKIN-red-l, var(--red-l)) - 0% + var(--SKIN-lightness, var(--lightness))), var(--SKIN-red-a, var(--red-a)));
  --red-secondary: hsla(var(--SKIN-red-h, var(--red-h)), calc(var(--saturation-factor, 1) * var(--SKIN-red-s, var(--red-s))), calc(var(--SKIN-red-l, var(--red-l)) - 10% + var(--SKIN-lightness, var(--lightness))), var(--SKIN-red-a, var(--red-a)));
  --red-tertiary: hsla(var(--SKIN-red-h, var(--red-h)), calc(var(--saturation-factor, 1) * var(--SKIN-red-s, var(--red-s))), calc(var(--SKIN-red-l, var(--red-l)) - 20% + var(--SKIN-lightness, var(--lightness))), var(--SKIN-red-a, var(--red-a)));

  // Purple (Custom)
  --purple-primary: hsla(var(--SKIN-purple-h, var(--purple-h)), calc(var(--saturation-factor, 1) * var(--SKIN-purple-s, var(--purple-s))), calc(var(--SKIN-purple-l, var(--purple-l)) - 0% + var(--SKIN-lightness, var(--lightness))), var(--SKIN-purple-a, var(--purple-a)));
  --purple-secondary: hsla(var(--SKIN-purple-h, var(--purple-h)), calc(var(--saturation-factor, 1) * var(--SKIN-purple-s, var(--purple-s))), calc(var(--SKIN-purple-l, var(--purple-l)) - 10% + var(--SKIN-lightness, var(--lightness))), var(--SKIN-purple-a, var(--purple-a)));
  --purple-tertiary: hsla(var(--SKIN-purple-h, var(--purple-h)), calc(var(--saturation-factor, 1) * var(--SKIN-purple-s, var(--purple-s))), calc(var(--SKIN-purple-l, var(--purple-l)) - 20% + var(--SKIN-lightness, var(--lightness))), var(--SKIN-purple-a, var(--purple-a)));

  // Scrollbar (Default)
  --scrollbar-thin-track: transparent;
  --scrollbar-thin-thumb: hsla(var(--SKIN-background-h, var(--background-h)), calc(var(--saturation-factor, 1) * var(--SKIN-background-s, var(--background-s))), calc(var(--SKIN-background-l, var(--background-l)) - 9% + var(--SKIN-lightness, var(--lightness))), var(--SKIN-background-a, var(--background-a)));
  --scrollbar-auto-track: hsla(var(--SKIN-background-h, var(--background-h)), calc(var(--saturation-factor, 1) * var(--SKIN-background-s, var(--background-s))), calc(var(--SKIN-background-l, var(--background-l)) - 6% + var(--SKIN-lightness, var(--lightness))), var(--SKIN-background-a, var(--background-a)));
  --scrollbar-auto-thumb: hsla(var(--SKIN-background-h, var(--background-h)), calc(var(--saturation-factor, 1) * var(--SKIN-background-s, var(--background-s))), calc(var(--SKIN-background-l, var(--background-l)) - 9% + var(--SKIN-lightness, var(--lightness))), var(--SKIN-background-a, var(--background-a)));
  --scrollbar-auto-scrollbar-color-thumb: hsla(var(--SKIN-background-h, var(--background-h)), calc(var(--saturation-factor, 1) * var(--SKIN-background-s, var(--background-s))), calc(var(--SKIN-background-l, var(--background-l)) - 9% + var(--SKIN-lightness, var(--lightness))), var(--SKIN-background-a, var(--background-a)));
  --scrollbar-auto-scrollbar-color-track: hsla(var(--SKIN-background-h, var(--background-h)), calc(var(--saturation-factor, 1) * var(--SKIN-background-s, var(--background-s))), calc(var(--SKIN-background-l, var(--background-l)) - 9% + var(--SKIN-lightness, var(--lightness))), var(--SKIN-background-a, var(--background-a)));

  // Header
  --header-primary: hsla(var(--SKIN-interactive-h, var(--interactive-h)), calc(var(--saturation-factor, 1) * var(--SKIN-interactive-s, var(--interactive-s))), calc(var(--SKIN-interactive-l, var(--interactive-l)) + 100% + var(--SKIN-lightness, var(--lightness))), var(--SKIN-interactive-a, var(--interactive-a)));
  --header-secondary: hsla(var(--SKIN-interactive-h, var(--interactive-h)), calc(var(--saturation-factor, 1) * var(--SKIN-interactive-s, var(--interactive-s))), calc(var(--SKIN-interactive-l, var(--interactive-l)) - 10% + var(--SKIN-lightness, var(--lightness))), var(--SKIN-interactive-a, var(--interactive-a)));

  // Background Modifier (Default)
  --background-modifier-hover: hsla(var(--SKIN-interactive-h, var(--interactive-h)), calc(var(--saturation-factor, 1) * var(--SKIN-interactive-s, var(--interactive-s))), calc(var(--SKIN-interactive-l, var(--interactive-l)) - 0% + var(--SKIN-lightness, var(--lightness))), 0.1);
  --background-modifier-active: hsla(var(--SKIN-interactive-h, var(--interactive-h)), calc(var(--saturation-factor, 1) * var(--SKIN-interactive-s, var(--interactive-s))), calc(var(--SKIN-interactive-l, var(--interactive-l)) - 0% + var(--SKIN-lightness, var(--lightness))), 0.2);
  --background-modifier-selected: hsla(var(--SKIN-interactive-h, var(--interactive-h)), calc(var(--saturation-factor, 1) * var(--SKIN-interactive-s, var(--interactive-s))), calc(var(--SKIN-interactive-l, var(--interactive-l)) - 0% + var(--SKIN-lightness, var(--lightness))), 0.2);
  --background-modifier-interactive: hsla(var(--SKIN-interactive-h, var(--interactive-h)), calc(var(--saturation-factor, 1) * var(--SKIN-interactive-s, var(--interactive-s))), calc(var(--SKIN-interactive-l, var(--interactive-l)) - 0% + var(--SKIN-lightness, var(--lightness))), 0.18);
  

  --brightness: calc(1.5 - var(--saturation-factor, 1) * 0.5);
  --contrast: var(--saturation-factor, 1);

  --focus-primary: hsl(197, calc(var(--saturation-factor, 1) * 100%), 47.8%);

  --toast-background: #2f3136;
  --toast-header: #202225;
  --toast-contents: #36393f;
  --toast-box-shadow: rgba(0, 0, 0, 0.2);
  --toast-border: rgba(28, 36, 43, 0.6);

  --search-popout-option-fade: linear-gradient(90deg, rgba(24, 25, 28, 0), #18191c 80%);
  --search-popout-option-fade-hover: linear-gradient(90deg, rgba(54, 57, 63, 0), #36393f 50%);
  --search-popout-option-user-nickname: var(--text-normal);
  --search-popout-option-user-username: var(--text-muted);
  --search-popout-option-filter-text: #72767d;
  --search-popout-option-non-text-color: #caccce;
  --search-popout-option-filter-color: #caccce;
  --search-popout-option-answer-color: #caccce;
  --search-popout-date-picker-border: 1px solid hsla(214, calc(var(--saturation-factor, 1) * 9.1%), 15.1%, 0.3);
  --search-popout-date-picker-hint-text: #caccce;
  --search-popout-date-picker-hint-value-text: #fff;
  --search-popout-date-picker-hint-value-background: var(--brand-experiment);
  --search-popout-date-picker-hint-value-background-hover: var(--brand-experiment-430);


// Text
  --text-normal: hsla(var(--SKIN-interactive-h, var(--interactive-h)), calc(var(--saturation-factor, 1) * var(--SKIN-interactive-s, var(--interactive-s))), calc(var(--SKIN-interactive-l, var(--interactive-l)) + 20% + var(--SKIN-lightness, var(--lightness))), var(--SKIN-interactive-a, var(--interactive-a)));
  --text-muted: hsla(var(--SKIN-interactive-h, var(--interactive-h)), calc(var(--saturation-factor, 1) * var(--SKIN-interactive-s, var(--interactive-s))), calc(var(--SKIN-interactive-l, var(--interactive-l)) - 20% + var(--SKIN-lightness, var(--lightness))), calc(var(--SKIN-interactive-a, var(--interactive-a)) - 0.8));


  --text-link: hsla(var(--SKIN-accent-h, var(--accent-h)), calc(var(--saturation-factor, 1) * var(--SKIN-accent-s, var(--accent-s))), calc(var(--SKIN-accent-l, var(--accent-l)) - 0% + var(--SKIN-lightness, var(--lightness))), var(--SKIN-accent-a, var(--accent-a)));
  --text-link-low-saturation: hsla(var(--SKIN-accent-h, var(--accent-h)), calc(var(--saturation-factor, 1) * var(--SKIN-accent-s, var(--accent-s))), calc(var(--SKIN-accent-l, var(--accent-l)) + 4% + var(--SKIN-lightness, var(--lightness))), var(--SKIN-accent-a, var(--accent-a)));


  
  --text-positive: hsl(139, calc(var(--saturation-factor, 1) * 51.6%), 52.2%);
  --text-warning: hsl(38, calc(var(--saturation-factor, 1) * 95.7%), 54.1%);
  --text-danger: hsl(359, calc(var(--saturation-factor, 1) * 82%), 73.9%);
  --text-brand: hsl(235, calc(var(--saturation-factor, 1) * 86.1%), 77.5%);




  --background-accent: #4f545c;
  --background-floating: #18191c;
  --background-nested-floating: #2f3136;
  --background-mobile-primary: #36393f;
  --background-mobile-secondary: #2f3136;
  



  --info-positive-background: hsla(139, calc(var(--saturation-factor, 1) * 47.3%), 43.9%, 0.1);
  --info-positive-foreground: hsl(139, calc(var(--saturation-factor, 1) * 47.3%), 43.9%);
  --info-positive-text: #fff;
  --info-warning-background: hsla(38, calc(var(--saturation-factor, 1) * 95.7%), 54.1%, 0.1);
  --info-warning-foreground: hsl(38, calc(var(--saturation-factor, 1) * 95.7%), 54.1%);
  --info-warning-text: #fff;
  --info-danger-background: hsla(359, calc(var(--saturation-factor, 1) * 82.6%), 59.4%, 0.1);
  --info-danger-foreground: hsl(359, calc(var(--saturation-factor, 1) * 82.6%), 59.4%);
  --info-danger-text: #fff;
  --info-help-background: hsla(197, calc(var(--saturation-factor, 1) * 100%), 47.8%, 0.1);
  --info-help-foreground: hsl(197, calc(var(--saturation-factor, 1) * 100%), 47.8%);
  --info-help-text: #fff;
  --status-positive-background: hsl(139, calc(var(--saturation-factor, 1) * 47.1%), 33.3%);
  --status-positive-text: #fff;
  --status-warning-background: hsl(38, calc(var(--saturation-factor, 1) * 95.7%), 54.1%);
  --status-warning-text: #000;
  --status-danger-background: hsl(359, calc(var(--saturation-factor, 1) * 82.6%), 59.4%);
  --status-danger-text: #fff;
  --status-danger: hsl(359, calc(var(--saturation-factor, 1) * 82.6%), 59.4%);
  --status-positive: hsl(139, calc(var(--saturation-factor, 1) * 47.3%), 43.9%);
  --status-warning: hsl(38, calc(var(--saturation-factor, 1) * 95.7%), 54.1%);
  --button-danger-background: hsl(359, calc(var(--saturation-factor, 1) * 66.7%), 54.1%);
  --button-danger-background-hover: hsl(359, calc(var(--saturation-factor, 1) * 56.3%), 40.4%);
  --button-danger-background-active: hsl(359, calc(var(--saturation-factor, 1) * 56.4%), 35.1%);
  --button-danger-background-disabled: hsl(359, calc(var(--saturation-factor, 1) * 66.7%), 54.1%);
  --button-positive-background: hsl(139, calc(var(--saturation-factor, 1) * 47.1%), 33.3%);
  --button-positive-background-hover: hsl(138, calc(var(--saturation-factor, 1) * 46.8%), 24.3%);
  --button-positive-background-active: hsl(138, calc(var(--saturation-factor, 1) * 46.9%), 22.2%);
  --button-positive-background-disabled: hsl(139, calc(var(--saturation-factor, 1) * 47.1%), 33.3%);
  --button-secondary-background: #4f545c;
  --button-secondary-background-hover: #686d73;
  --button-secondary-background-active: #72767d;
  --button-secondary-background-disabled: #4f545c;
  --button-outline-danger-text: #fff;
  --button-outline-danger-border: hsl(359, calc(var(--saturation-factor, 1) * 82.6%), 59.4%);
  --button-outline-danger-background: hsla(0, 0%, 100%, 0);
  --button-outline-danger-background-hover: hsl(359, calc(var(--saturation-factor, 1) * 66.7%), 54.1%);
  --button-outline-danger-text-hover: #fff;
  --button-outline-danger-border-hover: hsl(359, calc(var(--saturation-factor, 1) * 66.7%), 54.1%);
  --button-outline-danger-background-active: hsl(359, calc(var(--saturation-factor, 1) * 56.7%), 48%);
  --button-outline-danger-text-active: #fff;
  --button-outline-danger-border-active: hsl(359, calc(var(--saturation-factor, 1) * 66.7%), 54.1%);
  --button-outline-positive-text: #fff;
  --button-outline-positive-border: hsl(139, calc(var(--saturation-factor, 1) * 47.3%), 43.9%);
  --button-outline-positive-background: hsla(0, 0%, 100%, 0);
  --button-outline-positive-background-hover: hsl(139, calc(var(--saturation-factor, 1) * 47.1%), 33.3%);
  --button-outline-positive-text-hover: #fff;
  --button-outline-positive-border-hover: hsl(139, calc(var(--saturation-factor, 1) * 47.1%), 33.3%);
  --button-outline-positive-background-active: hsl(138, calc(var(--saturation-factor, 1) * 46.8%), 24.3%);
  --button-outline-positive-text-active: #fff;
  --button-outline-positive-border-active: hsl(138, calc(var(--saturation-factor, 1) * 46.8%), 24.3%);
  --button-outline-brand-text: #fff;
  --button-outline-brand-border: hsl(235, calc(var(--saturation-factor, 1) * 85.6%), 64.7%);
  --button-outline-brand-background: hsla(0, 0%, 100%, 0);
  --button-outline-brand-background-hover: hsl(235, calc(var(--saturation-factor, 1) * 85.6%), 64.7%);
  --button-outline-brand-text-hover: #fff;
  --button-outline-brand-border-hover: hsl(235, calc(var(--saturation-factor, 1) * 85.6%), 64.7%);
  --button-outline-brand-background-active: hsl(235, calc(var(--saturation-factor, 1) * 51.4%), 52.4%);
  --button-outline-brand-text-active: #fff;
  --button-outline-brand-border-active: hsl(235, calc(var(--saturation-factor, 1) * 51.4%), 52.4%);
  --button-outline-primary-text: #fff;
  --button-outline-primary-border: #4f545c;
  --button-outline-primary-background: hsla(0, 0%, 100%, 0);
  --button-outline-primary-background-hover: #4f545c;
  --button-outline-primary-text-hover: #fff;
  --button-outline-primary-border-hover: #4f545c;
  --button-outline-primary-background-active: #686d73;
  --button-outline-primary-text-active: #fff;
  --button-outline-primary-border-active: #686d73;
  --modal-background: #36393f;
  --modal-footer-background: #2f3136;



  --input-background: #202225;
  --input-placeholder-text: hsl(216, calc(var(--saturation-factor, 1) * 2.1%), 53.9%);
  --elevation-stroke: 0 0 0 1px rgba(4, 4, 5, 0.15);
  --elevation-low: 0 1px 0 rgba(4, 4, 5, 0.2), 0 1.5px 0 rgba(6, 6, 7, 0.05), 0 2px 0 rgba(4, 4, 5, 0.05);
  --elevation-medium: 0 4px 4px rgba(0, 0, 0, 0.16);
  --elevation-high: 0 8px 16px rgba(0, 0, 0, 0.24);
  --logo-primary: #fff;
  --control-brand-foreground: hsl(235, calc(var(--saturation-factor, 1) * 86.1%), 77.5%);
  --control-brand-foreground-new: hsl(235, calc(var(--saturation-factor, 1) * 86.1%), 77.5%);
  --background-mentioned: hsla(38, calc(var(--saturation-factor, 1) * 95.7%), 54.1%, 0.1);
  --background-mentioned-hover: hsla(38, calc(var(--saturation-factor, 1) * 95.7%), 54.1%, 0.08);
  --background-message-hover: rgba(4, 4, 5, 0.07);
  --background-message-automod: hsla(359, calc(var(--saturation-factor, 1) * 82.6%), 59.4%, 0.05);
  --background-message-automod-hover: hsla(359, calc(var(--saturation-factor, 1) * 82.6%), 59.4%, 0.1);
  --channels-default: var(--interactive-normal);
  --channel-icon: var(--interactive-normal);
  --channel-text-area-placeholder: #72767d;
  --guild-header-text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
  --channeltextarea-background: #40444b;
  --activity-card-background: #202225;
  --textbox-markdown-syntax: var(--interactive-normal);
  --spoiler-revealed-background: #292b2f;
  --spoiler-hidden-background: #202225;
  --deprecated-card-bg: rgba(32, 34, 37, 0.6);
  --deprecated-card-editable-bg: rgba(32, 34, 37, 0.3);
  --deprecated-store-bg: #36393f;
  --deprecated-quickswitcher-input-background: #72767d;
  --deprecated-quickswitcher-input-placeholder: hsla(0, 0%, 100%, 0.3);
  --deprecated-text-input-bg: #202225;
  --deprecated-text-input-border: rgba(0, 0, 0, 0.3);
  --deprecated-text-input-border-hover: #040405;
  --deprecated-text-input-border-disabled: #202225;
  --deprecated-text-input-prefix: #dcddde;
}

// Brand Color
[data-popout-root],
html {

  --brand-experiment: hsla(var(--SKIN-accent-h, var(--accent-h)), calc(var(--saturation-factor, 1) * var(--SKIN-accent-s, var(--accent-s))), calc(var(--SKIN-accent-l, var(--accent-l)) - 0% + var(--SKIN-lightness, var(--lightness))), var(--SKIN-accent-a, var(--accent-a)));
  --brand-experiment-100: hsl(240, calc(var(--saturation-factor, 1) * 77.8%), 98.2%);
  --brand-experiment-130: hsl(236, calc(var(--saturation-factor, 1) * 87.5%), 96.9%);
  --brand-experiment-160: hsl(235, calc(var(--saturation-factor, 1) * 84.6%), 94.9%);
  --brand-experiment-200: hsl(236, calc(var(--saturation-factor, 1) * 83.3%), 92.9%);
  --brand-experiment-230: hsl(236, calc(var(--saturation-factor, 1) * 87%), 91%);
  --brand-experiment-260: hsl(235, calc(var(--saturation-factor, 1) * 86.2%), 88.6%);
  --brand-experiment-300: hsl(235, calc(var(--saturation-factor, 1) * 86.1%), 85.9%);
  --brand-experiment-330: hsl(235, calc(var(--saturation-factor, 1) * 85.1%), 81.6%);
  --brand-experiment-360: hsl(235, calc(var(--saturation-factor, 1) * 86.1%), 77.5%);
  --brand-experiment-400: hsl(235, calc(var(--saturation-factor, 1) * 86.1%), 71.8%);
  --brand-experiment-430: hsl(235, calc(var(--saturation-factor, 1) * 85.7%), 69.8%);
  --brand-experiment-460: hsl(235, calc(var(--saturation-factor, 1) * 85.5%), 67.5%);
  --brand-experiment-500: hsl(235, calc(var(--saturation-factor, 1) * 85.6%), 64.7%);
  --brand-experiment-530: hsl(235, calc(var(--saturation-factor, 1) * 66.7%), 58.8%);
  --brand-experiment-560: hsl(235, calc(var(--saturation-factor, 1) * 51.4%), 52.4%);
  --brand-experiment-600: hsl(235, calc(var(--saturation-factor, 1) * 46.7%), 44.1%);
  --brand-experiment-630: hsl(235, calc(var(--saturation-factor, 1) * 46.7%), 38.2%);
  --brand-experiment-660: hsl(235, calc(var(--saturation-factor, 1) * 47.1%), 33.3%);
  --brand-experiment-700: hsl(235, calc(var(--saturation-factor, 1) * 47%), 25.9%);
  --brand-experiment-730: hsl(235, calc(var(--saturation-factor, 1) * 46.8%), 24.3%);
  --brand-experiment-760: hsl(234, calc(var(--saturation-factor, 1) * 46.9%), 22.2%);
  --brand-experiment-800: hsl(235, calc(var(--saturation-factor, 1) * 47.5%), 19.4%);
  --brand-experiment-830: hsl(235, calc(var(--saturation-factor, 1) * 47.4%), 14.9%);
  --brand-experiment-860: hsl(235, calc(var(--saturation-factor, 1) * 46.9%), 9.6%);
  --brand-experiment-900: hsl(233, calc(var(--saturation-factor, 1) * 50%), 3.1%);
  --brand-experiment-05a: hsla(235, calc(var(--saturation-factor, 1) * 85.6%), 64.7%, 0.05);
  --brand-experiment-10a: hsla(235, calc(var(--saturation-factor, 1) * 85.6%), 64.7%, 0.1);
  --brand-experiment-15a: hsla(235, calc(var(--saturation-factor, 1) * 85.6%), 64.7%, 0.15);
  --brand-experiment-20a: hsla(235, calc(var(--saturation-factor, 1) * 85.6%), 64.7%, 0.2);
  --brand-experiment-25a: hsla(235, calc(var(--saturation-factor, 1) * 85.6%), 64.7%, 0.25);
  --brand-experiment-30a: hsla(235, calc(var(--saturation-factor, 1) * 85.6%), 64.7%, 0.3);
  --brand-experiment-35a: hsla(235, calc(var(--saturation-factor, 1) * 85.6%), 64.7%, 0.35);
  --brand-experiment-40a: hsla(235, calc(var(--saturation-factor, 1) * 85.6%), 64.7%, 0.4);
  --brand-experiment-45a: hsla(235, calc(var(--saturation-factor, 1) * 85.6%), 64.7%, 0.45);
  --brand-experiment-50a: hsla(235, calc(var(--saturation-factor, 1) * 85.6%), 64.7%, 0.5);
  --brand-experiment-55a: hsla(235, calc(var(--saturation-factor, 1) * 85.6%), 64.7%, 0.55);
  --brand-experiment-60a: hsla(235, calc(var(--saturation-factor, 1) * 85.6%), 64.7%, 0.6);
  --brand-experiment-65a: hsla(235, calc(var(--saturation-factor, 1) * 85.6%), 64.7%, 0.65);
  --brand-experiment-70a: hsla(235, calc(var(--saturation-factor, 1) * 85.6%), 64.7%, 0.7);
  --brand-experiment-75a: hsla(235, calc(var(--saturation-factor, 1) * 85.6%), 64.7%, 0.75);
  --brand-experiment-80a: hsla(235, calc(var(--saturation-factor, 1) * 85.6%), 64.7%, 0.8);
  --brand-experiment-85a: hsla(235, calc(var(--saturation-factor, 1) * 85.6%), 64.7%, 0.85);
  --brand-experiment-90a: hsla(235, calc(var(--saturation-factor, 1) * 85.6%), 64.7%, 0.9);
  --brand-experiment-95a: hsla(235, calc(var(--saturation-factor, 1) * 85.6%), 64.7%, 0.95);
}

// Fonts
:root {
  --font-korean: Dash, Emoji, CreArts, Whitney, "Apple SD Gothic Neo", "NanumBarunGothic", "맑은 고딕", "Malgun Gothic",
    Gulim, 굴림, Dotum, 돋움, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-japanese: Dash, Emoji, CreArts, Whitney, Hiragino Sans, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN",
    "メイリオ", Meiryo, Osaka, "MS PGothic", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-chinese-simplified: Dash, Emoji, CreArts, Whitney, "Microsoft YaHei New", 微软雅黑, "Microsoft Yahei",
    "Microsoft JhengHei", 宋体, SimSun, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-chinese-traditional: Dash, Emoji, CreArts, Whitney, "Microsoft JhengHei", 微軟正黑體, "Microsoft JhengHei UI",
    "Microsoft YaHei", 微軟雅黑, 宋体, SimSun, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

// Powercord
:root {
  --spotify-color: #1ed860;
}

// ╔══════════════════════════╦═════════════════════════════════════════════════════════════════════════════[─]═[□]═[×]═╗
// ║ Variables                ║ Sorting                                                                                 ║
// ╚══════════════════════════╩═════════════════════════════════════════════════════════════════════════════════════════╝

:root {
  --layout-icon-spacing: 8px;

  --layout-width-guild: 72px;
  --width-profile: 320px;

  // Width
  --profile-width: 320px;
  --profile-height: 43vh;

  // Guild
  --guild-icon: 48px;
  --guild-spacing: calc(var(--guild-icon) / 4.3);
  --guild-badge: calc(var(--guild-icon) / 3.2);
  --guild-number: calc(var(--guild-icon) / 4.2);

  --height-channel-buttons: 32px;
}

/*
//--accent-text: var(--SKIN-accent-text, hsla(216, calc(var(--saturation-factor, 1) * 4%), 74%, 1));
*/