/**
 * Marketplace Hub — design tokens.
 * Modern, themeable, dark-mode ready.
 */

.mh-marketplace,
.mh-marketplace-admin {
	/* Spacing scale (4px base) */
	--mh-space-0: 0;
	--mh-space-1: 0.25rem;
	--mh-space-2: 0.5rem;
	--mh-space-3: 0.75rem;
	--mh-space-4: 1rem;
	--mh-space-5: 1.5rem;
	--mh-space-6: 2rem;
	--mh-space-7: 3rem;
	--mh-space-8: 4rem;

	/* Radius scale */
	--mh-radius-sm: 6px;
	--mh-radius-md: 10px;
	--mh-radius-lg: 16px;
	--mh-radius-xl: 24px;
	--mh-radius-full: 999px;

	/* Typography */
	--mh-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--mh-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

	--mh-text-xs: 0.75rem;
	--mh-text-sm: 0.875rem;
	--mh-text-base: 1rem;
	--mh-text-lg: 1.125rem;
	--mh-text-xl: 1.25rem;
	--mh-text-2xl: 1.5rem;
	--mh-text-3xl: 1.875rem;
	--mh-text-4xl: 2.25rem;

	/* Colors — light mode defaults */
	--mh-bg: #f7f8fa;
	--mh-bg-elevated: #ffffff;
	--mh-bg-sunken: #eef0f4;
	--mh-bg-hover: #f0f2f6;

	--mh-text: #0f172a;
	--mh-text-muted: #64748b;
	--mh-text-subtle: #94a3b8;
	--mh-text-inverse: #ffffff;

	--mh-border: #e2e8f0;
	--mh-border-strong: #cbd5e1;

	--mh-primary: #4f46e5;
	--mh-primary-hover: #4338ca;
	--mh-primary-soft: #eef2ff;
	--mh-primary-text: #ffffff;

	--mh-accent: #06b6d4;

	--mh-success: #10b981;
	--mh-success-soft: #ecfdf5;
	--mh-warning: #f59e0b;
	--mh-warning-soft: #fffbeb;
	--mh-danger: #ef4444;
	--mh-danger-soft: #fef2f2;

	/* Shadows */
	--mh-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
	--mh-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
	--mh-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
	--mh-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12), 0 4px 8px rgba(15, 23, 42, 0.06);

	/* Motion */
	--mh-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--mh-duration-fast: 120ms;
	--mh-duration: 200ms;
	--mh-duration-slow: 320ms;

	/* Layout */
	--mh-container: 1200px;
	--mh-header-height: 64px;
	--mh-sidebar-width: 240px;

	box-sizing: border-box;
	color: var(--mh-text);
	font-family: var(--mh-font-sans);
	font-size: var(--mh-text-base);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

.mh-marketplace *,
.mh-marketplace *::before,
.mh-marketplace *::after {
	box-sizing: inherit;
}

/* Dark mode — respects OS preference and can be forced via [data-mh-theme] */
@media (prefers-color-scheme: dark) {
	.mh-marketplace:not([data-mh-theme="light"]) {
		--mh-bg: #0b1020;
		--mh-bg-elevated: #131a2e;
		--mh-bg-sunken: #080c1a;
		--mh-bg-hover: #1a2340;

		--mh-text: #f1f5f9;
		--mh-text-muted: #94a3b8;
		--mh-text-subtle: #64748b;

		--mh-border: #1e293b;
		--mh-border-strong: #334155;

		--mh-primary: #818cf8;
		--mh-primary-hover: #a5b4fc;
		--mh-primary-soft: #1e1b4b;
		--mh-primary-text: #0b1020;

		--mh-success-soft: #052e26;
		--mh-warning-soft: #3a2a06;
		--mh-danger-soft: #3f1212;

		--mh-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
		--mh-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
		--mh-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);
	}
}

.mh-marketplace[data-mh-theme="dark"] {
	--mh-bg: #0b1020;
	--mh-bg-elevated: #131a2e;
	--mh-bg-sunken: #080c1a;
	--mh-bg-hover: #1a2340;
	--mh-text: #f1f5f9;
	--mh-text-muted: #94a3b8;
	--mh-text-subtle: #64748b;
	--mh-border: #1e293b;
	--mh-border-strong: #334155;
	--mh-primary: #818cf8;
	--mh-primary-hover: #a5b4fc;
	--mh-primary-soft: #1e1b4b;
	--mh-primary-text: #0b1020;
	--mh-success-soft: #052e26;
	--mh-warning-soft: #3a2a06;
	--mh-danger-soft: #3f1212;
	--mh-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
	--mh-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
	--mh-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);
}

@media (prefers-reduced-motion: reduce) {
	.mh-marketplace * {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}