cohost color template

/* cohost custom colors template v0.2.1
   i aint messing with mobile
   @naidje's custom theme might have more stuff than this idk:
   https://cohost.org/naidje/post/381261-cohost-purple-userst */
:root {
	/* main colors */
    --color-notWhite: 255 200 200;
    --color-notBlack: 20 120 120;
    --color-cherry: 100 0 200;
    --color-strawberry: 0 0 200;
    --color-mango: 0 200 0;
    --color-longan: 0 200 200;
    --color-white: 255 200 0;
    --color-black: 0 200 255;

    /* and more! */
    --color-mango-100: 0 200 0;
    /* ^ used for some smaller backgrounds */
    --color-longan-100: 0 200 200;
    /* used for some smaller backgrounds */
    --color-longan-300: 0 200 200;
    /* used for some button backgrounds */
    --color-cherry-100: 0 200 200;
    /* used for Post button background */
    --color-cherry-200: 0 225 225;
    /* used for Post button background */
    --color-cherry-600: 50 150 50;
    /* used for hover background of page switcher */
    --color-cherry-800: 0 50 50;
    /* used for Post button text */
    --color-cherry-900: 0 25 25;
    /*used for Post button text */
    --color-gray-300: 0 0 200;
    /* used for some separators */
    --color-gray-400: 200 0 255;
    /* used for tags under posts */
    --color-gray-500: 200 0 255;
    /* used for timestamps */
    --color-gray-600: 200 255 255;
    /* used for user @ links */
    --color-gray-800: 255 100 100;
    /* used for embed links */
    --color-foreground-200: 50 255 50;
    /* used for text of inactive feed tab, normally cherry-ish? */
    --color-foreground-800: 20 100 20;
    /* background of inactive feed tab */
}
#freshworks-container {
	/* i don't want to figure out how to recolor this so these 3 lines just hide the container. turn off the stylesheet for a sec to report a bug (which you should if you see one!important) and also to check if its a bug with this stylesheet in which case don't do that. */
	display:none;
}
.text-notBlack, .prose, .prose-stone, .lg\:text-notBlack {
	/* prose has a BUNCH of crap in the stylesheet from somewhere, i'm not messing with the stuff i didnt see needed, idc */
	color: rgb(var(--color-notBlack)/var(--tw-text-opacity));
	--tw-prose-headings: rgb(var(--color-black));
	--tw-prose-code: rgb(var(--color-black));
	--tw-prose-bold: rgb(var(--color-black));
	--tw-prose-quotes: rgb(var(--color-black));
	--tw-prose-bullets: rgb(var(--color-black));
	--tw-prose-counters: rgb(var(--color-black));
	--tw-prose-hr: rgb(var(--color-gray-300));
}
header ul.text-notWhite {
	color: rgb(var(--color-notBlack)/var(--tw-text-opacity));
	/* on my env, the account switcher needs this custom rule for some weird reason. if yours doesn't, just delete or comment it out */
}

/* that's all the variables, below is just the implementation */

div[data-post-preview] hr:first-of-type::after {
	background-color: rgb(var(--color-white)/var(--tw-bg-opacity));
	color: rgb(var(--color-gray-800)/var(--tw-text-opacity));
}
.bg-notWhite, input[type=checkbox], .kp, .lg\:bg-notWhite, .hover\:bg-notWhite:hover {
	background-color: rgb(var(--color-notWhite)/var(--tw-bg-opacity));
}
.border-notWhite {
	border-color: rgb(var(--color-notWhite)/var(--tw-border-opacity));
}
input[type=checkbox] {
  color: rgb(var(--color-notWhite)/var(--tw-text-opacity));
}
.text-notWhite, .hover\:text-notWhite:hover {
	color: rgb(var(--color-notWhite)/var(--tw-text-opacity));
}
.kbp {
	color: rgb(var(--color-notWhite));
	background-color: rgb(var(--color-cherry));
}
.kbs {
	color: rgb(var(--color-gray-800));
	background: rgb(var(--color-gray-300));
}
a.kb.kbl, a.tw._f1m {
	color: rgb(var(--color-gray-800));
}
.bg-notBlack, .hover\:bg-notBlack:hover {
	background-color: rgb(var(--color-notBlack)/var(--tw-bg-opacity));
}
.border-notBlack {
	border-color: rgb(var(--color-notBlack)/var(--tw-border-opacity));
}
.bg-white, [type=text], [type=email], [type=url], [type=password], [type=number], [type=date], [type=datetime-local], [type=month], [type=search], [type=tel], [type=time], [type=week], [multiple], textarea, select {
    background-color: rgb(var(--color-white)/var(--tw-bg-opacity));
	color: rgb(var(--color-notBlack)/var(--tw-text-opacity));
}
.text-white {
	color: rgb(var(--color-white)/var(--tw-text-opacity));
}
.text-black, .text-cherry-900 {
	color: rgb(var(--color-black)/var(--tw-text-opacity));
}
.kp .th, .kp .kd {
	color: rgb(var(--color-black))
}
.border-gray-300 {
	border-color: rgb(var(--color-gray-300)/var(--tw-text-opacity));
}
.text-gray-400 {
	color: rgb(var(--color-gray-400)/var(--tw-text-opacity));
}
.text-gray-500 {
	color: rgb(var(--color-gray-500)/var(--tw-text-opacity));
}
.text-gray-600 {
	color: rgb(var(--color-gray-600)/var(--tw-text-opacity));
}
.text-gray-800 {
	color: rgb(var(--color-gray-800)/var(--tw-text-opacity));
}
.border-cherry {
	border-color: rgb(var(--color-cherry)/var(--tw-border-opacity));
}
.text-cherry {
	color: rgb(var(--color-cherry)/var(--tw-text-opacity));
}
.bg-mango-100 {
	background-color: rgb(var(--color-mango-100)/var(--tw-bg-opacity));
}
.bg-longan-100 {
	background-color: rgb(var(--color-longan-100)/var(--tw-bg-opacity));
}
.bg-longan-300 {
	background-color: rgb(var(--color-longan-300)/var(--tw-bg-opacity));
}
.bg-cherry {
	background-color: rgb(var(--color-cherry)/var(--tw-bg-opacity));
}
.hover\:text-cherry:hover {
	color: rgb(var(--color-cherry)/var(--tw-text-opacity));
}
.hover\:text-cherry-800:hover {
	color: rgb(var(--color-cherry-800)/var(--tw-text-opacity));
}
.hover\:text-cherry-900:hover {
	color: rgb(var(--color-cherry-900)/var(--tw-text-opacity));
}
.hover\:bg-cherry-100:hover {
	background-color: rgb(var(--color-cherry-100)/var(--tw-bg-opacity));
}
.hover\:bg-cherry-200:hover {
	background-color: rgb(var(--color-cherry-200)/var(--tw-bg-opacity));
}
.fill-cherry {
	fill: rgb(var(--color-cherry));
}
.group:hover .group-hover\:bg-cherry-600 {
	background-color: rgb(var(--color-cherry-600)/var(--tw-bg-opacity));
}