/*
	Configure the page colors.
 */

/* Define pure colors. */

:root {
	/* 
		Used as default color for the background when no image is loaded, and to tint the background image if there is one.
	 */
	--color-background: #1A1A1A;

	/* 
		Default text color. 
	*/
	--color-foreground: #BABABA;

	/* 
		Important text color.
	*/
	--color-accent: #FFFFFF;

	/* 
		Interactive item color.
		Used for links, inputs, and closed summaries.
		For design conventions, it should be a shade of cyan. 
	*/
	--color-interactive: #64cfc6;

	/* 
		Visited link color. 
		Used for visited links and open summaries.
		For design conventions, it should be a shade of purple. 
	*/
	--color-visited: #cca9ec;

	/* 
		Successful operation color. 
		For flashes.
	*/
	--color-success: #6FE66F;

	/* 
		Pending operation color. 
		For flashes.
	*/
	--color-pending: #FFFF7B;

	/* 
		Failed operation color. 
		For flashes.
	*/
	--color-failure: #FF7B7B;
}

/* Define opacity levels. */

:root {
	/*
		How intensely the background color is overlaid on the background image.
	*/
	--opacity-background: 1.00;

	/* 
		Border opacity.
		For box and table borders.
	*/
	--opacity-border: 0.12;

	/* 
		Separator opacity.
		For borders with a strong meaning, such as hr elements.
	*/
	--opacity-separator: 0.40;

	/* 
		Section opacity.
		For section backgrounds.
		Shouldn't be very high, considering that the background is the same color as the foreground. 
	 */
	--opacity-panel: 0.03;

	/* 
		Input background opacity. 
		Same considerations as above.
		Should be more than --opacity-panel.
	 */
	--opacity-input: 0.06;

	/* 
		Input background opacity when they are hovered or clicked on. 
		Same considerations as above. 
		Should be more than --opacity-input.
	 */
	--opacity-input-hover: 0.18;

	/* 
		Placeholder text opacity.
		Final opacity is given by the sum of this with --opacity-input.
	 */
	--opacity-placeholder: 0.50;
}

/* Define the background image. */

:root {
	/* 
		Deliberately empty.
		Should be set via the Jinja template, so that the url_for function is accessible.
	*/
	--texture-background: ;
}

/* Define effects parameters. */

:root {
	/*
		The radius of the backdrop blur effect applied by panels.
	*/
	--effect-panel-backdrop-blur: 0;
}

/* Apply the pure colors to the respective elements. */

body {
	color: var(--color-foreground);

	/* Simulate transparency of the image. */
	background-image: linear-gradient(rgb(from var(--color-background) r g b / var(--opacity-background))), var(--texture-background);
	background-color: var(--color-background);
	background-position: 50% 50%;
	background-size: cover;
	background-attachment: fixed;
	background-repeat: no-repeat;
}

h1, h2, h3, h4, h5, h6,
b, strong {
	color: var(--color-accent);
}

a {
	color: var(--color-interactive);
	text-decoration-color: var(--color-interactive);
}

a:visited {
	/* 
		Keep in mind that :visited has strict rules on what properties it allows!
		https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Selectors/Privacy_and_:visited
	 */

	color: var(--color-visited);
	text-decoration-color: var(--color-visited);
}

details > summary {
	color: var(--color-interactive);
}

details[open] > summary {
	color: var(--color-visited);
}

*:focus-visible {
	outline-color: var(--color-interactive);
}

*[data-status="success"] {
	--color-foreground: var(--color-success);
}

*[data-status="pending"] {
	--color-foreground: var(--color-pending);
}

*[data-status="failure"] {
	--color-foreground: var(--color-failure);
}

*[data-status] {
	/* Re-calculate the text color from the new foreground. */
	color: var(--color-foreground);
}

/* Dynamically generate semi-transparent colors. */

hr, .separator {
	border-color: rgb(from var(--color-foreground) r g b / var(--opacity-separator));
}

textarea, button, input, select {
	color: var(--color-interactive);
	border-color: rgb(from var(--color-interactive) r g b / var(--opacity-border));
	background-color: rgb(from var(--color-interactive) r g b / var(--opacity-input));
}

textarea:hover, button:hover, input:hover, select:hover {
	background-color: rgb(from var(--color-interactive) r g b / var(--opacity-input-hover));
}

textarea:active, button:active, input:active, select:active {
	color: var(--color-visited);
	border-color: rgb(from var(--color-visited) r g b / var(--opacity-border));
	background-color: rgb(from var(--color-visited) r g b / var(--opacity-input-hover));
	outline-color: var(--color-visited);
}

textarea::placeholder, input::placeholder {
	color: rgb(from var(--color-interactive) r g b / var(--opacity-placeholder));
}

input[type="checkbox"]::after,
input[type="radio"]::after {
	background-color: transparent;
}

input[type="checkbox"]:checked::after,
input[type="radio"]:checked::after {
	background-color: var(--color-interactive);
}

q::before, q::after, li::marker, .separator {
	color: rgb(from var(--color-foreground) r g b / var(--opacity-separator));
}

/* 
	Color summaries while making sure their interactivity remains visible. 
	Not too much a fan of all this, might use a refactor later.
*/

details > summary {
	text-decoration-thickness: 1px;
	text-decoration-style: dashed;
	text-decoration-line: underline;
	text-decoration-color: rgb(from var(--color-interactive) r g b / var(--opacity-separator));
}

details > summary::marker {
	color: rgb(from var(--color-interactive) r g b / var(--opacity-separator));
}

details > summary:hover {
	text-decoration-color: rgb(from var(--color-interactive) r g b / var(--opacity-foreground));
}

details > summary:hover::marker {
	color: rgb(from var(--color-interactive) r g b / var(--opacity-foreground));
}

details[open] > summary {
	text-decoration-color: rgb(from var(--color-visited) r g b / var(--opacity-separator));
}

details[open] > summary::marker {
	color: rgb(from var(--color-visited) r g b / var(--opacity-separator));
}

details[open] > summary:hover {
	text-decoration-color: rgb(from var(--color-visited) r g b / var(--opacity-foreground));
}

details[open] > summary:hover::marker {
	color: rgb(from var(--color-visited) r g b / var(--opacity-foreground));
}

/* Configure panel coloring. */

.panel {
	background-color: rgb(from var(--color-foreground) r g b / var(--opacity-panel));

	backdrop-filter: blur(var(--effect-panel-backdrop-blur));
}

.panel .panel {
	backdrop-filter: none;
}

a.panel {
	background-color: rgb(from var(--color-interactive) r g b / var(--opacity-input));
}

a.panel:hover {
	background-color: rgb(from var(--color-interactive) r g b / var(--opacity-input-hover));
}

a.panel:visited {
	background-color: rgb(from var(--color-visited) r g b / var(--opacity-input));
}

a.panel:visited:hover {
	background-color: rgb(from var(--color-visited) r g b / var(--opacity-input-hover));
}

.box {
	border-color: rgb(from var(--color-foreground) r g b / var(--opacity-border));
}

/* Configure navbar item separators. */

nav ul {
	column-rule-color: rgb(from var(--color-foreground) r g b / var(--opacity-separator));
}

/* Configure footer item separators. */

footer li {
	border-inline-end-color: rgb(from var(--color-foreground) r g b / var(--opacity-separator));
}

/* Make the MOTD yellow in debug mode. */

.debug #motd {
	--color-foreground: var(--color-pending);

	/* Re-calculate the color. */
	color: var(--color-foreground);
}