/* ----------------------------- COLOR VARIABLES ---------------------------- */

/* ------------------------------- LIGHT MODE ------------------------------- */
html:root {
	/* ---------------- JULY 2021 COLOR REVAMP TO NON-COLOR NAMES --------------- */
	/* brand color */
	--panel-color: #fff;
	--tc-primary: var(--light-charcoal-casper);

	/* background color */
	--background-color: #f8fafb;

	/* border */
	--border-opacity: 0.85;
	--border-color: rgba(0, 0, 0, var(--border-opacity));

	/* brand alternate color */
	--panel-alt-color: #f0f0f0;
	--panel-hover-color: #eaf0f5;

	/* accents */
	--accent: #2ce5f6;
	--accent-rgb: 44, 229, 246;

	/* accent text color */
	--tc-accent: #1e1e1e;

	/* accent pseudo color */
	--accent-hover-color: #1dd6e7;

	/* ALPHAS */
	--alpha-20: 0.2;

	/* TRANSITIONS */
	--transition-time: 0.3s;
	/* -------------------------------------------------------------------------- */

	/* ------------------------------ LEGACY COLORS ----------------------------- */
	--flat-light-color: #fff;
	--flat-dark-color: #000;
	/* -------------------------------------------------------------------------- */

	/* ------------------------------ RILEY REVAMP ------------------------------ */
	/* TODO: NATHAN - Find and replace each of these with their
    respective names, like --bgc-primary and --tc-primary  */
	--charcoal-casper: #333;
	--casper-obsidian: #f8fafb;
	--ghost-obsidian: #e8ecef;
	--ghost-light-charcoal: #e8ecef;

	/* Text */
	--light-charcoal-casper: #535353;
	--light-charcoal-casper-2: #535353;

	/* Icon Colors */
	--medium-gray: #cad0d5;

	/* checkbox colors */
	--checkbox-color: #e8ecef;
	/* -------------------------------------------------------------------------- */

	/* -------------------- NEW PRIMARY/SECONDARY/ETC COLORS -------------------- */

	/* -------------------------------------------------------------------------- */

	/* --------------------------- NOTIFICATION COLORS -------------------------- */
	--notification-general: #d1fbff;
	--notification-warning: #f5ca3d;
	--notification-success: #b2ef8d;
	--notification-error: #f47878;
	/* -------------------------------------------------------------------------- */

	/* Button Opacity */
	--disabled-opacity: 0.45;
}
/* -------------------------------------------------------------------------- */

/* -------------------------------- DARK MODE ------------------------------- */
html:not(.style-scope)[dark] {
	/* ---------------- JULY 2021 COLOR REVAMP TO NON-COLOR NAMES --------------- */
	/* brand color */
	--panel-color: ##1e1f29;

	/* background color */
	--background-color: #333;

	/* border */
	--border-opacity: 0.15;
	--border-color: rgba(255, 255, 255, var(--border-opacity));

	/* brand alt color */
	--panel-alt-color: #23242e;
	--panel-hover-color: #4f4f4f;

	/* accents */
	--accent: #2ce5f6;
	--accent-rgb: 44, 229, 246;

	/* accent text color */
	--tc-accent: #1e1e1e;

	/* accent pseudo color */
	--accent-hover-color: #31eafb;

	--tc-primary: var(--light-charcoal-casper);
	/* -------------------------------------------------------------------------- */

	/* ------------------------------ LEGACY COLORS ----------------------------- */
	--flat-light-color: #000;
	--flat-dark-color: #fff;
	/* -------------------------------------------------------------------------- */

	/* --------------------------------- REVAMP --------------------------------- */
	--charcoal-casper: #f8fafb;
	--casper-obsidian: #36363b;
	--ghost-obsidian: #36363b;
	--ghost-light-charcoal: #535353;

	/* Text */
	--light-charcoal-casper: #f8fafb;
	--light-charcoal-casper-2: #f8fafb;

	/* Icon Colors */
	--medium-gray: #707070;

	/* checkbox colors */
	--checkbox-color: #848484;
	/* -------------------------------------------------------------------------- */
}
/* -------------------------------------------------------------------------- */