/* theme.css */


.underlined {
	text-decoration: underline;
}

em {
	font-style: italic;
}

html {
	font-size: 15px;
	font-family: 'Roboto', sans-serif;
}

h1 {
	font-size: 1.3333333333rem;
	font-weight: 700;
}

h2 {
	font-size: 1.2rem;
	font-weight: 700;
}

h3 {
	font-size: 1rem;
	font-weight: 700;
}

h4 {
	font-size: 0.8666666667rem;
	font-weight: 700;
}

h5 {
	font-size: 0.8rem;
	font-weight: 700;
	color: #cecece;
	text-transform: uppercase;
}

:root {
	/* THEME */
	--primary-background: #f1f2f3;
	--secondary-background: #ffffff;
	--tag-background: #f2f2f2;
	--primary-actions: #3a8dde;
	--accent-color: #194f90;
	--accent-color-light: #EBF5FF;
	--foreground-color: #222222; /*update to #444444 */
	--label-input: #707070;
	--light-foreground-color: #444444;
	--light-background-color: #fdfdfd; 
	--background-color: #ffffff;
	/* BUTTONS */
	--primary-button-background: #194f90;
	--reminder-date-button-background: #acacac;
	--contact-method-button-background: #e2e2e2;
	--plain-button-background: #e2e2e2;
	--matted-button-text: #ffffff;
	--info-text: #acacac; /* information-icon --info-button: */
	--button-border-radius: 4px; /* NEW */
	/* CONTAINERS */
	--popup-header-background: #e2e2e2;
	--border-color: #ededed;
	--popup-border-radius: 10px; /* NEW */
	--options-background: #f7f7f7;
	--transparent-background-hover: rgba(255,255,255,.8);
	--active-background: rgba(60,64,67,0.122);
	--hover-background: rgb(133,144,153,0.08);
	/* SHADOWS */
	--feed-item-shadow: 0 1px 1px rgb(0 0 0 /10%);
	--popup-box-shadow: 4px 4px 10px 0 rgb(0 0 0 / 10%); /*UPDATE --popup-box-shadow: 0 0 20px 0 rgb(0 0 0 /10%); */
	--popup-options-shadow: 0 0 20px 0 rgb(0 0 0 / 20%); /*NEW*/
	--tooltip-shadow: 0 0 20px 0 rgb(0 0 0 / 20%); /*NEW*/
	--navbar-shadow: 0 0 4px rgba(0,0,0,0.1);
	/* TABLES */
	--table-header-bg: #f1f2f3; /* NEW */
	--table-alt-bg: #fbfcfd;
	--table-select-boxes: #c0c9d2;
	--table-border-color: #c0c9d2;
	--table-column-hover: #e5e6ea;
	/* NAVBAR */
	--navbar-selected-section-background: #f7f7f7;
	--navbar-selected-background: #e7eaed;
	/* INTERACTION */
	--like-icon-color: #3a8dde; /* NEW */
	--save-icon-color: #28a745; /* NEW */
	--reshare-icon-color: #3a8dde; /* NEW */
	/* NOTIFICATIONS */
	--notification-red-color: #ee2c4d;
	--notification-orange-color: #ff7f00;
	--success-border-color: #c6f1cd;
	--success-background: #edfbef;
	--success-green-color: #007d1b;
	--unread-notification-background: hsl(200,40%,90%);
	--unread-notification-color: rgba(112,181,249,.3);
	--question-color: #3a8dde;
	/* INPUTS/TOGGLES */
	--input-bg: #f6f6f6;
	--input-border-color: #e2e2e2;
	--disabled-color: #e6e6e6; /* RENAME --disabled-color: */
	--input-background-color: #e2e2e2;
	--placeholder-text-color: #acacac;
	--error-red-color: #a50000;
	--checkbox-border-color: #c0c9d2;
	/* SELFCARE BUTTONS */
	--emotional-color: #ff7f00;
	--physical-color: #28a745;
	--social-color: #3597ec;
	--spiritual-color: #ba00ff;

	/* --scrollFraction: 10px; */
	--tab-button-space: 10px;
	--tab-inset: 0px;
	--title-opacity: 1;
	--title-scale: 1;
	--oval-height: 20px;

	/* onword */
	--board-size: min(100vw, 400px);

}

.darkMode {
	--accent-color: #3a8dde;
	--primary-button-background: #3a8dde;
	--background-color: rgb(40,41,45);
	--light-background-color: #303030;
	--light-background-color: #37383c;
	--foreground-color: #ffffff;
	--label-input: #ffffff;
	--light-foreground-color: #a2a2a2;
	--primary-background: #181818;
	--secondary-background: #000000;
	--tag-background: #444444;
	--border-color: #313131;
	--disabled-color: #242424;
	--transparent-background-hover: rgba(0,0,0,.8);
	--active-background: rgba(60,64,67,0.122);
	--hover-background: rgba(60,64,67,0.078);
	--table-border-color: #3b3b3b;
	--input-border-color: #575757;
	--navbar-selected-section-background: #222222;
	--navbar-selected-background: #2c2c2c;
	--checkbox-border-color: #656565;
	--popup-header-background: #4a4a4a;
	--popup-header-background: #1c1e23;
	--contact-method-button-background: #f7f7f7;
	--plain-button-background: #222222;
	--navbar-border-color: #000000;
	--matted-button-text: #222222;
	--emotional-color: #ff7f00;
	--physical-color: #28a745;
	--social-color: #3597ec;
	--spiritual-color: #ba00ff;	
}