/*
 * The HashabERP brand on the login and password pages. Design doc 49 S10,
 * issue #180.
 *
 * This file loads before login.bundle.css, which sets Frappe's values on
 * :root (head.html 12 to 14, login.html 87 to 89, frappe 16.33.0). Custom
 * properties set on body win over :root by inheritance, and the website
 * bundle reads the font from --font-stack on html and body. The page has no
 * dark theme, so these are the light values of brand.css.
 */

@font-face {
	font-family: "IBM Plex Sans";
	src: url("/assets/hashaberp/fonts/IBM%20Plex%20Sans%20Var-Roman.woff2") format("woff2");
	font-weight: 100 700;
	font-display: swap;
}

/*
 * Arabic: IBM Plex Sans Arabic, two of IBM's static files, unmodified
 * (@ibm/plex-sans-arabic 1.1.0). The ranges send Frappe's 420 and 500 to
 * Regular and its 600 and 700 to SemiBold (doc 49 section 6). Every Arabic
 * code point the font maps lies inside the unicode-range, so a page with
 * no Arabic never downloads it. Licence: fonts/OFL-IBMPlexSansArabic.txt.
 * Issue #183: the face's line box is 1.5 em, taller than the desktop
 * caption's 115%, which desk.css lets show.
 */
@font-face {
	font-family: "IBM Plex Sans Arabic";
	src: url("/assets/hashaberp/fonts/IBMPlexSansArabic-Regular.woff2") format("woff2");
	font-weight: 400 500;
	font-display: swap;
	unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}

@font-face {
	font-family: "IBM Plex Sans Arabic";
	src: url("/assets/hashaberp/fonts/IBMPlexSansArabic-SemiBold.woff2") format("woff2");
	font-weight: 600 700;
	font-display: swap;
	unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}

body {
	--font-stack: "IBM Plex Sans", "IBM Plex Sans Arabic", system-ui, sans-serif;
	--primary: #9a3f1c; /* laterite 60 */
	--brand-color: #9a3f1c; /* laterite 60 */
	--btn-primary: #9a3f1c; /* laterite 60 */
	--primary-color: #2b1d14; /* bark 100 */
	--border-primary: #2b1d14; /* bark 100 */
	--text-color: #2b1d14; /* bark 100 */
	--text-muted: #67594a; /* bark 60 */
	--focus-default: 0 0 0 2px #9a3f1c; /* laterite 60 */
}

/*
 * The login button. The login bundle draws it from --gray-900 rather than
 * --btn-primary, with the selector `.for-login .page-card
 * .page-card-actions .btn-login` and its siblings (0,4,0). This selector is
 * (0,4,2), so it wins although it loads first. Frappe's `.btn.btn-primary`
 * buttons on the same pages take --btn-primary from body.
 */
html body .page-card .page-card-actions .btn.btn-login,
html body .page-card .page-card-actions .btn.btn-login:disabled {
	background: #9a3f1c; /* laterite 60 */
}

/*
 * Upstream gives :hover, :focus and :active of the login button one colour,
 * --gray-800 (login.bundle.scss 89 to 91, (0,5,0)); these are (0,5,2).
 */
html body .page-card .page-card-actions .btn.btn-login:hover,
html body .page-card .page-card-actions .btn.btn-login:focus,
html body .page-card .page-card-actions .btn.btn-primary:hover {
	background: #782a08; /* laterite 70 */
}

/*
 * The keyboard focus ring. The background change alone is 1.45:1 against
 * laterite 60, so a keyboard user also gets a white gap and a laterite ring.
 * Upstream sets box-shadow: none on :focus at (0,5,0); this is (0,5,2).
 */
html body .page-card .page-card-actions .btn.btn-login:focus-visible {
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px #9a3f1c; /* laterite 60 */
}

/*
 * :active needs !important, because the website bundle's `.btn:active`
 * sets the background to --control-bg and the text to --text-color with
 * !important, which today turns the pressed button pale grey. Measured in
 * Chromium and Firefox on 2026-10-21: rgb(243, 243, 243) without this rule.
 */
html body .page-card .page-card-actions .btn.btn-login:active {
	background-color: #782a08 !important; /* laterite 70 */
	color: #fff !important;
}