/* esevo360 design tokens (--e360-*). Loaded on every surface: Desk, website/portal/login,
 * Frappe CRM and Helpdesk. See docs/DESIGN-SYSTEM.md.
 *
 * Fonts are self-hosted from the pinned Geist release (public/fonts/geist/PROVENANCE.json);
 * no third-party font request is ever made. The per-instance accent is written server-side
 * (esevo360.esevo_ui.inject) as --e360-accent before first paint; the value below is the fallback.
 */

@font-face {
	font-family: "Geist";
	src: url("/assets/esevo360/fonts/geist/Geist-Variable.woff2") format("woff2-variations"),
		url("/assets/esevo360/fonts/geist/Geist-Variable.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Geist";
	src: url("/assets/esevo360/fonts/geist/Geist-Italic-Variable.woff2") format("woff2-variations"),
		url("/assets/esevo360/fonts/geist/Geist-Italic-Variable.woff2") format("woff2");
	font-weight: 100 900;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Geist Mono";
	src: url("/assets/esevo360/fonts/geist/GeistMono-Variable.woff2") format("woff2-variations"),
		url("/assets/esevo360/fonts/geist/GeistMono-Variable.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

:root {
	/* Type families */
	--e360-font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
		"Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
	--e360-font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

	/* Type scale (px values are deliberate: Frappe's own tokens are px) */
	--e360-text-meta: 12px; /* timestamps, captions */
	--e360-text-meta-lg: 13px; /* labels, helper text */
	--e360-text-ui: 14px; /* nav, buttons, dense tables */
	--e360-text-body: 15px; /* body copy and form inputs */
	--e360-text-body-lg: 16px; /* long-form reading, portal body */
	--e360-text-section: 20px; /* section headings */
	--e360-text-section-lg: 24px;
	--e360-text-page: 28px; /* page headings */
	--e360-text-page-lg: 32px;

	--e360-weight-regular: 400;
	--e360-weight-medium: 500;
	--e360-weight-semibold: 600;

	--e360-leading-body: 1.5;
	--e360-leading-tight: 1.25;
	--e360-leading-heading: 1.2;
	--e360-tracking-heading: -0.01em;

	/* Spacing (4px grid) */
	--e360-space-1: 4px;
	--e360-space-2: 8px;
	--e360-space-3: 12px;
	--e360-space-4: 16px;
	--e360-space-5: 20px;
	--e360-space-6: 24px;
	--e360-space-8: 32px;
	--e360-space-10: 40px;
	--e360-space-12: 48px;

	/* Density: row heights and control heights; [data-e360-density="compact"] tightens them */
	--e360-control-height: 36px;
	--e360-row-height: 40px;
	--e360-cell-pad-y: 10px;
	--e360-cell-pad-x: 12px;

	/* Radius and borders */
	--e360-radius-sm: 6px;
	--e360-radius: 8px;
	--e360-radius-lg: 12px;
	--e360-radius-pill: 999px;
	--e360-border-width: 1px;

	/* Neutral colours (light) */
	--e360-bg: #ffffff;
	--e360-bg-subtle: #f7f7f8;
	--e360-bg-muted: #efeff1;
	--e360-surface: #ffffff;
	--e360-border: #e2e2e6;
	--e360-border-strong: #c8c8cf;
	--e360-text: #18181b;
	--e360-text-muted: #52525b; /* 7.0:1 on white */
	--e360-text-subtle: #6b6b74; /* 5.0:1 on white, meta only */

	/* Per-instance accent (overridden server-side per site) */
	--e360-accent: #1f4f8f;
	--e360-accent-contrast: #ffffff;
	--e360-accent-soft: color-mix(in srgb, var(--e360-accent) 10%, var(--e360-bg));
	--e360-accent-strong: color-mix(in srgb, var(--e360-accent) 82%, #000);
	--e360-link: var(--e360-accent);

	/* Status colours (text colours meet 4.5:1 on their soft background) */
	--e360-success: #13693f;
	--e360-success-soft: #e6f4ec;
	--e360-warning: #8a5300;
	--e360-warning-soft: #fdf3dc;
	--e360-danger: #b42318;
	--e360-danger-soft: #fdecea;
	--e360-info: #1d4f91;
	--e360-info-soft: #e8f0fb;
	--e360-negative: #b42318; /* negative amounts */

	/* Environment badge colours */
	--e360-env-production: #b42318;
	--e360-env-staging: #8a5300;
	--e360-env-local: #3f3f46;

	/* Focus: always visible, 2px ring offset from the element, accent-coloured */
	--e360-focus-color: var(--e360-accent);
	--e360-focus-ring: 0 0 0 2px var(--e360-bg), 0 0 0 4px var(--e360-focus-color);
	--e360-focus-outline: 2px solid var(--e360-focus-color);
	--e360-focus-offset: 2px;

	/* Elevation */
	--e360-shadow-sm: 0 1px 2px rgba(16, 16, 20, 0.06);
	--e360-shadow: 0 1px 3px rgba(16, 16, 20, 0.08), 0 4px 12px rgba(16, 16, 20, 0.05);
}

[data-e360-density="compact"] {
	--e360-control-height: 32px;
	--e360-row-height: 34px;
	--e360-cell-pad-y: 6px;
	--e360-cell-pad-x: 10px;
}

/* Dark: Frappe Desk sets data-theme on <html>; the SPAs set class="dark". */
[data-theme="dark"],
html.dark {
	--e360-bg: #161618;
	--e360-bg-subtle: #1e1e21;
	--e360-bg-muted: #26262a;
	--e360-surface: #1c1c1f;
	--e360-border: #33333a;
	--e360-border-strong: #4a4a52;
	--e360-text: #f2f2f3;
	--e360-text-muted: #b4b4bb;
	--e360-text-subtle: #9a9aa2;
	--e360-accent-soft: color-mix(in srgb, var(--e360-accent) 24%, var(--e360-bg));
	--e360-focus-color: color-mix(in srgb, var(--e360-accent) 45%, #fff);
	--e360-link: color-mix(in srgb, var(--e360-accent) 45%, #fff);
	--e360-success: #5fd39a;
	--e360-success-soft: #12311f;
	--e360-warning: #f5c26b;
	--e360-warning-soft: #3a2a0c;
	--e360-danger: #ff8a80;
	--e360-danger-soft: #3d1512;
	--e360-info: #8cb8f5;
	--e360-info-soft: #13253f;
	--e360-negative: #ff8a80;
}

/* Shared utilities usable on any surface */
.e360-num,
.e360-amount {
	font-variant-numeric: tabular-nums lining-nums;
	text-align: right;
	white-space: nowrap;
}
.e360-amount.is-negative,
.e360-negative {
	color: var(--e360-negative);
}
.e360-mono {
	font-family: var(--e360-font-mono);
	font-size: 0.93em;
}
.e360-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}