/**
 * Identity-only extensions and utilities.
 * Design tokens: tokens.css + theme.css (from Web clientProfileFiles).
 */

:root {
	--body-color-dark: #30205b;
	--body-color-light: #ffffff;
	--navbar-image-light: url(/img/companies/roobit/roobit_light_img.svg);
	--navbar-image-dark: url(/img/companies/roobit/roobit-logo.svg);
	--forgetPassword-image: url(/img/companies/roobit/forgetPassword_background_img.png);
	--port-gore-dark: #30205b;
	--input-bg-dark: #24174980;
	--text-color-dark: #ffffff;
	--login-mobile-primary: var(--color-action);
	--mobile-primary-light: #66ff66;
	--mobile-primary-light-rgb: 102, 255, 102;
	--login-mobile-page-bg: #0f1233;
	--login-mobile-bg: var(--login-mobile-page-bg);
	--login-mobile-surface: rgba(15, 18, 51, 0.95);
	--login-mobile-border: var(--dark-blue-grey);
	--login-mobile-text-primary: #FFFFFF;
	--login-mobile-text-secondary: var(--textbox-text-color);
	--login-mobile-text-muted: var(--border-grey);
	--login-mobile-page-gradient: radial-gradient(ellipse 90% 60% at 100% 100%, rgba(var(--mobile-primary-light-rgb), 0.20) 0%, rgba(var(--mobile-primary-light-rgb), 0.11) 28%, rgba(var(--mobile-primary-light-rgb), 0.04) 48%, rgba(var(--mobile-primary-light-rgb), 0.01) 62%, transparent 78%);
	--login-form-control-bg: rgba(15, 18, 51, 0.90);
	--login-mobile-submit-text: #000000;
	--login-button-text: var(--login-mobile-submit-text);
	--login-mobile-primary-hover-bg: color-mix(in srgb, var(--mobile-primary-light) 8%, transparent);
	--login-mobile-checkbox-focus-ring: color-mix(in srgb, var(--mobile-primary-light) 25%, transparent);
	--otp-mobile-card-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
	--otp-mobile-subtle-bg: rgba(255, 255, 255, 0.04);
	--otp-mobile-subtle-border: rgba(255, 255, 255, 0.04);
	--otp-mobile-slot-filled-border: rgba(255, 255, 255, 0.18);
	--register-mobile-rules-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
	--otp-mobile-page-bg: var(--login-mobile-page-bg);
	--otp-mobile-page-gradient: var(--login-mobile-page-gradient);
	--otp-mobile-surface: rgba(18, 22, 56, 0.94);
	--otp-mobile-border: color-mix(in srgb, var(--mobile-primary-light) 14%, transparent);
	--otp-mobile-input-bg: rgba(15, 18, 51, 0.88);
	--otp-mobile-slot-bg: rgba(15, 18, 51, 0.92);
	--otp-mobile-text-primary: var(--login-mobile-text-primary);
	--otp-mobile-text-secondary: var(--login-mobile-text-secondary);
	--otp-mobile-text-muted: var(--login-mobile-text-muted);
	--otp-mobile-note-bg: rgba(36, 26, 73, 0.78);
	--otp-mobile-danger: var(--bright-red);
}

/* Identity runtime vars — loaded after theme.css; restores legacy Identity mappings */
.light-theme {
	--bg-body-image: var(--bg-body-image-light);
	--bg-header-image: var(--bg-header-image-light);
	--navbar-image: var(--navbar-image-light);
	--white: var(--white-light);
	--footer-bg: var(--footer-light);
	--dropdown-bg-color: var(--dropdown-bg-color-light);
	--dark-blue-grey: var(--dark-blue-grey-light);
	--blue-grey: var(--blue-grey-light);
	--purple-grey: var(--purple-grey-dark);
	--grey: var(--grey-light);
	--text-color: var(--text-color-light);
	--orderbook-text-color: var(--orderbook-text-color-light);
	--btn-small02-lite: var(--btn-small02-lite-light);
	--footer-item-text: var(--footer-item-text-light);
	--footer-icon: var(--footer-icon-light);
	--area-bgcolor: var(--area-bgcolor-light);
	--area-bgcolor-brightgreen: var(--area-bgcolor-light-2);
	--area-bgcolor-grey: var(--area-bgcolor-light-3);
	--navbar-item-bgcolor: var(--navbar-item-bg-light);
	--port-gore: var(--port-gore-light);
	--black: var(--black-light);
	--grid-text-color: var(--grid-text-color-light);
	--landingpage-header: var(--landingpage-header-light);
	--input-bg: var(--input-bg-light);
	--body-color: var(--body-color-light);
}

.dark-theme {
	--bg-body-image: var(--bg-body-image-dark);
	--bg-header-image: var(--bg-header-image-dark);
	--bg-header-second-image: var(--bg-header-second-image-dark);
	--btn-small02-lite: var(--btn-small02-lite-dark);
	--navbar-image: var(--navbar-image-dark);
	--footer-bg: var(--footer-dark);
	--dropdown-bg-color: var(--dropdown-bg-color-dark);
	--footer-item-text: var(--footer-item-text-dark);
	--footer-icon: var(--footer-icon-dark);
	--orderbook-text-color: var(--orderbook-text-color-dark);
	--white: var(--white-dark);
	--dark-blue-grey: var(--dark-blue-grey-dark);
	--blue-grey: var(--blue-grey-dark);
	--purple-grey: var(--purple-grey-light);
	--grey: var(--grey-dark);
	--text-color: var(--text-color-dark);
	--area-bgcolor: var(--area-bgcolor-dark);
	--area-bgcolor-brightgreen: var(--area-bgcolor-dark-2);
	--area-bgcolor-grey: var(--area-bgcolor-dark-3);
	--navbar-item-bgcolor: var(--navbar-item-bg-dark);
	--port-gore: var(--port-gore-dark);
	--black: var(--black-dark);
	--grid-text-color: var(--grid-text-color-dark);
	--landingpage-header: var(--landingpage-header-dark);
	--input-bg: var(--input-bg-dark);
	--body-color: var(--body-color-dark);
}

/*color code*/

.purple-grey {
	color: var(--dropdown-bg-color) !important;
}

.color-action {
	color: var(--color-action) !important;
}


.white {
	color: var(--white) !important;
}

.dark-blue-grey {
	color: var(--dark-blue-grey) !important;
}

.bright-red {
	color: var(--bright-red) !important;
}

.bright-yellow {
	color: var(--bright-yellow) !important;
}

.blue-grey {
	color: var(--blue-grey) !important;
}

.pure-blue-grey {
	color: #838296 !important;
}

.black {
	color: var(--black) !important;
}

.port-gore {
	color: var(--port-gore) !important;
}

/*background code*/
.bg-area-backcolor {
	background-color: var(--area-bgcolor-dark) !important;
}

.bg-color-action {
	background-color: var(--color-action) !important;
}

.bg-white {
	background-color: var(--white) !important;
}

.bg-dark-blue-grey {
	background-color: var(--dark-blue-grey) !important;
}

.bg-bright-red {
	background-color: var(--bright-red) !important;
}

.bg-blue-grey {
	background-color: var(--blue-grey) !important;
}

.bg-black {
	background-color: var(--black) !important;
}

.bg-port-gore {
	background-color: var(--port-gore) !important;
}

.cursor-pointer {
	cursor: pointer !important;
}

.opacity-04 {
	opacity: 0.4 !important;
}

.opacity-05 {
	opacity: 0.5 !important;
}

.light-theme .navbar-logo {
	background-image: var(--navbar-image-light);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.dark-theme .navbar-logo {
	background-image: var(--navbar-image-dark);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.navbar-logo {
	width: 300px;
	height: 60px;
}