/* Force hidden utility to always hide elements, even if Tailwind is missing or overridden */
.hidden {
	display: none !important;
}

/* Keep the public pages light while applying the V2.x palette to signed-in UI. */
.authenticated-ui {
	color-scheme: dark;
	--color-accent-hover: color-mix(in srgb, var(--color-accent) 85%, black);
	--color-slate-50: #1f2937;
	--color-slate-100: #2a3444;
	--color-slate-200: #3b4758;
	--color-slate-300: #526176;
	--color-slate-400: #94a3b8;
	--color-slate-500: #94a3b8;
	--color-slate-600: #94a3b8;
	--color-slate-700: #e5e7eb;
	--color-slate-800: #e5e7eb;
	--color-slate-900: #e5e7eb;
	--color-gray-50: #1f2937;
	--color-gray-100: #2a3444;
	--color-gray-200: #3b4758;
	--color-gray-300: #526176;
	--color-gray-400: #94a3b8;
	--color-gray-500: #94a3b8;
	--color-gray-600: #94a3b8;
	--color-gray-700: #e5e7eb;
	--color-gray-800: #e5e7eb;
	--color-gray-900: #e5e7eb;
	--color-accent-50: color-mix(in srgb, var(--color-accent) 10%, transparent);
	--color-accent-100: color-mix(in srgb, var(--color-accent) 18%, transparent);
	--color-accent-200: color-mix(in srgb, var(--color-accent) 32%, transparent);
	--color-accent-300: var(--color-accent);
	--color-accent-600: var(--color-accent);
	--color-accent-700: var(--color-accent);
	--color-accent-800: var(--color-accent);
	--color-rose-600: #fb7185;
	--color-rose-800: #fda4af;
	--color-red-50: #3a2933;
	--color-red-100: #49303b;
	--color-red-200: #68404e;
	--color-red-300: #895363;
	--color-red-400: #a45a6a;
	--color-red-700: #fda4af;
	--color-red-800: #fecdd3;
	--color-amber-50: #393328;
	--color-amber-100: #49402e;
	--color-amber-200: #66583b;
	--color-amber-300: #887044;
	--color-amber-400: #a1844a;
	--color-amber-900: #fcd58a;
	--color-blue-50: #26354a;
	--color-blue-100: #2d4059;
	--color-blue-200: #3b526e;
	--color-blue-300: #526a87;
	--color-blue-700: #cbd5e1;
	--color-blue-800: #dbe4ef;
	--color-blue-900: #e5e7eb;
	--color-emerald-950: #263b33;
	--color-emerald-900: #33483e;
	--color-emerald-700: #496455;
	--color-emerald-300: #b8cbbf;
}

.authenticated-ui [class~="bg-white"] {
	background-color: #2a3444;
}

.authenticated-ui [class~="bg-slate-900"],
.authenticated-ui [class~="bg-slate-800"],
.authenticated-ui [class~="bg-blue-500"] {
	background-color: var(--color-accent);
}

.authenticated-ui [class~="bg-gray-500"] {
	background-color: #3b4758;
}

.authenticated-ui [class~="border-slate-700"] {
	border-color: var(--color-accent);
}

.authenticated-ui [class~="bg-slate-900"].text-white,
.authenticated-ui [class~="bg-slate-800"].text-white,
.authenticated-ui [class~="bg-blue-500"].text-white {
	color: #1f2937;
}

.authenticated-ui [class~="bg-gray-500"].text-white {
	color: #e5e7eb;
}

.authenticated-ui [class~="hover:bg-slate-50"]:hover {
	background-color: #2a3444;
}

.authenticated-ui [class~="hover:bg-slate-700"]:hover,
.authenticated-ui [class~="hover:bg-gray-700"]:hover,
.authenticated-ui [class~="hover:bg-blue-700"]:hover {
	background-color: var(--color-accent-hover);
	color: #1f2937;
}

.authenticated-ui [class~="focus:border-slate-400"]:focus {
	border-color: var(--color-accent);
}
/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */