@charset "UTF-8";

/* Stylesheet for the Unicode browser
 * dev file for variables
 * by Sascha Leib for unicode.kolmio.com
 * File name: _variables.css
 */

:root {

	/* site settings */
	
	--maxWidth: 1260px;
	--pageWidth: 960px;
	--uiFonts: system-ui,'Noto Sans',sans-serif;
	--previewFonts: system-ui,'Noto Sans','Noto Emoji','Noto Sans Symbols','Noto Sans Symbols 2','Noto Music','Noto Sans Anatolian Hieroglyphs','Noto Sans Arabic','Noto Sans Avestan','Noto Sans Bamum','Noto Sans Bassa Vah','Noto Sans Bhaiksuki','Noto Sans Chorasmian','Noto Sans Cuneiform','Noto Sans Devanagari','Noto Sans Duployan','Noto Sans Elbasan','Noto Sans Elymaic','Noto Sans Ethiopic','Noto Sans Grantha','Noto Sans Gunjala Gondi','Noto Sans Hanifi Rohingya','Noto Sans Hatran','Noto Sans Kaithi','Noto Sans Kannada','Noto Sans Kawi','Noto Sans Kayah Li','Noto Sans Khudawadi','Noto Sans Lao','Noto Sans Lepcha','Noto Sans Linear A','Noto Sans Linear B','Noto Sans Lisu','Noto Sans Mahajani','Noto Sans Mandaic','Noto Sans Manichaean','Noto Sans Marchen','Noto Sans Masaram Gondi','Noto Sans Mayan Numerals','Noto Sans Medefaidrin','Noto Sans Meetei Mayek','Noto Sans Mende Kikakui','Noto Sans Meroitic','Noto Sans Miao','Noto Sans Modi','Noto Sans Mongolian','Noto Sans Mro','Noto Sans Multani','Noto Sans Myanmar','Noto Sans Nabataean','Noto Sans Nag Mundari','Noto Sans Nandinagari','Noto Sans Newa','Noto Sans Ol Chiki','Noto Sans Old Hungarian','Noto Sans Old North Arabian','Noto Sans Old Permic','Noto Sans Old Sogdian','Noto Sans Old South Arabian','Noto Sans Pahawh Hmong','Noto Sans Palmyrene','Noto Sans Pau Cin Hau','Noto Sans Psalter Pahlavi','Noto Sans Samaritan','Noto Sans Saurashtra','Noto Sans Sharada','Noto Sans Siddham','Noto Sans Sogdian','Noto Sans Soyombo','Noto Sans Syloti Nagri','Noto Sans Syriac Eastern','Noto Sans Syriac','Noto Sans TC','Noto Sans Tagalog','Noto Sans Tai Viet','Noto Sans Takri','Noto Sans Tamil','Noto Sans Tangsa','Noto Sans Tirhuta','Noto Sans Vithkuqi','Noto Sans Wancho','Noto Sans Warang Citi','Noto Sans Zanabazar Square','Noto Serif Ahom','Noto Serif Dogra','Noto Serif Khojki','Noto Serif Makasar','Noto Serif NP Hmong','Noto Serif Old Uyghur','Noto Serif Tangut','Noto Serif Todhri','Noto Serif Toto','Noto Serif Yezidi','Noto Znamenny Musical Notation',sans-serif;
	--baseFontSize: 13pt;

	/* colours (light mode) */

	--siteBackground: #E8E8E8;
	--textColor: #222;
	--inactiveColor: #666;
	--linkColor: #0079FE;
	--linkDisabled: #BDC6CF;
	--focusColor: #FF9501;
	--helperCharacter: #C66;

	--fieldBackground: #FFF;
	--fieldText: #000;

	--headerBackground: #F4F4F4;
	--headerBtnBackground: #E4E4E4;
	--headerBtnText: #000;
	--headerBtnActiveBg: #FFF;
	--headerIconColor: #666;

	--contentBlockBg: #F7F7F7;

	--listFilterIcon: #999;
	--listFilterIconActive: #0079FE;

	--listItemColor: #333;
	--listSeparator: #CCC;
	--listSelBgColor: #EEE;
	--listSelTextColor: #000;

	--resultHeaderPopupBg: #EEE;
	--resultHeaderPopupTxt: #222;
	--resultItemBg: #EEE;
	--resultItemText: #333;
	--resultInactive: #666;

	--popupBackground: rgba(222, 222, 222, .95);
	--popupBorders: #B5B5B5;
	--popupText: #222;
	--popupHeadline: #666;
}

/* dark mode colors: */
@media (prefers-color-scheme: dark) {
	:root {
		--siteBackground: #000;
		--textColor: #EEE;
		--inactiveColor: #999;
		--linkColor: #0A84FF;
		--linkDisabled: #777;
		--focusColor: #AA6D17;
		--helperCharacter: #c03c3c;

		--fieldBackground: #000;
		--fieldText: #FFF;

		--headerBackground: #222;
		--headerBtnBackground: #111;
		--headerBtnText: #FFF;
		--headerBtnActiveBg: #333;
		--headerIconColor: #DDD;

		--contentBlockBg: #222;

		--listFilterIcon: #999;
		--listFilterIconActive: #0A84FF;

		--listItemColor: #CCC;
		--listSeparator: #333;
		--listSelBgColor: #333;
		--listSelTextColor: #FFF;

		--resultHeaderPopupBg: #333;
		--resultHeaderPopupTxt: #BBB;
		--resultItemBg: #333;
		--resultItemText: #CCC;
		--resultInactive: #999;

		--popupBackground: rgba(40, 40, 40, .95);
		--popupBorders: #555;
		--popupText: #EEE;
		--popupHeadline: #DDD;

	}
}