@use 'sass:color';

$primary: #b68d64;
$warning: #7f5539;
$danger: #b08968;
$light: color.scale($primary, $lightness: 50%);
$success: #e6ccb2;

$background: color.scale($warning, $lightness: 80%);
$foreground: color.scale($warning, $lightness: 72.5%);
$foreground-2: color.scale($danger, $lightness: 90%);

// Card background
// body-bg doesn't work
// $body-bg: color.scale($primary, $lightness: 80%);
// $card-bg: $body-bg;

@import 'pre';

$theme-colors: map-merge(
	$theme-colors,
	(
		'primary': $primary,
		'warning': $warning,
		'danger': $danger,
		'light': $light,
		'success': $success,
	)
);

@import 'bootstrap';

body {
	background-color: $background;
}

#navbar {
	background-color: $light;
}

.nav-pills .nav-link.active {
	background-color: $primary;
	color: $body-color;
}

.pack {
	@extend .shadow-lg;
}

#packContentContainer,
.card {
	background-color: $foreground;
}