:root {
	--bg-color: white;
	--bg-color-accent: rgb(180, 180, 180);
	--nav-color: rgba(255, 255, 255, 0.8);
	--text-color: black;
	--text-color-accent: rgb(90, 90, 90);
	--accent-color: rgba(128, 128, 128, 0.226);
	--accent-color-hover: rgba(46, 46, 46);
	--backdrop-filter: blur(4px) grayscale(80%);
	--backdrop-mix-blend-mode: multiply;
	--rating-color: black;
	--placeholder-color: #8e8e8e;
	--poster-rating-color: gold;
	--img-blend-multiply-bg-col: rgba(0, 0, 0, 0.85);
}

:root.theme-dark {
	--bg-color: rgb(15, 15, 15);
	--bg-color-accent: rgb(70, 70, 70);
	--nav-color: rgba(15, 15, 15, 0.438);
	--text-color: white;
	--text-color-accent: rgb(180, 180, 180);
	--accent-color: rgba(46, 46, 46);
	--accent-color-hover: rgba(255, 255, 255, 0.8);
	--backdrop-filter: blur(0.5px) grayscale(50%);
	--backdrop-mix-blend-mode: difference;
	--rating-color: gold;
	--placeholder-color: #8e8e8e;
	--poster-rating-color: black;
	--img-blend-multiply-bg-col: rgba(255, 255, 255, 0.03);
}

$bg-color: var(--bg-color);
$bg-color-accent: var(--bg-color-accent);
$text-color: var(--text-color);
$text-color-accent: var(--text-color-accent);
$placeholder-color: var(--placeholder-color);
$accent-color: var(--accent-color);
$accent-color-hover: var(--accent-color-hover);
$backdrop-filter: var(--backdrop-filter);
$backdrop-mix-blend-mode: var(--backdrop-mix-blend-mode);
$backdrop-mask-image: linear-gradient(
	to bottom,
	rgba(0, 0, 0, 1) 80%,
	rgba(0, 0, 0, 0)
);
$nav-color: var(--nav-color);
$nav-height: 71px; // How tall the nav is naturally, usefull in some places.
$poster-rating-color: var(--poster-rating-color);
$poster-extra-detail-bg-color: rgba(46, 46, 46, 0.5);
// Bg col of elements with image behind with mix-blend-mode: multiply where we want a little of image to come through.
$img-blend-multiply-bg-col: var(--img-blend-multiply-bg-col);
$warn: #f38755;
$error: #f3555a;
$success: #28a745;
$success-hover: #1e7e34;

// For ratings that are on bg-color.
$rating-color: var(--rating-color);
