/* Central repository of colors used throughout the template to define the theme.
   Bootstrap 4 theme colors: primary/secondary are brand; success/info/warning/danger are semantic. */
:root {
	--app-normal-grey: #404040;
	--app-vlight-grey: #f5f5f5;
	--app-light-grey: #e7e7e7;
	--app-midlt-grey: #C0C0C0;
	--app-middle-grey: #808080;
	--app-dark-grey: #0A0A0A;
	--app-dark-lt: rgba(10, 10, 10, .25);
	--app-absolute-black: #000000;
	--app-absolute-white: #FFFFFF;

	/* Application typeface (loaded from Google Fonts in the layouts) */
	--app-font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

	/* Brand — primary is gold, secondary is deep brown */
	--app-primary: #ffcc2f;
	--app-primary-dark: #e6b31a;
	--app-primary-light: #ffe89a;
	/* Gold is too light for text on white: use the deep tone for type and icons */
	--app-primary-deep: #8a6400;
	--app-secondary: #3f65a3;

	/* Semantic — chosen to stay legible next to gold + brown */
	--app-success: #2f9e44;
	--app-info: #0f8b9e;
	--app-warning: #e8590c;
	--app-error: #c92a2a;
	--app-error-lt: rgba(201, 42, 42, .25);
	--app-in1fo: #7ee0ed;
	--app-hilite: rgba(255, 204, 47, .4);

	/* Bootstrap 4 aliases so stock utilities can follow the same palette */
	--primary: var(--app-primary);
	--secondary: var(--app-secondary);
	--success: var(--app-success);
	--info: var(--app-info);
	--warning: var(--app-warning);
	--danger: var(--app-error);
	--light: #f8f9fa;
	--dark: #343a40;

	/* UI shell — surfaces, ink, elevation and radii (consumed by corinto-theme.css) */
	--app-canvas: #f7f5f1;
	--app-surface: #ffffff;
	--app-surface-alt: #fdfbf6;
	--app-border: #e6dfd5;
	--app-border-strong: #cec3b4;
	--app-ink: #201a16;
	--app-ink-soft: #57493f;
	--app-ink-faint: #7d6e63;

	--app-primary-050: #fffbeb;
	--app-primary-100: #fff1c2;
	--app-primary-soft: rgba(255, 204, 47, .14);
	--app-primary-ring: rgba(255, 204, 47, .4);

	/* Sidebar skin. Swap these five together when changing the sidebar surface:
	   a dark surface wants white ink, a light one (gold) wants dark ink. */
	--app-sidebar: linear-gradient(165deg, #ffdd78 0%, #ffcc2f 48%, #e3ae05 100%);
	--app-sidebar-ink: #201a16;
	--app-sidebar-ink-soft: rgba(32, 26, 22, .66);
	--app-sidebar-hover: rgba(32, 26, 22, .1);
	--app-sidebar-active: rgba(32, 26, 22, .17);
	--app-sidebar-rule: rgba(32, 26, 22, .16);

	--app-radius-sm: .5rem;
	--app-radius: .75rem;
	--app-radius-lg: 1.1rem;

	--app-shadow-xs: 0 1px 2px rgba(32, 26, 22, .06);
	--app-shadow-sm: 0 2px 6px rgba(32, 26, 22, .06), 0 1px 2px rgba(32, 26, 22, .04);
	--app-shadow: 0 8px 22px rgba(32, 26, 22, .09), 0 1px 3px rgba(32, 26, 22, .05);
	--app-shadow-lg: 0 20px 44px rgba(32, 26, 22, .16);

	/* WTA COLORS */
	--wta-gold: #FFB900;
	--wta-silver: #A3A3A3;
	--wta-bronze: #AA5407;
	--wta-white: #e0e0e0;
	--wta-grandslam: rgba(61, 124, 199, 1);
	--wta-premiermandatory: rgba(66, 38, 108, 1);
	--wta-premier5: rgba(108, 76, 163, 1);
	--wta-premier: rgba(113, 61, 193, .4);
	--wta-international: rgba(190, 213, 0, 1);
	--wta-125K: rgba(208, 220, 124, 1);
	/* SURFACE COLORS */
	--surface-clay: rgba(166, 92, 46, 1);
	--surface-hard: rgba(120, 139, 233, 1);
	--surface-grass: #18b34d;
}

/* Status banner used by every page that reports the outcome of an action.
   Tone comes from the text-success / text-danger / text-warning class that
   $.fn.statusMessage (or page code) puts on the element. */
.app-status:empty {
	display: none !important;
}

.app-status {
	position: relative;
	display: block;
	margin: 1rem 0;
	padding: .65rem .95rem .65rem 2.45rem;
	border: 1px solid rgba(63, 101, 163, .28);
	border-left: 4px solid var(--app-secondary);
	border-radius: var(--app-radius-sm);
	background: #eef3fa;
	color: #22406f !important;
	font-size: .9rem;
	font-weight: 600;
	line-height: 1.4;
	text-align: left;
	box-shadow: var(--app-shadow-xs);
}

.app-status::before {
	position: absolute;
	top: .66rem;
	left: .85rem;
	font-family: 'Font Awesome 5 Pro';
	font-weight: 400;
	font-size: 1rem;
	line-height: 1.35;
	content: "\f05a";
}

.app-status.app-status-error,
.app-status.text-danger {
	border-color: rgba(201, 42, 42, .28);
	border-left-color: var(--app-error);
	background: #fcefef;
	color: #8f1d1d !important;
}

.app-status.app-status-error::before,
.app-status.text-danger::before {
	content: "\f06a";
}

.app-status.text-warning {
	border-color: rgba(232, 89, 12, .28);
	border-left-color: var(--app-warning);
	background: #fdf3ea;
	color: #8a3a08 !important;
}

.app-status.text-warning::before {
	content: "\f071";
}

.app-status.text-success {
	border-color: rgba(47, 158, 68, .28);
	border-left-color: var(--app-success);
	background: #edf7ef;
	color: #1d5e2a !important;
}

.app-status.text-success::before {
	content: "\f058";
}