/* ==================================================
* This is the topmost EP developed stylesheet.
* --------------------------------------------------
* Custom CSS properties for the Kite Design Palette
* Included as a seperate stylesheet so it can be included as needed
* for example for pages that use css/custom.css or css/spring-themes/2023/custom.css
* --------------------------------------------------
* This file in .../webapp/css should be kept in sync with the file
* in .../webapp/css/spring-themes/2023.  Currently, non login pages
* are not within the spring theme feature which is why they are separate.
*/
:root {

	/* Text/Link Only Palette */
	--kite-link: #235ecd;
	--kite-link-hover: #1b599f;
	--kite-link-inactive: #6697d0;
	--kite-txt-primary-dark: #212529;
	--kite-txt-primary-light: #ffffff;

	/* Backgrounds */
	--kite-bg-white: #ffffff;
	--kite-bg-light: #f8f9fa;
	--kite-bg-light-blue: #e0eeff;
	--kite-bg-dark: #dee2e6;

	/* Primary Palette */
	--kite-blue: #1560b7;
	--kite-blue-dark: #0c4587;
	--kite-blue-light: #d1dff3;

	--kite-blue-sec: #2476d4;

	--kite-red: #920000;
	--kite-red-dark: #6b0000;
	--kite-red-light: #f7e8e5;

	--kite-green: #227207;
	--kite-green-dark: #114402;
	--kite-green-light: #e9f1e7;

	--kite-yellow: #ffcf03;
	--kite-yellow-dark: #bc8c17;
	--kite-yellow-light: #f9e79f;

	--kite-cyan: #86c5f4;
	--kite-cyan-light: #e7f4fd;

	--kite-indigo: #014575;
	--kite-indigo-dark: #013155;
	--kite-indigo-light: #e5ebf1;

	/* Secondary Palette */
	--kite-pink: #b3577a;
	--kite-teal: #00877d;
	--kite-gray: #535353;
	--kite-purple: #613d7c;
	--kite-orange: #f27a1a;
	--kite-pale-green: #b2dab7;

	/* Neutral Palette */
	--kite-gray-100: #f8f9fa;
	--kite-gray-200: #e9ecef;
	--kite-gray-300: #dee2e6;
	--kite-gray-400: #ced4da;
	--kite-gray-500: #adb5bd;
	--kite-gray-600: #868e96;
	--kite-gray-700: #495057;
	--kite-gray-800: #373a3c;
	--kite-gray-900: #212529;

	/* Focus Palette */
	--kite-focus: #ffff00;
	/* outer blue is --kite-blue */

}

.kite-info-background {
	background-color: var(--kite-blue);
}

.kite-success-background {
	background-color: var(--kite-green);
}

.kite-error-background {
	background-color: var(--kite-red);
}

.kite-gray500-background {
	background-color: var(--kite-gray-500);
}

.kite-purple-color {
	color: var(--kite-purple);
}

.kite-purple-border {
	border-color: var(--kite-purple);
}

.kite-purple-background {
	background-color: color-mix(in oklab, var(--kite-purple) 10%, white);
}

.kite-pink-color {
	color: var(--kite-pink);
}

.kite-pink-border {
	border-color: var(--kite-pink);
}

.kite-pink-background {
	background-color: color-mix(in oklab, var(--kite-pink) 10%, white);
}

.kite-orange-color {
	color: var(--kite-orange);
}

.kite-orange-border {
	/* gray is not a mistake... orange does not meet accessibility contrast ratio */
	border-color: var(--kite-gray-600);
}

.kite-orange-background {
	background-color: color-mix(in oklab, var(--kite-orange) 10%, white);
}

.kite-teal-color {
	color: var(--kite-teal);
}

.kite-teal-border {
	border-color: var(--kite-teal);
}

.kite-teal-background {
	background-color: color-mix(in oklab, var(--kite-teal) 10%, white);
}

.kite-blue-sec-color {
	color: var(--kite-blue-sec);
}

.kite-blue-sec-border {
	border-color: var(--kite-blue-sec);
}

.kite-blue-sec-background {
	background-color: color-mix(in oklab, var(--kite-blue-sec) 10%, white);}

.kite-gray-100-color {
	color: var(--kite-gray-100);
}

.kite-gray-100-border {
	border-color: var(--kite-gray-800);
}

.kite-gray-100-background {
	background-color: var(--kite-gray-100);
}

.kite-gray-200-color {
	color: var(--kite-gray-200);
}

.kite-gray-200-border {
	border-color: var(--kite-gray-800);
}

.kite-gray-200-background {
	background-color: var(--kite-gray-200);
}

.kite-gray-color {
	color: var(--kite-gray-800);
}

.kite-gray-border {
	border-color: var(--kite-gray-800);
}

.kite-gray-background {
	background-color: color-mix(in oklab, var(--kite-gray-800) 10%, white);
}

.kite-txt-primary {
	color: var(--kite-gray-900);
}

.kite-txt-primary-light {
	color: var(--kite-txt-primary-light); /*$white*/
}

.kite-txt-success {
	color: var(--kite-green); /*$green: #227207*/
}

.kite-txt-error {
	color: var(--kite-red); 
}

.kite-txt-blue {
	color: var(--kite-blue);
}

.kite-txt-blue-secondary {
	color: var(--kite-indigo); 
}

/* ===== Remaining kite colors (used for icons) ===== */

.kite-icon-blue-dark {
	color:var(--kite-blue-dark);
}

.kite-icon-indigo-dark {
	color: var(--kite-indigo-dark);
}

.kite-icon-green-dark {
	color: var(--kite-green-dark);
}

.kite-icon-yellow-dark {
	color: var(--kite-yellow-dark);
}

.kite-icon-red-dark {
	color: var(--kite-red-dark);
}

/* ===== end : Kite Design Palette ===== */

input[placeholder], [placeholder], *[placeholder] {
	color: #999;
    font-size:.8em;
}
::-webkit-input-placeholder { /* WebKit browsers */
    color:    #999;
    font-size:.8em;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #999;
    font-size:.8em;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #999;
    font-size:.8em;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #999;
    font-size:.8em;
}