/* Per-site learner palette. Loaded after the core and learning styles. */
.legend-lms {
	--legend-primary: var(--legend-brand-primary, #3157d5);
	--legend-primary-dark: var(--legend-brand-primary-dark, #2444b4);
	--legend-primary-bright: color-mix(in srgb, var(--legend-primary) 72%, #fff);
	--legend-primary-soft: color-mix(in srgb, var(--legend-primary) 9%, #fff);
	--legend-primary-tint: color-mix(in srgb, var(--legend-primary) 18%, #fff);
	--legend-primary-rgb: var(--legend-brand-primary-rgb, 49, 87, 213);
	--legend-secondary: var(--legend-brand-secondary, #18213d);
	--legend-secondary-mid: color-mix(in srgb, var(--legend-secondary) 62%, var(--legend-primary));
	--legend-accent: var(--legend-brand-accent, #f59e0b);
	--legend-accent-soft: color-mix(in srgb, var(--legend-accent) 18%, #fff);
	--legend-on-primary: var(--legend-brand-on-primary, #fff);
	--legend-on-accent: var(--legend-brand-on-accent, #111827);
}

.legend-button,
.legend-checkout-section__title > span {
	background: var(--legend-primary);
	color: var(--legend-on-primary) !important;
}

.legend-button {
	box-shadow: 0 8px 18px color-mix(in srgb, var(--legend-primary) 18%, transparent);
}

.legend-button:hover {
	background: var(--legend-primary-dark);
	box-shadow: 0 12px 25px color-mix(in srgb, var(--legend-primary) 24%, transparent);
}

.legend-button--secondary,
.legend-account-nav nav a:hover,
.legend-account-nav nav a.is-active,
.legend-account-receipt > header,
.legend-dashboard-hero .legend-stat-grid > div > span,
.legend-empty__icon,
.legend-gateway-icon,
.legend-lesson-sidebar li.is-current a,
.legend-login-prompt > span,
.legend-notes > div > span,
.legend-stat-grid > div > span {
	background: var(--legend-primary-soft);
}

.legend-card__image,
.legend-widget__media {
	background: linear-gradient(135deg, var(--legend-primary-soft), var(--legend-primary-tint));
}

.legend-card__placeholder {
	background: linear-gradient(145deg, var(--legend-primary), var(--legend-primary-dark));
	color: var(--legend-on-primary);
}

.legend-progress span,
.legend-quiz-progress > span {
	background: linear-gradient(90deg, var(--legend-primary), var(--legend-primary-bright));
}

.legend-catalog-hero,
.legend-dashboard-hero {
	background:
		radial-gradient(circle at 86% 10%, color-mix(in srgb, var(--legend-primary) 34%, transparent), transparent 34%),
		linear-gradient(130deg, var(--legend-secondary) 0%, color-mix(in srgb, var(--legend-secondary) 62%, var(--legend-primary)) 64%, var(--legend-primary-dark) 100%);
	box-shadow: 0 24px 60px color-mix(in srgb, var(--legend-primary) 16%, transparent);
}

.legend-course-hero {
	background:
		radial-gradient(circle at 80% 20%, color-mix(in srgb, var(--legend-primary) 27%, transparent), transparent 33%),
		linear-gradient(125deg, var(--legend-secondary), color-mix(in srgb, var(--legend-secondary) 62%, var(--legend-primary)) 70%, var(--legend-primary-dark));
}

.legend-auth-hero {
	background:
		radial-gradient(circle at 82% 10%, color-mix(in srgb, var(--legend-primary) 30%, transparent), transparent 33%),
		linear-gradient(125deg, var(--legend-secondary), var(--legend-primary-dark));
	box-shadow: 0 22px 55px color-mix(in srgb, var(--legend-primary) 16%, transparent);
}

.legend-auth-hero .legend-eyebrow,
.legend-catalog-hero .legend-eyebrow,
.legend-dashboard-hero .legend-eyebrow {
	color: var(--legend-accent);
}

.legend-auth-hero > p,
.legend-catalog-hero p,
.legend-catalog-hero__stat span,
.legend-dashboard-hero p {
	color: rgba(255, 255, 255, .82);
}

.legend-course-badge {
	background: var(--legend-accent);
	color: var(--legend-on-accent);
}

.legend-lms input:focus,
.legend-lms select:focus,
.legend-lms textarea:focus {
	border-color: var(--legend-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--legend-primary) 12%, transparent);
}

.legend-checkout-brand > span,
.legend-checkout-title__mark,
.legend-auth-mark,
.legend-login-prompt > span {
	background: linear-gradient(145deg, var(--legend-primary), var(--legend-primary-dark));
	box-shadow: 0 10px 24px color-mix(in srgb, var(--legend-primary) 24%, transparent);
	color: var(--legend-on-primary);
}

.legend-checkout-login-callout {
	border-color: var(--legend-primary-tint);
	background: var(--legend-primary-soft);
}

.legend-checkout-section--first {
	border-color: var(--legend-primary-tint);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--legend-primary) 6%, transparent), 0 12px 32px rgba(24, 36, 68, .07);
}

.legend-gateways label:has(input:checked) {
	border-color: var(--legend-primary);
	background: var(--legend-primary-soft);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--legend-primary) 8%, transparent);
}

.legend-gateways label:has(input:checked) > b {
	border-color: var(--legend-primary);
}

.legend-coupon button,
.legend-password-field button {
	background: var(--legend-primary-soft);
	color: var(--legend-primary);
}

.legend-lesson-outcome {
	border-left-color: var(--legend-primary);
	background: var(--legend-primary-soft);
}

.legend-assessment fieldset label:hover,
.legend-assessment fieldset label:has(input:checked) {
	background: var(--legend-primary-soft);
}

.legend-assessment fieldset label:has(input:checked) {
	border-color: var(--legend-primary-tint);
}

.legend-assessment input[type="radio"],
.legend-assessment input[type="checkbox"] {
	accent-color: var(--legend-primary);
}

.legend-quiz {
	background: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--legend-primary) 10%, transparent), transparent 38%), #fff;
}

.legend-quiz-results__score {
	background: conic-gradient(var(--legend-primary) calc(var(--legend-quiz-score, 0) * 1%), var(--legend-primary-soft) 0);
}

.legend-note-editor:focus,
.legend-assessment input[type="radio"]:focus-visible,
.legend-assessment input[type="checkbox"]:focus-visible {
	outline-color: color-mix(in srgb, var(--legend-primary) 52%, transparent);
}

.legend-community,
.legend-instructor-app {
	--p: var(--legend-brand-primary, #3157d5);
	--s: var(--legend-brand-secondary, #18213d);
}

@media (forced-colors: active) {
	.legend-button,
	.legend-course-badge,
	.legend-checkout-section__title > span {
		border: 1px solid ButtonText;
	}
}