/* Hachshara brand tokens — the single source of truth for the palette.
 *
 * CLAUDE.md §1: the palette is three colours used deliberately. Red is reserved for the
 * one element that matters most on a screen; everything else is charcoal on white or
 * #F5F5F7. CLAUDE.md §3 is equally explicit that Desk itself stays Desk — the brand goes
 * on the surfaces we own, not on list views, forms or Desk chrome.
 *
 * So this file does two things and nothing else:
 *   1. declares the tokens, additively, so a rebrand is a one-file change
 *   2. paints only surfaces we own — the login card, and our own .three-circles-* page
 *
 * It deliberately does NOT redefine Frappe's own variables (--primary, --text-color,
 * --red-500 …). Overriding those repaints every DocType in the system, turns Frappe's
 * danger red into brand red, and makes "this button is destructive" indistinguishable
 * from "this button is the main action".
 *
 * Loaded via hooks.py: app_include_css (Desk) and web_include_css (website + login).
 */

:root {
	--hachshara-red: #d52b1e;
	--hachshara-red-dark: #b8241a;
	--hachshara-red-darker: #931d15;
	--hachshara-charcoal: #333333;
	--hachshara-surface: #ffffff;
	--hachshara-surface-alt: #f5f5f7;
}

/* ---------------------------------------------------------------- login page
 *
 * The first screen anyone sees, including the client at the demo, and it is a page we
 * own rather than Desk chrome. Scoped to .page-card so it cannot leak into Desk: that
 * wrapper only exists on the website login/signup pages.
 */
.page-card .btn-primary,
.page-card .btn-login {
	/* Deeper red than the --hachshara-red token, deliberately - at full-width
	   solid fill, the brighter shade read as a danger/error button rather
	   than the main action (user feedback). Same red family, just darker. */
	background-color: var(--hachshara-red-dark);
	border-color: var(--hachshara-red-dark);
	color: var(--hachshara-surface);
}

.page-card .btn-primary:hover,
.page-card .btn-login:hover,
.page-card .btn-primary:focus,
.page-card .btn-login:focus {
	background-color: var(--hachshara-red-darker);
	border-color: var(--hachshara-red-darker);
	color: var(--hachshara-surface);
	box-shadow: 0 0 0 2px rgba(184, 36, 26, 0.25);
}

.page-card .page-card-head .indicator {
	color: var(--hachshara-charcoal);
}

.page-card a:not(.btn) {
	color: var(--hachshara-red);
}

.page-card a:not(.btn):hover {
	color: var(--hachshara-red-dark);
}

/* ------------------------------------------------------------- the brand logo
 *
 * Frappe sizes the navbar logo as `.app-logo { width: 24px }` with height auto - a square
 * slot, sized for the framework's own square mark. Our logo is a wide lockup (about 3.5:1),
 * so at a fixed 24px WIDTH it renders 7px tall and the wordmark is unreadable. Constrain
 * the height instead and let the width follow, which is the same swap the login page
 * already makes for itself (`.page-card-head img { max-height: 42px }`).
 *
 * Scoped to .navbar-brand so it touches the one image we replaced and nothing else that
 * happens to carry .app-logo - the /apps screen tiles, for instance, which really are
 * square. Per CLAUDE.md section 3, this is the logo we own, not Desk chrome we are restyling.
 */
.navbar-brand .app-logo {
	width: auto;
	height: 28px;
	max-width: 220px;
}

/* ------------------------------------------------------- our own Desk surfaces
 *
 * The three-circles landing page keeps its own layout rules in
 * credit_configuration/page/three_circles/three_circles.js; only the palette lives
 * here, so the tokens have one home. Anything added below must stay under a
 * .hakhshara-* / .three-circles-* class.
 */
.hakhshara-brand-text {
	color: var(--hachshara-red);
}

.hakhshara-muted-text {
	color: var(--hachshara-charcoal);
}

/* --------------------------------------------------------------- boot splash
 *
 * The logo Frappe shows while the Desk boots (`templates/includes/splash_screen.html`,
 * pulled into `www/desk.html` and re-injected by login.js the moment a login succeeds).
 * It is our logo on our loading screen, not Desk chrome, so it is ours to animate.
 *
 * Two layers, both slow and low-contrast on purpose: a breathing pulse so the screen
 * reads as "working, not frozen", and a diagonal gleam that sweeps across the lockup.
 * The gleam is white at low alpha, so it stays invisible over the white page and only
 * lifts the red and charcoal of the mark itself.
 *
 * THE PULSE USES `scale`, NOT `transform: scale()`, AND THAT IS THE WHOLE TRICK.
 * `.splash` inherits `.centered`, which centres it with `transform: translate(...)`, and
 * an animation on `transform` REPLACES that translate for the animation's whole run - the
 * logo slides off-centre. Restating the translate inside the keyframes does not save us
 * either: Frappe ships an rtlcss-flipped copy of its own bundle (`dist/css-rtl/...`, live
 * here because the site is Hebrew) where `.centered` is `right: 50%` +
 * `translate(50%, -50%)`, the mirror image of the LTR rule. This file is plain CSS served
 * verbatim, never rtl-processed, so one hard-coded translate is wrong in one of the two
 * directions - measured: 200px off-centre under `dir="rtl"`. The individual `scale`
 * property composes with whatever `transform` is in force instead of overwriting it, so
 * it is correct in both directions and stays correct if Frappe changes the centring rule.
 */
.splash {
	overflow: hidden;
	animation: hakhshara-splash-pulse 2s ease-in-out infinite;
}

.splash::after {
	content: "";
	position: absolute;
	/* Exactly the logo box, so translateX(±100%) is one clean pass edge to edge. An
	   oversized overlay makes the same percentages travel further than the mark is wide
	   and the gleam spends most of the loop outside it, invisible. */
	inset: 0;
	pointer-events: none;
	background: linear-gradient(
		60deg,
		transparent 42%,
		rgba(255, 255, 255, 0.6) 50%,
		transparent 58%
	);
	/* Linear, not eased: a gleam is a light source moving at a constant speed. */
	animation: hakhshara-splash-gleam 2.5s linear infinite;
}

/* The sweep should run the way the reader's eye does. `translateX` is physical and never
 * flips on its own, so mirror it for Hebrew rather than hard-coding a second keyframe. */
[dir="rtl"] .splash::after {
	animation-direction: reverse;
}

@keyframes hakhshara-splash-pulse {
	0%,
	100% {
		scale: 1;
		opacity: 0.95;
	}
	50% {
		scale: 1.03;
		opacity: 1;
	}
}

/* The sweep takes the first 60% of the cycle; the rest is the band parked off-screen, so
 * the gleam reads as an occasional catch of light rather than a continuous strobe. */
@keyframes hakhshara-splash-gleam {
	0% {
		transform: translateX(-100%);
	}
	60%,
	100% {
		transform: translateX(100%);
	}
}

/* Motion here is decoration, not information - the splash says the same thing standing
 * still. Honour the OS setting rather than animating over someone's accessibility choice. */
@media (prefers-reduced-motion: reduce) {
	.splash {
		animation: none;
	}

	.splash::after {
		display: none;
	}
}