/* HANSA-FLEX theme for the Frappe website pages — login, sign-up, forgot
 * password, and anything else rendered by frappe/templates/web.html.
 *
 * These pages are Bootstrap-era markup driven by frappe's own CSS variables,
 * not the Espresso tokens the LMS SPA uses, so they need their own small file.
 * Wired through the `web_include_css` hook (corporate_lms/hooks.py).
 *
 * Keeps the palette identical to hf_theme.css: HF red actions, near-black ink.
 */

:root {
	--hf-red: #e2001a;
	--hf-red-hover: #c00016;
	--hf-red-active: #9d0012;
	--hf-red-ink: #b0000f;

	/* frappe paints primary buttons, focus rings, checkboxes and the brand
	   accent from these three. */
	--primary: var(--hf-red);
	--primary-color: var(--hf-red);
	--btn-primary: var(--hf-red);
	--brand-color: var(--hf-red);
	--text-on-primary: #ffffff;
}

.btn.btn-primary {
	background-color: var(--hf-red);
	border-color: var(--hf-red);
	color: #ffffff;
}

.btn.btn-primary:hover,
.btn.btn-primary:focus {
	background-color: var(--hf-red-hover);
	border-color: var(--hf-red-hover);
	color: #ffffff;
}

.btn.btn-primary:active,
.btn.btn-primary:not(:disabled):not(.disabled):active {
	background-color: var(--hf-red-active);
	border-color: var(--hf-red-active);
	color: #ffffff;
}

a,
.text-primary {
	color: var(--hf-red-ink);
}

a:hover {
	color: var(--hf-red-active);
}

.form-control:focus {
	border-color: var(--hf-red);
	box-shadow: 0 0 0 2px rgba(226, 0, 26, 0.2);
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline-color: var(--hf-red);
}

::selection {
	background-color: #f9ccd1;
	color: #0d0d0d;
}