@import url("style_base.css");


:root {
	--background: #fdeef3; /* body background: soft pink */
	--dark-color: #e5678e; /* h1 darker: warm pink */
	--link-color: #f07a9c; /* links directly on --background */
	--link-header-color: #e5678e; /* links directly on h2 or h3 */
	--header-white: #fff; /* directly on h1 --semi-dark-color ~ --dark-color gradient */
	--header-black: #2e2e2e; /* directly on h2 or h3 */
	--semi-dark-color: #f497b3; /* h1 lighter: soft pink */
	--medium-color: #f8a9be; /* h2: medium pink */
	--semi-light-color: #fcd6e1; /* h3, nav h2, details: pale pink */
	--light-color: #fdeff4; /* div block bg color: very pale pink */
	--text-color: #2e2e2e; /* directly on --background */
	--underlay: rgba(0, 0, 0, 0.8); /* color behind the side bar when appearing, with opacity 0.8 */
	--detail-border-color: #f4b7c5; /* details border: soft pink */
	--summary-index-color: #d06b8a; /* details summary header: dusty pink */
	--table-border-color: #f08ba3; /* table border: stronger pink */
	--dotted-border-color: #f6c1cf; /* dotted border on side bar: soft pastel pink */
	--table-header-color: #f7b3c6; /* bg of th elements: light pink */
	--table-td-invalid-color: #f8c5d0; /* invalid data cell color: pale pink */
	--table-td-odd-color: #fde6ed; /* odd row bg: very pale pink */
	--table-td-even-color: #fdeef3; /* even row bg: soft pale pink */

	--warning-border: #ffccd5; /* warning box border */
	--warning-color: #ff99aa; /* warning text or icons */
}

@media (prefers-color-scheme: dark) {
	:root {
		--background: #2a2a2a; /* dark gray background */
		--link-color: #ff8ca3; /* high-contrast pink links */
		--text-color: #e4e4e4; /* soft white text */
		--table-header-color: #663b4c; /* table header dark pink */
		--table-td-odd-color: #3a3a3a; /* odd row bg: dark gray */
		--table-td-even-color: #4a4a4a; /* even row bg: darker gray */
	}

	svg polygon, svg line {
		stroke: #e4e4e4; /* lines in dark mode */
	}

	svg text {
		fill: #e4e4e4; /* text in dark mode */
	}
}