/*
|--------------------------------------------------------------------------
| Theme variables (LIGHT MODE)
|--------------------------------------------------------------------------
*/

:root {
	/* Font size scale */
	--font-xss: 9px;
	--font-xs: 10px;
	--font-sm: 11px;
	--font-md: 13px;
	--font-lg: 15px;
	--font-xl: 18px;
	--font-2xl: 20px;

	/* Body */
	--axl-bg-hover: #f1f1f2;
	--axl-body-bg: #f7f6f7;
	--axl-body-color: #4C4C5C;
	--axl-secondary-bg: #FFFFFF;
	--axl-tertiary-bg: #f6f7fb;

	/* Brand */
	--color-primary: #009ca6;
	--color-primary-dark: #008891;
	--color-primary-light: #23c6c8;

	/* Status */
	--axl-color-success: #34c38f;
	--axl-color-success-light: #cee8a5;
	--axl-color-warning: #f1b44c;
	--axl-color-warning-dark: #e5953d;
	--axl-color-danger: #f46a6a;
	--axl-color-danger-alt: #ed5565;
	--axl-color-info: #50a5f1;

	/* Text */
	--axl-color-text-main: #495057;
	--axl-color-text-muted: #74788d;
	--axl-color-text-inverse: #ffffff;

	/* Borders */
	--axl-border-default: #e7eaec;
	--axl-border-muted: #ced4da;
	--axl-border-color: #e7e9eb;
	--axl-dark-border-subtle: #a1a9b1;
	--axl-border-radius: .3rem;
	--axl-border-width: 1px;

	/* Card */
	--axl-card-bg: #ffffff;
	--axl-card-border-color: transparent;
	--axl-card-box-shadow: 0 1px 2px rgba(57, 62, 80, .15);
	--axl-card-border-radius: var(--axl-border-radius);
	--axl-card-inner-border-radius: calc(var(--axl-border-radius) - (var(--axl-border-width)));
	--axl-card-cap-padding-y: .9375rem;
	--axl-card-cap-padding-x: 1.25rem;

	/* Sidenav */
	--axl-sidenav-bg: linear-gradient(135deg, #24485e, #1a455f);
	--axl-sidenav-item-color: #799cb7;
	--axl-sidenav-item-hover-color: #bccee4;
	--axl-sidenar-special-bg: #296580;

	/* Top bar */
	--axl-topbar-bg: #FFFFFF;
	--axl-topbar-subnav: #FBFBFD;
	--axl-topbar-item-hover-color: #00BFCD;
	--axl-topbar-search-bg: transparent;
	--axl-topbar-search-border: #e7e9eb;
	--axl-topbar-item-color: #e7e9eb;
}

/*
|--------------------------------------------------------------------------
| Theme variables (DARK MODE)
|--------------------------------------------------------------------------
*/

body.dark-mode-on {
	/* Body */
	--axl-bg-hover: #36363a;
	--axl-body-bg: #17181e;
	--axl-body-color: #AAB8C5;
	--axl-secondary-bg: #1b1c22;
	--axl-tertiary-bg: #272832;

	/* Color */
	--color-primary: #03bed1;
	--color-primary-dark: #028791;
	--color-primary-light: #4dd0e1;

	/* Status */
	--axl-color-success: #388E3C;
	--axl-color-success-light: #cee8a5;
	--axl-color-warning: #c1611f;
	--axl-color-warning-dark: #e5953d;
	--axl-color-danger: #ed5565;
		--axl-color-danger-alt: #ed5565;
		--axl-color-info: #50a5f1;

	/* Text */
	--axl-color-text-main: #FFFFFF;
	--axl-color-text-muted: #a3a5b9;
	--axl-color-text-inverse: #FFFFFF;

	/* Borders */
	--axl-border-default: #4e4e53;
	--axl-border-muted: #3b3b40;
	--axl-border-color: #293036;
	--axl-dark-border-subtle: #6c757d;

	/* Card */
	--axl-card-bg: #1b1c22;
	--axl-card-border-color: #293036;
	--axl-card-box-shadow: #293036;

	/* Sidenav */
	--axl-sidenav-bg: linear-gradient(135deg, #24485e, #1a455f);
	--axl-sidenav-item-color: #799cb7;
	--axl-sidenav-item-hover-color: #cfdff1;
	--axl-sidenar-special-bg: #296580;

	/* Top bar */
	--axl-topbar-bg: #252630;
	--axl-topbar-subnav: #22232c;
	--axl-topbar-item-hover-color: #00BFCD;
	--axl-topbar-search-bg: #2d2e3c;
	--axl-topbar-item-color: #adb5bf;
}
