/*
 * MDA brand layer. Loaded after Frappe's own CSS via app_include_css (desk)
 * and web_include_css (login + website). It only overrides the Espresso design
 * tokens (frappe/public/css/espresso/legacy.css:58,118,131) and fonts; it
 * never edits a core file. Palette from mda.org.za and its logo:
 *   maroon #8d1824 (primary), brown #946f52, blue #007DAA (links),
 *   sage #c7d3bf, green #489038 (sampled from the logo hill).
 * Fonts: Montserrat (headings), Roboto (body), self-hosted, SIL OFL 1.1.
 */

@font-face { font-family: "Montserrat"; font-weight: 500; font-style: normal; font-display: swap; src: url("/assets/mda_pitch/fonts/montserrat-500.ttf") format("truetype"); }
@font-face { font-family: "Montserrat"; font-weight: 600; font-style: normal; font-display: swap; src: url("/assets/mda_pitch/fonts/montserrat-600.ttf") format("truetype"); }
@font-face { font-family: "Montserrat"; font-weight: 700; font-style: normal; font-display: swap; src: url("/assets/mda_pitch/fonts/montserrat-700.ttf") format("truetype"); }
@font-face { font-family: "Roboto"; font-weight: 400; font-style: normal; font-display: swap; src: url("/assets/mda_pitch/fonts/roboto-400.ttf") format("truetype"); }
@font-face { font-family: "Roboto"; font-weight: 500; font-style: normal; font-display: swap; src: url("/assets/mda_pitch/fonts/roboto-500.ttf") format("truetype"); }
@font-face { font-family: "Roboto"; font-weight: 700; font-style: normal; font-display: swap; src: url("/assets/mda_pitch/fonts/roboto-700.ttf") format("truetype"); }

:root,
html[data-theme="light"],
html[data-theme="dark"] {
	--mda-maroon: #8d1824;
	--mda-maroon-hover: #741320;
	--mda-brown: #946f52;
	--mda-blue: #007daa;
	--mda-sage: #c7d3bf;
	--mda-green: #489038;
	--font-stack: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
	--heading-font-family: "Montserrat", "Roboto", system-ui, sans-serif;
	--font-family-sans: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------- light ---------- */
html[data-theme="light"],
html:not([data-theme="dark"]) {
	--primary: var(--mda-maroon);
	--brand-color: var(--mda-maroon);
	--primary-color: var(--mda-maroon);
	--btn-primary: var(--mda-maroon);
	--progress-bar-bg: var(--mda-maroon);
	--border-primary: var(--mda-maroon);
	--checkbox-color: var(--mda-maroon);
	--link-color: var(--mda-blue);
	--navbar-bg: #ffffff;
	--sage: var(--mda-sage);
}

/* ---------- dark: a lighter maroon so contrast on dark surfaces stays >= 4.5:1 ---------- */
html[data-theme="dark"] {
	--primary: #d4535f;
	--brand-color: #d4535f;
	--primary-color: #d4535f;
	--btn-primary: #b02a37;
	--progress-bar-bg: #d4535f;
	--border-primary: #d4535f;
	--checkbox-color: #d4535f;
	--link-color: #4fb3d9;
}

body,
.form-control,
.btn,
input,
select,
textarea {
	font-family: var(--font-stack);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.page-title .title-text,
.sidebar-header .header-subtitle,
.widget-title,
.section-head,
.login-content .page-card-head h4,
.page-card .page-card-head h4,
.navbar-brand,
.web-footer h5 {
	font-family: var(--heading-font-family);
	letter-spacing: 0;
}

/* Espresso buttons (.es-button, solid variant, default gray theme) read local
 * --bt-solid-* vars (frappe/public/css/espresso/components/button.css:34-37);
 * themed variants such as [data-theme="red"] keep their own colours. */
.es-button {
	--bt-solid-bg: var(--mda-maroon);
	--bt-solid-bg-hover: var(--mda-maroon-hover);
	--bt-solid-bg-active: #5e0f19;
	--bt-solid-fg: #ffffff;
}
html[data-theme="dark"] .es-button {
	--bt-solid-bg: #b02a37;
	--bt-solid-bg-hover: #c23744;
	--bt-solid-bg-active: #8d1824;
}

/* primary buttons: maroon fill, white label, darker on hover (light + dark) */
.btn-primary,
.btn.btn-primary,
.btn-primary-light {
	background-color: var(--btn-primary);
	border-color: var(--btn-primary);
	color: #ffffff;
}
.btn-primary:hover:not(:disabled),
.btn.btn-primary:hover:not(:disabled) {
	background-color: var(--mda-maroon-hover);
	border-color: var(--mda-maroon-hover);
	color: #ffffff;
}
html[data-theme="dark"] .btn-primary:hover:not(:disabled) {
	background-color: #c23744;
	border-color: #c23744;
}

/* links in content areas (Frappe leaves them text-coloured) */
.ql-editor a,
.comment-content a,
.web-page-content a:not(.btn),
.page-content-wrapper a:not(.btn):not(.nav-link),
.form-link a,
.control-value a,
.frappe-control .link-btn a {
	color: var(--link-color);
}

/* brand accents: login card, active tab, focus ring */
.page-card { border-top: 4px solid var(--mda-maroon); }
.form-control:focus,
.form-control:focus-visible {
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--mda-maroon) 25%, transparent);
	border-color: var(--mda-maroon);
}
.nav-link.active,
.form-tabs .nav-link.active { border-bottom-color: var(--mda-maroon); }

/* website footer + top bar */
.web-footer { background-color: color-mix(in srgb, var(--mda-sage) 35%, white); }
html[data-theme="dark"] .web-footer { background-color: var(--subtle-fg, #1c1c1c); }

/* navbar logo should not be cropped to a square; the login card gets a larger one */
.navbar-brand img,
.app-logo { max-height: 32px; width: auto; }
.login-content .page-card-head img.app-logo { max-height: 64px; height: auto; width: auto; }
.footer-logo-extension img { max-height: 40px; width: auto; }