/**
 * This file contains CSS variables (and their default values) not presesent in the native Bootstrap variables, and how to apply them.
 * This allows the overwriting of these and the native Bootstrap variables by the actual whitelabel values coming from the management app site settings.
 * Currently catering for Bootstrap version v5.1.3.
 * See https://getbootstrap.com/docs/5.1/customize/css-variables/
 */

/**
 * 1. Fonts
 * 2. Colors
 * 3. Rounding
 * 4. Navigation
 */

/*
 * 1. Fonts
 */
/* @import url( 'https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100..900&family=Noto+Sans+JP&family=Titillium+Web:wght@900&display=swap' ); */
/* :root {
	--bs-body-font-family: "Lexend Deca", sans-serif;
	--bs-headings-font-family: "Lexend Deca", sans-serif;
} */

/**
 * 2. Colors
 */
:root {

	/* Whitelabel globals */
	--dark: var( --bs-secondary );
	--dark-rgb: var( --bs-secondary-rgb );
	--dark-subtle: var( --bs-secondary-bg-subtle );
	--dark-subtle-rgb: var( --bs-secondary-bg-subtle-rgb );
	--light: #FFF2E9;
	--light-rgb: 255, 242, 233;
	--emphasis-color: var( --bs-secondary-text-emphasis );
	--emphasis-color-rgb: var( --bs-secondary-text-emphasis-rgb );
	--subtle-color: var( --light );
	--subtle-color-rgb: var( --light-rgb );

	/* Whitelabel light-dark-mode specifics */
	--heading-color: var( --bs-primary );
	--heading-color-rgb: var( --bs-primary-rgb );
	/* --darkmode-heading-color: */
	/* --darkmode-heading-color-rgb: */

}
/* Global and light mode */
:root,
body [data-bs-theme=light] {

	/* --bs-body-bg: */
	/* --bs-body-bg-rgb: */
	--bs-body-color: var( --bs-secondary );
	--bs-body-color-rgb: var( --bs-secondary-rgb );
	/* --heading-color: */
	/* --heading-color-rgb: */
	/* --bs-link-color: */
	/* --bs-link-color-rgb: */
	/* --bs-link-hover-color: */
	/* --bs-link-hover-color-rgb: */
	--bs-border-color: rgba( var( --bs-secondary-rgb ), 0.1 );

	--bs-primary: #FF8022;
	--bs-primary-rgb: 255, 128, 34;
	--bs-primary-bg-subtle: #FFCAA1;
	--bs-primary-border-subtle: #FFA662;
	--bs-primary-text-emphasis: #D05A00;
	--bs-secondary: #00529B;
	--bs-secondary-rgb: 0, 82, 155;
	--bs-secondary-bg-subtle: #66B8FF;
	--bs-secondary-bg-subtle-rgb: 102, 184, 255;
	--bs-secondary-border-subtle: #0088FF;
	--bs-secondary-text-emphasis: #003A6D;
	--bs-secondary-text-emphasis-rgb: 0, 58, 109;
	--bs-light-text-emphasis: var( --bs-primary );
	/* --bs-light-bg-subtle */
	/* --bs-dark-text-emphasis: var( --bs-black ); */
	/* --bs-dark-bg-subtle */
	--bs-success: #45E56B;
	--bs-success-rgb: 69, 229, 107;
	--bs-info: #2BA8FF;
	--bs-info-rgb: 43, 168, 255;
	--bs-danger: #FF5C5C;
	--bs-danger-rgb: 255, 92, 92;
	--bs-warning: #FFCB39;
	--bs-warning-rgb: 255, 203, 57;

	--btn-text-color-1: #fff;
	--btn-text-color-2: #00529B;

	--bs-btn-success-color: var( --btn-text-color-2 );

}
/* Dark mode */
/* Literal color names are retained in dark mode (black, white, primary, secondary, etc.) */
/* Light and dark are reversed */
/* //todo Reverse emphasis/subtle? */
body [data-bs-theme=dark] {

	--bs-body-bg: #003A6D;
	--bs-body-bg-rgb: 0, 58, 109;
	/* --bs-body-color: #CCE7FF;
	--bs-body-color-rgb: 204, 231, 255; */
	--bs-body-color: #fff;
	--bs-body-color-rgb: 255, 255, 255;
	/* --bs-emphasis-color: var( --bs-secondary-bg-subtle );
	--bs-emphasis-color-rgb: var( --bs-secondary-bg-subtle-rgb ); */
	--bs-light-text-emphasis: var( --light );

	--bs-btn-success-color: var( --btn-text-color-2 );

}

/*
 * 3. Rounding
 * //todo Setting to apply to shapes, buttons, fields.
 */
[data-bs-theme="light"],
:root {
	--bs-border-radius-sm: 0.8rem;  /* .rounded-1           - default .25rem */
	--bs-border-radius: 1rem;       /* .rounded, .rounded-2 - default .375rem */
	--bs-border-radius-lg: 1rem;    /* .rounded-3           - default .5rem */
	--bs-border-radius-xl: 1.5rem;  /* .rounded-4           - default 1rem */
	--bs-border-radius-xxl: 1.5rem; /* .rounded-5           - default 2rem */
	--bs-border-radius-pill: 2rem;  /* Max radius to avoid for larger elements becoming circular (textarea etc.) */
	--rounding-input: var( --bs-border-radius-sm );
	--rounding-button: var( --bs-border-radius-pill );
	--rounding-shape: var( --bs-border-radius-xl );
}

/*
 * 4. Navigation
 */
.navbar {
	--bs-navbar-active-color: var( --bs-primary );
	--bs-navbar-hover-color: var( --bs-primary );
	/* --bs-navbar-color: var( --bs-dark ); */
}
/* .nav-pills-light .nav-link.active, .nav-pills-light .nav-link:hover, .nav-pills-light .show > .nav-link {
	color: var( --bs-secondary );
} */
/* .nav-pills-border-start .nav-link.active,
.nav-pills-border-start .nav-link:hover,
.nav-pills-border-start .show > .nav-link {
	background-color: var( --bs-primary );
	.text-body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
		color: white !important;
	}
	.border {
		border-color: transparent !important;
	}
} */

/*
 * Forms
 */
/* .dropdown-menu {
	--bs-dropdown-header-color: var( --bs-heading-color );
	--bs-dropdown-link-color: var( --bs-dark );
	--bs-dropdown-link-hover-color: var( --bs-secondary );
	--bs-dropdown-link-active-color: var( --bs-primary );
	[data-bs-theme="dark"] & {
		--bs-dropdown-link-color: white;
		--bs-dropdown-link-hover-color: white;
		--bs-dropdown-link-active-color: white;
		--bs-dropdown-bg: var( --secondary-dark );
		--bs-dropdown-link-hover-bg: var( --bs-secondary );
		--bs-dropdown-link-active-bg: var( --bs-dark );
	}
} */

/*
 * Hide priegels
 */
.priegel {
	display: none;
}
.priegel-bg {
	background: none !important;
}