/**
 * @name system24 (tokyonight)
 * @description A tui-style discord theme. Based on the onedark color palette.
 * @author refact0r
 * @version 1.0.0
 * @invite nz87hXyvcy
 * @website https://github.com/refact0r/system24
 * @source https://github.com/refact0r/system24/blob/master/flavors/catppuccin-mocha.theme.css 
 * @authorId 508863359777505290
 * @authorLink https://www.refact0r.dev
*/

/* import theme modules */
@import url('https://refact0r.github.io/system24/src/main.css'); /* main theme css. DO NOT REMOVE */
/* 
@import url('https://refact0r.github.io/system24/src/unrounding.css'); */

/* @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Sora:wght@100..800&display=swap'); */
/* @import url("https://raw.githubusercontent.com/ashtrath/Tokyo-Night/refs/heads/main/src/addons/monospace-fonts.css"); */
/* @import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"); */
@import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

/* customize things here */
:root {
	--font: 'Fira Code'; /* UI font name. it must be installed on your system. */
	letter-spacing: 0.005ch; /* decreases letter spacing for better readability. */
	font-weight: 300; /* UI font weight. */
	--label-font-weight: 500; /* font weight for panel labels. */
	--corner-text: 'tokyonight'; /* custom text to display in the corner. only works on windows. */
	--pad: 16px; /* padding between panels. */
	--txt-pad: 10px; /* padding inside panels to prevent labels from clipping */
	--panel-roundness: 12px; /* corner roundness of panels. ONLY WORKS IF unrounding.css IS REMOVED (see above). */

	/* background colors */
	--bg-0: #1a1b26; /* main background color. */
	--bg-1: #24283b; /* background color for secondary elements like code blocks, embeds, etc. */
	--bg-2: #414868; /* color of neutral buttons. */
	--bg-3: #565f89; /* color of neutral buttons when hovered. */

	/* state modifiers */
	--hover: color-mix(in oklch, var(--txt-3), transparent 80%); /* color of hovered elements. */
	--active: color-mix(in oklch, var(--txt-3), transparent 60%); /* color of elements when clicked. */
	--selected: var(--active); /* color of selected elements. */

	/* text colors */
	--txt-dark: var(--bg-0); /* color of dark text on colored backgrounds. */
	--txt-link: var(--cyan); /* color of links. */
	--txt-0: #c0caf5; /* color of bright/white text. */
	--txt-1: #cdd6f4; /* main text color. */
	--txt-2: #9399b2; /* color of secondary text like channel list. */
	--txt-3: #585b70; /* color of muted text. */

	/* accent colors */
	--acc-0: var(--pink); /* main accent color. */
	--acc-1: var(--purple-1); /* color of accent buttons when hovered. */
	--acc-2: var(--purple-2); /* color of accent buttons when clicked. */

	/* borders */
	--border-width: 2px; /* panel border thickness. */
	--border-color: var(--bg-2); /* panel border color. */
	--border-hover-color: var(--acc-0); /* panel border color when hovered. */
	--border-transition: 0.2s ease; /* panel border transition. */

	/* status dot colors */
	--online-dot: var(--green); /* color of online dot. */
	--dnd-dot: var(--pink); /* color of do not disturb dot. */
	--idle-dot: var(--yellow); /* color of idle dot. */
	--streaming-dot: var(--purple); /* color of streaming dot. */

	/* mention/ping and message colors */
	--mention-txt: var(--acc-0); /* color of mention text. */
	--mention-bg: color-mix(in oklch, var(--acc-0), transparent 90%); /* background highlight of mention text. */
	--mention-overlay: color-mix(in oklch, var(--acc-0), transparent 90%); /* overlay color of messages that mention you. */
	--mention-hover-overlay: color-mix(in oklch, var(--acc-0), transparent 95%); /* overlay color of messages that mention you when hovered. */
	--reply-overlay: var(--active); /* overlay color of message you are replying to. */
	--reply-hover-overlay: var(--hover); /* overlay color of message you are replying to when hovered. */

	/* color shades */
	--pink: #7aa2f7; /* Main accent color */
	--pink-1: #9abdf7; /* Lighter shade of accent */
	--pink-2: #3d59a1; /* Darker shade of accent */

	/* Optional: Adjust other accent colors to maintain harmony */
	--purple: #bb9af7; /* Light purple, part of Tokyo Night's palette */
	--purple-1: #9d7cd8; 
	--purple-2: #6f6bc1; 
	--cyan: #74c7ec;
	--yellow: #e0af68;
	--green: #9ece6a;
	--green-1: #b4f9f8;
	--green-2: #73daca;
}