:root {
	--white1: #fafaff;
	--white2: #b3b5c6;
	--gray1: #2a2b2f;
	--gray2: #35363b;
	--gray3: #3a3b41;
	--gray4: #45464e;
	--gray5: #4d4e56;
	--gray6: #575861;
	--gray7: #5d5e67;
	--gray8: #696a75;
	--orange1: #fd6a00;
	--orange2: #ff853e;
	--blue1: #3a9fde;
	--blue2: #66befe;
	--blue3: #89caff;
	--error1: #860000;
	--error2: #ff9796;
	--error3: #dd2c2c;
	--error-link: #01318C;
	--green1: #94E749;
	--info-fg: var(--gray1);
	--info-bg: #b3ddff;
	--info-link: var(--error-link);
	--fg: var(--white1);
	--bg: var(--gray1);
	--bg-trans: rgba(77, 78, 86, 0.62);
	--bg-accent: var(--gray5);
	--fg-accent: var(--blue3);
	--fg-reduced: var(--white2);
	--border-accent: var(--orange2);
	--link-fg: var(--fg-accent);
	--role-admin: var(--orange2);
	--role-mod: var(--blue2);
	--profile-bg: var(--gray4);
	--button-bg: var(--blue2);
	--button-fg: var(--gray1);
	--button-hover-bg: var(--blue3);
	--button-focus-border: var(--button-hover-bg);
	--button-danger-bg: var(--error3);
	--button-danger-fg: var(--white1);
	--button-danger-hover-bg: var(--error2);
	--status-bg: var(--gray3);
	--status-info-bg: var(--gray2);
	--status-focus-bg: var(--gray5);
	--status-focus-info-bg: var(--gray4);
	--no-img-desc-bg: var(--orange1);
	--no-img-desc-fg: var(--gray1);
	--bg-sensitive: var(--gray1);
	--boxshadow: 0 0.4rem 1rem -0.1rem rgba(0, 0, 0, 0.15);
	--boxshadow-border: 0.08rem solid var(--gray1);
	--avatar-border: var(--orange2);
	--input-bg: var(--gray4);
	--input-disabled-bg: var(--gray2);
	--input-border: var(--blue1);
	--input-error-border: var(--error3);
	--input-focus-border: var(--blue3);
	--settings-nav-bg: var(--bg);
	--settings-nav-header-fg: var(--orange2);
	--settings-nav-bg-hover: var(--gray3);
	--settings-nav-fg-hover: var(--fg);
	--settings-nav-bg-active: var(--blue3);
	--settings-nav-border-active: var(--info-bg);
	--settings-nav-fg-active: var(--gray2);
	--error-fg: var(--error1);
	--error-bg: var(--error2);
	--list-entry-bg: var(--gray2);
	--list-entry-alternate-bg: var(--gray3);
	--list-entry-hover-bg: var(--gray4);
	--plyr-color-main: var(--orange2);
	--plyr-video-background: var(--bg-accent);
	--plyr-badge-background: var(--bg-accent);
	--plyr-video-controls-background: var(--bg-accent);
	--plyr-badge-text-color: var(--fg);
	--plyr-badge-border-radius: var(--br);
	--plyr-video-progress-buffered-background: var(--gray8);
	--white: #fafaff;
}

/*
	GoToSocial
	Copyright (C) GoToSocial Authors admin@gotosocial.org
	SPDX-License-Identifier: AGPL-3.0-or-later

	This program is free software: you can redistribute it and/or modify
	it under the terms of the GNU Affero General Public License as published by
	the Free Software Foundation, either version 3 of the License, or
	(at your option) any later version.

	This program is distributed in the hope that it will be useful,
	but WITHOUT ANY WARRANTY; without even the implied warranty of
	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
	GNU Affero General Public License for more details.

	You should have received a copy of the GNU Affero General Public License
	along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/

/*
   This stylesheets defines (color) variables to be used by other stylesheets on the page
   postcss-custom-prop-vars will transpile these to css --variables
*/

/* Color definitions */

/* Dark mode - default */

/* Foreground */

/* default text color, contrast >= 5.0 with all $grays */

/* less important text, can be used with $gray1 (6.8), $gray2 (5.5), $gray3 (4.9), $gray4 (4.5) */

/* Background shades, contrast >= 5.0 with $white1 (#fafaff) */

/* Used for non-text accent colors, can be used as background: $gray1 for text color (contrast 4.6)*/

/* hover/selected accent to $orange1, can be used with $gray1 (5.7), $gray2 (4.6) */

/* darker blue for smaller elements (borders), can only be used with $gray1 (4.7) */

/* all-round accent color, can be used with $gray1 (6.8), $gray2 (5.5), $gray3 (4.9), $gray4 (4.5) */

/* hover/selected accent to $blue2, can be used with $gray1 (7.9), $gray2 (6.3), $gray3 (5.6), $gray4 (5.2), $gray5 (4.7) */

/* Error border/foreground text, can be used with $error2 (5.0), $white1 (10), $white2 (5.1) */

/* Error background text, can be used with $error1 (5.0), $gray1 (6.6), $gray2 (5.3), $gray3 (4.8) */

/* Error button background text, can be used with $white1 (4.51) */

/* Error link text, can be used with $error2 (5.56) */

/* Green for positive/confirmation, similar contrast (luminance) as $blue2 */

/* Color variables as used in a specific location */

/* Plyr video player */

/* Light mode */

/* we still use white for something */

@media (prefers-color-scheme: light) {
	:root {
		--white1: #000000; /* default text color, contrast >= 5.0 with all $grays */
		--white2: #59595F; /* less important text, can be used with $gray1 (8.5) ~ $gray5 (5.0) */

		/* Background shades, contrast >= 5.0 with $white1 (#000000) */
		--gray1: #ffffff;
		--gray2: #f6f6f6;
		--gray3: #ededed;
		--gray4: #e4e4e4;
		--gray5: #dbdbdb;
		--gray6: #d2d2d2;
		--gray7: #c9c9c9;
		--gray8: #c0c0c0;

		--orange1: #c75300; /* Used for non-text accent colors, can be used as background: $gray1 for text color (contrast 4.5)*/
		--orange2: #bd4f00; /* hover/selected accent to $orange1, can be used with $gray1 (5.7), $gray2 (4.5) */

		--blue1: #247cb3; /* lighter blue for smaller elements (borders), can only be used with $gray1 (4.5) */
		--blue2: #166ba0; /* all-round accent color, can be used with $gray1 (5.7), $gray2 (5.3), $gray3 (4.9), $gray4 (4.5) */
		--blue3: #106193; /* hover/selected accent to $blue2, can be used with $gray1 (6.6), $gray2 (6.1), $gray3 (5.6), $gray4 (5.2), $gray5 (4.8) */

		--error1: #ffc1c1; /* Error border/foreground text, can be used with $error2 (5.0), $white1 (13.6), $white2 (4.5) */
		--error2: #aa0000; /* Error background text, can be used with $error1 (5.0), $gray1 (7.7), $gray2 (7.1), $gray3 (6.62) */
		--error3: #d93636; /* Error button background text, can be used with $white1 (4.53) */
		--error-link: #abd4ff; /* Error link text, can be used with $error2 (5.56) */

		--green1: #367400;

		--info-bg: var(--blue1);
	}
}