/**
 * Trail Manager - Scandinavian Outdoor Design System
 */

:root {
	--tm-font-family: var(--v-font-body, system-ui, sans-serif);
	
	/* Palette inspired by Nordic nature (Pine, Slate, Granite, Snow, Birch) */
	--tm-color-pine-900: #132A1C;
	--tm-color-pine-800: #1B3E29;
	--tm-color-pine-700: #1E4D2B;
	--tm-color-pine-600: #2D6A4F;
	--tm-color-pine-50:  #F0FDF4;

	--tm-color-slate-900: #0F172A;
	--tm-color-slate-800: #1E293B;
	--tm-color-slate-700: #334155;
	--tm-color-slate-600: #475569;
	--tm-color-slate-500: #64748B;
	--tm-color-slate-400: #94A3B8;
	--tm-color-slate-200: #E2E8F0;
	--tm-color-slate-100: #F1F5F9;
	--tm-color-slate-50:  #F8FAFC;

	--tm-color-accent:   #D97706;
	--tm-color-accent-light: #FEF3C7;
	--tm-color-danger:   #DC2626;
	--tm-color-danger-light: #FEE2E2;
	--tm-color-success:  #16A34A;
	--tm-color-success-light: #DCFCE7;

	--tm-radius-sm: 4px;
	--tm-radius-md: 8px;
	--tm-radius-lg: 12px;
	--tm-radius-full: 9999px;

	--tm-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	--tm-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
	--tm-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);

	--tm-container-width: 1240px;
}

/* Scoped Reset & Base Container */
.tm-container {
	max-width: var(--tm-container-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
	box-sizing: border-box;
	font-family: var(--tm-font-family);
	color: var(--tm-color-slate-800);
}

.tm-container * {
	box-sizing: border-box;
}

/* Buttons */
.tm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 20px;
	font-size: 14px;
	font-weight: 600;
	border-radius: var(--tm-radius-md);
	text-decoration: none;
	cursor: pointer;
	transition: all 0.2s ease;
	border: 1px solid transparent;
	line-height: 1.4;
}

.tm-btn-primary {
	background-color: var(--tm-color-pine-700);
	color: #ffffff !important;
}

.tm-btn-primary:hover {
	background-color: var(--tm-color-pine-800);
	transform: translateY(-1px);
	box-shadow: var(--tm-shadow-sm);
}

.tm-btn-secondary {
	background-color: #ffffff;
	color: var(--tm-color-slate-800) !important;
	border-color: var(--tm-color-slate-200);
}

.tm-btn-secondary:hover {
	background-color: var(--tm-color-slate-50);
	border-color: var(--tm-color-slate-400);
}

.tm-btn-outline {
	background-color: transparent;
	color: var(--tm-color-pine-700) !important;
	border-color: var(--tm-color-pine-700);
}

.tm-btn-outline:hover {
	background-color: var(--tm-color-pine-50);
}

.tm-btn-sm {
	padding: 6px 12px;
	font-size: 13px;
}

.tm-btn-lg {
	padding: 14px 28px;
	font-size: 16px;
}

/* Badges & Chips */
.tm-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	font-size: 12px;
	font-weight: 600;
	border-radius: var(--tm-radius-sm);
	line-height: 1;
}

.tm-badge-difficulty-easy {
	background-color: #DCFCE7;
	color: #15803D;
}

.tm-badge-difficulty-moderate {
	background-color: #FEF3C7;
	color: #B45309;
}

.tm-badge-difficulty-difficult {
	background-color: #FFEDD5;
	color: #C2410C;
}

.tm-badge-difficulty-very-difficult {
	background-color: #FEE2E2;
	color: #B91C1C;
}

.tm-badge-status-open {
	background-color: var(--tm-color-success-light);
	color: var(--tm-color-success);
}

.tm-badge-status-caution {
	background-color: var(--tm-color-accent-light);
	color: var(--tm-color-accent);
}

.tm-badge-status-closed {
	background-color: var(--tm-color-danger-light);
	color: var(--tm-color-danger);
}

.tm-badge-neutral {
	background-color: var(--tm-color-slate-100);
	color: var(--tm-color-slate-700);
}

/* SVG Icon Helper */
.tm-icon {
	width: 16px;
	height: 16px;
	vertical-align: middle;
	fill: currentColor;
}

.tm-icon-lg {
	width: 24px;
	height: 24px;
}