:root {
	--learnabit-primary: #176b68;
	--learnabit-secondary: #d5b98b;
	--learnabit-background: #f7f5ef;
	--learnabit-text: #252827;
	--learnabit-login-background-image: none;
}

/* Frappe vaikeseade on 32px, mis muudab horisontaalse logo väga väikeseks. */
.page-card-head img.app-logo {
	width: auto !important;
	max-width: min(280px, 100%) !important;
	max-height: 72px !important;
	object-fit: contain;
	object-position: left center;
}

body.learnabit-auth-page {
	background-color: var(--learnabit-background) !important;
	background-image: var(--learnabit-login-background-image);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	color: var(--learnabit-text);
}

body.learnabit-auth-page .page-card {
	border-top: 4px solid var(--learnabit-primary);
}

body.learnabit-auth-page .page-card-head h4,
body.learnabit-auth-page .page-card-head .page-card-subtitle {
	color: var(--learnabit-text);
}

body.learnabit-auth-page .btn-primary {
	background-color: var(--learnabit-primary) !important;
	border-color: var(--learnabit-primary) !important;
	color: #ffffff !important;
}

body.learnabit-auth-page .btn-primary:hover,
body.learnabit-auth-page .btn-primary:focus {
	filter: brightness(0.9);
}

body.learnabit-auth-page a:not(.btn) {
	color: var(--learnabit-primary);
}

body.learnabit-auth-page .page-card {
	background-color: color-mix(
		in srgb,
		var(--learnabit-background) 92%,
		white
	);
}

/* LMS application branding */
html:not([data-theme="dark"]) body.learnabit-lms-page {
        --surface-base: var(--learnabit-background);
        --surface-sidebar: color-mix(
                in srgb,
                var(--learnabit-background) 90%,
                var(--learnabit-primary)
        );
        --ink-blue-link: var(--learnabit-primary);
        background-color: var(--learnabit-background) !important;
        color: var(--learnabit-text);
        accent-color: var(--learnabit-primary);
}

html:not([data-theme="dark"]) body.learnabit-lms-page #app {
        background-color: var(--learnabit-background);
        color: var(--learnabit-text);
}

body.learnabit-lms-page button.bg-surface-gray-7,
body.learnabit-lms-page a.bg-surface-gray-7,
body.learnabit-lms-page [role="button"].bg-surface-gray-7 {
        background-color: var(--learnabit-primary) !important;
        color: #ffffff !important;
}

body.learnabit-lms-page button.bg-surface-gray-7:hover,
body.learnabit-lms-page a.bg-surface-gray-7:hover,
body.learnabit-lms-page [role="button"].bg-surface-gray-7:hover {
        background-color: color-mix(
                in srgb,
                var(--learnabit-primary) 90%,
                black
        ) !important;
}

body.learnabit-lms-page .text-ink-blue-link {
        color: var(--learnabit-primary) !important;
}

body.learnabit-lms-page ::selection {
        background-color: var(--learnabit-secondary);
        color: var(--learnabit-text);
}

/* LMS primary button */
body.learnabit-lms-page button.bg-surface-gray-10 {
        background-color: var(--learnabit-primary) !important;
        color: #ffffff !important;
}

body.learnabit-lms-page button.bg-surface-gray-10 * {
        color: inherit !important;
}

body.learnabit-lms-page button.bg-surface-gray-10:hover {
        background-color: color-mix(
                in srgb,
                var(--learnabit-primary) 88%,
                black
        ) !important;
        color: #ffffff !important;
}

body.learnabit-lms-page button.bg-surface-gray-10:active {
        background-color: color-mix(
                in srgb,
                var(--learnabit-primary) 78%,
                black
        ) !important;
        color: #ffffff !important;
}

/* LMS onboarding panel branding */
html:not([data-theme="dark"])
body.learnabit-lms-page
[data-testid="onboarding-help-modal"] {
        background-color: color-mix(
                in srgb,
                var(--learnabit-background) 28%,
                white
        ) !important;
        border: 1px solid color-mix(
                in srgb,
                var(--learnabit-primary) 28%,
                transparent
        );
        border-top: 4px solid var(--learnabit-primary);
        box-shadow: 0 18px 48px color-mix(
                in srgb,
                var(--learnabit-primary) 16%,
                transparent
        ) !important;
}

/* Getting started heading */
html:not([data-theme="dark"])
body.learnabit-lms-page
[data-testid="onboarding-help-modal"] > div:first-child > div:first-child {
        color: var(--learnabit-primary) !important;
        font-weight: 600;
}

/* Welcome heading */
html:not([data-theme="dark"])
body.learnabit-lms-page
[data-testid="onboarding-help-modal"]
> div:nth-child(2)
> div:first-child
> div:nth-child(2) {
        color: var(--learnabit-primary) !important;
        font-weight: 600;
}

/* Recolour the green Frappe Learning icon */
html:not([data-theme="dark"])
body.learnabit-lms-page
[data-testid="onboarding-help-modal"]
> div:nth-child(2)
> div:first-child
> svg:first-child
> path:first-child {
        fill: var(--learnabit-primary) !important;
}

/* Completion badge */
html:not([data-theme="dark"])
body.learnabit-lms-page
[data-testid="onboarding-help-modal"]
> div:nth-child(2)
> div:nth-child(2)
> div:first-child
> div:first-child {
        background-color: color-mix(
                in srgb,
                var(--learnabit-secondary) 18%,
                white
        ) !important;
        color: color-mix(
                in srgb,
                var(--learnabit-secondary) 68%,
                black
        ) !important;
}

/* Onboarding rows and Help centre hover */
html:not([data-theme="dark"])
body.learnabit-lms-page
[data-testid="onboarding-help-modal"]
div[class*="hover:bg-surface-gray-1"]:hover {
        background-color: color-mix(
                in srgb,
                var(--learnabit-primary) 10%,
                white
        ) !important;
}

/* Header, Skip and close button hover */
html:not([data-theme="dark"])
body.learnabit-lms-page
[data-testid="onboarding-help-modal"] button:hover {
        background-color: color-mix(
                in srgb,
                var(--learnabit-primary) 12%,
                white
        ) !important;
}

/* Onboarding organization logo */
body.learnabit-lms-page
[data-testid="onboarding-help-modal"]
.learnabit-onboarding-logo {
        width: auto !important;
        height: 48px !important;
        max-width: 190px !important;
        object-fit: contain;
        border-radius: 0 !important;
}