/**
 * Pulse HCP — "Clinical Clarity" sample theme for the LMS shell (Frappe UI / LMS SPA).
 *
 * LIGHT MODE ONLY: dark theme stays on stock Frappe UI tokens.
 * Scope uses html:not([data-theme="dark"]) so defaults match light before JS hydrates.
 *
 * Uses --pulse-hcp-primary / --pulse-hcp-link / --pulse-hcp-surface-wash from the theme DocType when set.
 * Optional --pulse-hcp-page-bg-image / --pulse-hcp-bg-overlay for a light-mode photo or pattern.
 * Light mode adds a fixed clinical blue gradient on body with semi-transparent surfaces.
 */

/* -------------------------------------------------------------------------- */
/* Light only — raw + semantic Frappe UI tokens                                */
/* -------------------------------------------------------------------------- */

html:not([data-theme="dark"]) {
	/* Primary ramp: clinical teal, not default electric blue */
	--blue-50: #eaf7f8 !important;
	--blue-100: #d5eef0 !important;
	--blue-200: #a8dde2 !important;
	--blue-300: #7bc9d1 !important;
	--blue-400: #4eb1bc !important;
	--blue-500: #2a96a3 !important;
	--blue-600: var(--pulse-hcp-primary, #0e7c83) !important;
	--blue-700: #0c656b !important;
	--blue-800: #095057 !important;
	--blue-900: #063c42 !important;

	/* Cool neutrals — faint blue-green bias, softer than stock grays */
	--gray-50: #f7fafb !important;
	--gray-100: #ecf2f3 !important;
	--gray-200: #dfe8ea !important;
	--gray-300: #c8d5d8 !important;
	--gray-400: #9dadb1 !important;
	--gray-500: #6e7f84 !important;
	--gray-600: #56686d !important;
	--gray-700: #3f4f54 !important;
	--gray-800: #2c393d !important;
	--gray-900: #1c2629 !important;

	/* Status greens — capable but not overly loud */
	--green-50: #f2faf6 !important;
	--green-100: #e3f5eb !important;
	--green-200: #c3e9d4 !important;
	--green-300: #9ddabb !important;
	--green-400: #6bc698 !important;
	--green-500: #3ba87a !important;
	--green-600: #2a8c66 !important;
	--green-700: #217352 !important;
	--green-800: #1a5c42 !important;
	--green-900: #153f2f !important;

	/* Reds — alert clarity without harsh neon */
	--red-50: #fff8f8 !important;
	--red-100: #ffecec !important;
	--red-200: #ffd4d4 !important;
	--red-300: #fcb0b0 !important;
	--red-400: #f08080 !important;
	--red-500: #d94545 !important;
	--red-600: #c03434 !important;
	--red-700: #9e2a2a !important;
	--red-800: #7f2222 !important;
	--red-900: #5c1a1a !important;

	--amber-50: #fdf8ed !important;
	--amber-200: #f5e0a8 !important;
	--amber-500: #c9890a !important;
	--amber-600: #a66f08 !important;

	/* Blue chrome + semantic surfaces / ink / outlines */
	--outline-blue-1: #7bc9d1 !important;
	--surface-blue-1: color-mix(in srgb, var(--pulse-hcp-surface-wash, #f0fafa) 72%, transparent) !important;
	--surface-blue-2: color-mix(in srgb, var(--blue-100) 65%, transparent) !important;
	--surface-blue-3: var(--pulse-hcp-primary, #0e7c83) !important;
	--ink-blue-1: #eaf7f8 !important;
	--ink-blue-2: #2a96a3 !important;
	--ink-blue-3: var(--pulse-hcp-primary, #0e7c83) !important;
	--ink-blue-link: var(--pulse-hcp-link, #0a5f66) !important;

	--surface-gray-3: #dfe8ea !important;
	--surface-gray-4: #c8d5d8 !important;
	--surface-gray-5: #3f4f54 !important;
	--surface-gray-6: #2c393d !important;
	--surface-gray-7: #1c2629 !important;

	--ink-gray-4: #6e7f84 !important;
	--ink-gray-5: #56686d !important;
	--ink-gray-6: #3f4f54 !important;
	--ink-gray-7: #3f4f54 !important;
	--ink-gray-8: #2c393d !important;
	--ink-gray-9: #1c2629 !important;

	--outline-gray-1: #dfe8ea !important;
	--outline-gray-2: #c8d5d8 !important;
	--outline-gray-3: #8cb4ba !important;
	--outline-gray-4: #6e7f84 !important;
	--outline-gray-modals: #dfe8ea !important;

	/* Page wash — semi-transparent so the clinical gradient reads through */
	--pulse-hcp-wash: var(--pulse-hcp-surface-wash, #f0fafa);
	--surface-menu-bar: color-mix(in srgb, var(--pulse-hcp-wash) 82%, transparent) !important;
	--surface-gray-1: color-mix(in srgb, var(--pulse-hcp-wash) 55%, transparent) !important;
	--surface-gray-2: color-mix(in srgb, var(--blue-100) 62%, transparent) !important;
	--surface-white: rgba(255, 255, 255, 0.68) !important;
	--surface-cards: #ffffff !important;
	--surface-modal: #ffffff !important;
	--surface-selected: rgba(255, 255, 255, 0.92) !important;

	scroll-behavior: smooth;
}

/* -------------------------------------------------------------------------- */
/* Light only — clinical gradient page background                              */
/* -------------------------------------------------------------------------- */

html:not([data-theme="dark"]) body {
	min-height: 100vh;
	background-color: var(--gray-50);
	background-image:
		linear-gradient(
			168deg,
			color-mix(
				in srgb,
				var(--gray-50) calc(var(--pulse-hcp-bg-overlay, 0.75) * 100%),
				transparent
			),
			color-mix(
				in srgb,
				var(--blue-50) calc(var(--pulse-hcp-bg-overlay, 0.75) * 88%),
				transparent
			)
		),
		radial-gradient(
			ellipse 120% 80% at 0% -15%,
			color-mix(in srgb, var(--blue-200) 42%, transparent),
			transparent 58%
		),
		radial-gradient(
			ellipse 85% 55% at 100% 105%,
			color-mix(in srgb, var(--pulse-hcp-primary, #0e7c83) 14%, transparent),
			transparent 52%
		),
		linear-gradient(
			168deg,
			color-mix(in srgb, var(--gray-50) 96%, transparent) 0%,
			color-mix(in srgb, var(--blue-50) 78%, transparent) 36%,
			color-mix(in srgb, var(--pulse-hcp-wash, #f0fafa) 58%, transparent) 68%,
			color-mix(in srgb, var(--gray-50) 94%, transparent) 100%
		),
		var(--pulse-hcp-page-bg-image, none);
	background-size: cover, cover, cover, cover, cover;
	background-position: center, center, center, center, center;
	background-repeat: no-repeat;
	background-attachment: fixed;
}

/* Frosted chrome on sticky headers / sidebars over the gradient */
html:not([data-theme="dark"]) .sticky.bg-surface-white,
html:not([data-theme="dark"]) .bg-surface-menu-bar {
	-webkit-backdrop-filter: blur(10px) saturate(1.12);
	backdrop-filter: blur(10px) saturate(1.12);
}

@media (prefers-reduced-motion: reduce) {
	html:not([data-theme="dark"]) {
		scroll-behavior: auto;
	}
}