/*
 * MacroIndex dark mode.
 *
 * Follows the OS/browser preference (prefers-color-scheme) — no toggle, no
 * layout or component changes. This file remaps ONLY the color utilities the
 * templates already use to dark equivalents; light mode is untouched because
 * everything lives inside the media query. Selectors are prefixed with `html`
 * so they outrank the same-name Tailwind utilities regardless of stylesheet
 * order (the CDN fallback injects its styles after this file loads).
 *
 * Ground: gray-900 page / gray-800 surfaces, inverted gray text ramp, and
 * hue-preserving translucent tints for the purple/amber/emerald/red accents.
 * Status dots, chart segment colors, and the brand purple are deliberately
 * left unchanged — they are data/brand colors, not surfaces.
 */

@media (prefers-color-scheme: dark) {
	html {
		color-scheme: dark;
	}

	/* ---- Grounds & surfaces ---- */
	html body.bg-gray-50 { background-color: #111827; }
	html .bg-gray-50 { background-color: #111827; }
	html .bg-white { background-color: #1f2937; }
	html .bg-white\/90 { background-color: rgba(31, 41, 55, 0.92); }
	html .bg-white\/95 { background-color: rgba(31, 41, 55, 0.95); }
	html .bg-gray-100 { background-color: #374151; }
	html .bg-gray-200 { background-color: #374151; }
	html .bg-gray-300 { background-color: #4b5563; }
	html .bg-gray-50\/60 { background-color: rgba(55, 65, 81, 0.55); }
	html .focus\:bg-white:focus { background-color: #1f2937; }
	html .hover\:bg-gray-50:hover { background-color: rgba(55, 65, 81, 0.55); }
	html .hover\:bg-gray-50\/80:hover { background-color: rgba(55, 65, 81, 0.5); }
	html .hover\:bg-gray-100:hover { background-color: rgba(75, 85, 99, 0.6); }
	html .hover\:bg-gray-200:hover { background-color: rgba(75, 85, 99, 0.8); }

	/* ---- Text (inverted gray ramp) ---- */
	html .text-gray-900 { color: #f3f4f6; }
	html .text-gray-800 { color: #e5e7eb; }
	html .text-gray-700 { color: #d1d5db; }
	html .text-gray-600 { color: #9ca3af; }
	html .text-gray-500 { color: #9ca3af; }
	html .text-gray-400 { color: #6b7280; }
	html .text-gray-300 { color: #4b5563; }
	html .hover\:text-gray-900:hover { color: #f9fafb; }

	/* ---- Borders & dividers ---- */
	/* Bare `border`/`border-t`/... utilities inherit Tailwind preflight's light
	   default (#e5e7eb). :where() keeps this at minimal specificity so any
	   explicit border-color utility (border-red-200, border-t-transparent,
	   border-white/40, ...) still wins. */
	html :where(.border, .border-t, .border-b, .border-l, .border-r) { border-color: #374151; }
	html .border-gray-100 { border-color: #2f3a4c; }
	html .border-gray-200 { border-color: #374151; }
	html .border-gray-200\/80 { border-color: rgba(55, 65, 81, 0.8); }
	html .border-gray-300 { border-color: #4b5563; }
	html .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: #2f3a4c; }

	/* ---- Brand purple: lighten text/border for contrast, keep filled bg ---- */
	html .text-googleBlue { color: #a78bfa; }
	html .hover\:text-googleBlue:hover { color: #c4b5fd; }
	html .focus\:text-googleBlue:focus { color: #c4b5fd; }
	html .border-googleBlue { border-color: #8b5cf6; }
	html .hover\:border-googleBlue:hover { border-color: #a78bfa; }
	html .focus\:border-googleBlue:focus { border-color: #a78bfa; }
	html .border-googleBlue\/30 { border-color: rgba(139, 92, 246, 0.35); }

	/* ---- Purple tints (Ask AI panels, selected calendar day, chips) ---- */
	html .bg-purple-50 { background-color: rgba(109, 40, 217, 0.16); }
	html .bg-purple-100 { background-color: rgba(139, 92, 246, 0.24); }
	html .hover\:bg-purple-100:hover { background-color: rgba(139, 92, 246, 0.3); }
	html .border-purple-200 { border-color: rgba(139, 92, 246, 0.4); }
	html .border-purple-300 { border-color: rgba(139, 92, 246, 0.55); }
	html .text-purple-800 { color: #c4b5fd; }
	html .text-purple-900 { color: #ddd6fe; }
	html .focus\:ring-purple-100:focus { --tw-ring-color: rgba(139, 92, 246, 0.25); }

	/* ---- Amber / yellow notices ---- */
	html .bg-amber-50 { background-color: rgba(245, 158, 11, 0.12); }
	html .bg-amber-100 { background-color: rgba(245, 158, 11, 0.2); }
	html .border-amber-200 { border-color: rgba(245, 158, 11, 0.35); }
	html .text-amber-700 { color: #fbbf24; }
	html .text-amber-800 { color: #fcd34d; }
	html .text-amber-900 { color: #fde68a; }
	html .bg-yellow-50 { background-color: rgba(234, 179, 8, 0.12); }
	html .border-yellow-200 { border-color: rgba(234, 179, 8, 0.35); }
	html .text-yellow-900 { color: #fde68a; }
	html .text-orange-800 { color: #fdba74; }

	/* ---- Emerald / green (success, supplements taken, verified) ---- */
	html .bg-emerald-50 { background-color: rgba(16, 185, 129, 0.12); }
	html .bg-emerald-50\/60 { background-color: rgba(16, 185, 129, 0.1); }
	html .bg-emerald-100 { background-color: rgba(16, 185, 129, 0.2); }
	html .border-emerald-200 { border-color: rgba(16, 185, 129, 0.35); }
	html .text-emerald-700 { color: #34d399; }
	html .text-emerald-800 { color: #6ee7b7; }
	html .bg-green-100 { background-color: rgba(34, 197, 94, 0.2); }
	html .border-green-200 { border-color: rgba(34, 197, 94, 0.35); }
	html .text-green-700 { color: #4ade80; }
	html .text-green-800 { color: #86efac; }

	/* ---- Red (errors, delete, suspended) ---- */
	html .bg-red-50 { background-color: rgba(239, 68, 68, 0.12); }
	html .bg-red-50\/60 { background-color: rgba(239, 68, 68, 0.1); }
	html .bg-red-100 { background-color: rgba(239, 68, 68, 0.2); }
	html .hover\:bg-red-50:hover { background-color: rgba(239, 68, 68, 0.18); }
	html .hover\:bg-red-100:hover { background-color: rgba(239, 68, 68, 0.26); }
	html .border-red-200 { border-color: rgba(239, 68, 68, 0.35); }
	html .border-red-300 { border-color: rgba(239, 68, 68, 0.5); }
	html .focus\:border-red-400:focus { border-color: #f87171; }
	html .focus\:ring-red-100:focus { --tw-ring-color: rgba(239, 68, 68, 0.25); }
	html .text-red-700 { color: #f87171; }
	html .text-red-800 { color: #fca5a5; }
	html .text-red-900 { color: #fecaca; }

	/* ---- Blue / sky chips (admin plan chip, retrieval badge) ---- */
	html .bg-blue-100 { background-color: rgba(59, 130, 246, 0.2); }
	html .text-blue-800 { color: #93c5fd; }
	html .bg-sky-50 { background-color: rgba(14, 165, 233, 0.15); }
	html .text-sky-700 { color: #7dd3fc; }

	/* ---- Remaining tint chips (admin invite-only, profile Google-linked) ---- */
	html .bg-orange-100 { background-color: rgba(249, 115, 22, 0.2); }
	html .bg-green-50 { background-color: rgba(34, 197, 94, 0.12); }

	/* ---- Trends chart goal markers: near-black lines flip to near-white ---- */
	html .bg-gray-800\/70 { background-color: rgba(229, 231, 235, 0.7); }
	html .bg-gray-800\/50 { background-color: rgba(229, 231, 235, 0.5); }
	html .inline-block.bg-gray-800 { background-color: rgba(229, 231, 235, 0.9); }

	/* ---- Hardcoded heading colors in the changelog/legal style blocks ---- */
	html .changelog-content h1,
	html .changelog-content h2,
	html .changelog-content h3,
	html .legal-content h1,
	html .legal-content h2,
	html .legal-content h3 { color: #f3f4f6; }

	/* ---- Landing hero gradient (purple glow on dark instead of on white) ---- */
	html .from-purple-50 {
		--tw-gradient-from: rgba(109, 40, 217, 0.18) var(--tw-gradient-from-position);
		--tw-gradient-to: rgb(17 24 39 / 0) var(--tw-gradient-to-position);
		--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
	}
	html .via-white {
		--tw-gradient-to: rgb(17 24 39 / 0) var(--tw-gradient-to-position);
		--tw-gradient-stops: var(--tw-gradient-from), #111827 var(--tw-gradient-via-position), var(--tw-gradient-to);
	}
	html .to-white {
		--tw-gradient-to: #111827 var(--tw-gradient-to-position);
	}

	/* ---- The wordmark is near-black; render it white in dark mode ---- */
	html img[src*="logo-horizontal"] { filter: brightness(0) invert(1); }

	/* ---- Light islands: content that is inherently light-mode imagery ---- */
	/* Swagger UI ships its own light theme; keep the docs panel readable. */
	html #swagger-ui.bg-white { background-color: #ffffff; }
	/* Landing phone mocks + screenshot lightbox frame light-mode screenshots;
	   their white letterbox fill must stay white behind the images. */
	html .aspect-\[9\/19\.5\].bg-white,
	html img.object-contain.bg-white,
	html #shot-lightbox-img { background-color: #ffffff; }
}