/* xTrac ERP website + login page. Light palette from DESIGN.md: warm ivory
   page, panel-coloured cards, clay accent.

   Frappe loads its login bundle AFTER this file and re-declares the same
   tokens on :root, so the selectors here are one step more specific
   (html:root, html .es-button) instead of relying on load order. */

html:root {
	--surface-base: #fdfbf3;      /* --panel */
	--surface-gray-1: #faf6ee;    /* --bg */
	--surface-gray-2: #f0e8d4;    /* --panel-hover */
	--outline-gray-1: #dfd2b8;    /* --border */
	--outline-gray-2: #c8b890;    /* --border-strong */
	--ink-gray-9: #1c1b18;        /* --text-strong */
	--ink-gray-8: #3a352e;        /* --text */
	--ink-gray-6: #6b6555;        /* --text-mute */
	--bg-color: #faf6ee;          /* --bg: page background */
	--primary: #c45d3f;           /* --accent */
	--primary-color: #c45d3f;
	--btn-primary: #c45d3f;
}

/* Primary buttons (Espresso solid buttons and legacy Bootstrap ones) take the
   clay accent; coloured variants such as red "danger" buttons keep theirs. */
html .es-button:not([data-theme]) {
	--bt-solid-bg: #c45d3f;        /* --accent */
	--bt-solid-bg-hover: #d97757;  /* --accent-hover */
	--bt-solid-bg-active: #c45d3f;
	--bt-solid-fg: #ffffff;        /* --accent-fg */
}

html .btn-primary,
html .btn-primary:hover,
html .btn-primary:focus {
	background-color: #c45d3f;
	border-color: #c45d3f;
	color: #ffffff;
}

html .page-card {
	background-color: #fdfbf3;     /* --panel */
}

/* Phones get Frappe's full-screen card; larger screens a bordered panel. */
@media (min-width: 576px) {
	html .page-card {
		border: 1px solid #dfd2b8;   /* --border */
		border-radius: 12px;
	}
}

html .page-card-head .app-logo {
	border-radius: 12px;
}