@charset "UTF-8";

/**
 * colors.css 1.1.0
 * Author: hybrid.
 *
 * Color palette, background color utilities, text color utilities.
 * RGB variables allow rgba() usage: rgba(var(--dark-rgb), .5)
 *
 * Sections
 * CONFIG      — palette tokens, applicators, highlighted overrides
 * THEME       — .has-* text and background color classes
 *
 * Tokens defined here
 * --bright-rgb / --bright-color
 * --light-rgb / --light-color
 * --grey-rgb / --grey-color
 * --dark-rgb / --dark-color
 * --accent-rgb / --accent-color
 * --alert-rgb / --alert-color
 * --selection-rgb / --selection-color
 * --text-color / --background-color
 *
 * Classes
 * [class*="-text-color"]       — applies --text-color
 * [class*="-background-color"] — applies --text-color and --background-color
 * [class^="is-theme-"]         — sets --background-color from --theme-color
 * .has-*-text-color            — sets --text-color scoped variable
 * .has-*-background-color      — sets --background-color scoped variable
 *
 * Dependencies
 * --mark-background            defined in reset.css
 */



/* ================================================================================================== */
/* ============================================= CONFIG ============================================= */
/* ================================================================================================== */


/* =============== DEFAULT =============== */

:root {
	--bright-rgb: 255, 255, 255;
	--light-rgb: 245, 245, 240;
	--grey-rgb: 145, 145, 140;
	--dark-rgb: 0, 0, 0;

	--accent-rgb: 255, 129, 178;
	--alert-rgb: 255, 0, 0;
	--selection-rgb: 255, 255, 153;

	--bright-color: rgb(var(--bright-rgb));
	--light-color: rgb(var(--light-rgb));
	--grey-color: rgb(var(--grey-rgb));
	--dark-color: rgb(var(--dark-rgb));

	--accent-color: rgb(var(--accent-rgb));
	--alert-color: rgb(var(--alert-rgb));
	--selection-color: rgb(var(--selection-rgb));

	--text-color: var(--dark-color);
	--background-color: var(--bright-color);

	--theme-rgb: var(--bright-rgb);
	--theme-color: rgb(var(--bright-rgb));
}


/* =============== VARIATIONS =============== */

[class*='-text-color'] {
	color: var(--text-color);
}
[class*='-background-color'] {
	color: var(--text-color);
	background: var(--background-color);
}
[class^="is-theme-"] {
	--background-color: var(--theme-color, var(--bright-color));
}


/* ============================== HIGHLIGHTED ============================== */

/*
 * Text color class — resets highlighted styles.
 * Background color class — maps --mark-background to palette.
 */

mark[class*='-text-color'],
.highlighted[class*='-text-color'] {
	color: var(--text-color);
	background: none;
	box-shadow: none;
	padding: 0;
}

mark[class*='-background-color'],
.highlighted[class*='-background-color'] {
	--mark-background: var(--background-color);
}



/* ================================================================================================= */
/* ============================================= THEME ============================================= */
/* ================================================================================================= */


/* ============================== TEXT COLORS ============================== */

.has-bright-text-color {
	--text-color: var(--bright-color);
}
.has-light-text-color {
	--text-color: var(--light-color);
}
.has-grey-text-color {
	--text-color: var(--grey-color);
}
.has-dark-text-color {
	--text-color: var(--dark-color);
}

.has-accent-text-color {
	--text-color: var(--accent-color);
}
.has-alert-text-color {
	--text-color: var(--alert-color);
}


/* ============================== BACKGROUND COLORS ============================== */

.has-bright-background-color {
	--background-color: var(--bright-color);
}
.has-light-background-color {
	--background-color: var(--light-color);
}
.has-grey-background-color {
	--background-color: var(--grey-color);
}
.has-dark-background-color {
	--text-color: var(--bright-color);
	--background-color: var(--dark-color);
}

.has-accent-background-color {
	--background-color: var(--accent-color);
}
.has-alert-background-color {
	--background-color: var(--alert-color);
}