/**
 * Best Mount Kinabalu — design system.
 *
 * Foundation-only CSS custom properties. Values are placeholder,
 * reasonable defaults (a green/earth palette suited to a mountain-
 * trekking brand) — not final brand colours, which belong to a later
 * design pass. Every layout, pattern, and future template should read
 * these variables rather than hard-coding a colour, size, or spacing
 * value, so a future brand pass only has to edit this one file.
 */

:root {
	/* Colour: brand */
	--bmk-color-primary: #1f5c3f;
	--bmk-color-primary-dark: #143d29;
	--bmk-color-primary-light: #e7f0ea;
	--bmk-color-accent: #d97b2b;
	--bmk-color-accent-dark: #b3611c;

	/* Colour: neutrals */
	--bmk-color-text: #23261f;
	--bmk-color-text-muted: #5c6058;
	--bmk-color-heading: #17190f;
	--bmk-color-border: #dfe2da;
	--bmk-color-surface: #ffffff;
	--bmk-color-surface-alt: #f6f7f4;
	--bmk-color-dark: #17190f;
	--bmk-color-dark-text: #e9ebe4;

	/* Colour: feedback */
	--bmk-color-success: #2f7a4d;
	--bmk-color-warning: #b3611c;
	--bmk-color-danger: #a7332a;

	/* Typography */
	--bmk-font-heading: "Poppins", "Segoe UI", sans-serif;
	--bmk-font-body: "Inter", "Segoe UI", sans-serif;

	--bmk-font-size-sm: 0.875rem;
	--bmk-font-size-base: 1rem;
	--bmk-font-size-lg: 1.125rem;
	--bmk-font-size-xl: 1.375rem;
	--bmk-font-size-2xl: 1.75rem;
	--bmk-font-size-3xl: 2.25rem;
	--bmk-font-size-4xl: 2.75rem;

	--bmk-line-height-tight: 1.2;
	--bmk-line-height-base: 1.6;

	--bmk-font-weight-regular: 400;
	--bmk-font-weight-medium: 500;
	--bmk-font-weight-bold: 700;

	/* Spacing scale */
	--bmk-space-2xs: 0.25rem;
	--bmk-space-xs: 0.5rem;
	--bmk-space-sm: 0.75rem;
	--bmk-space-md: 1.5rem;
	--bmk-space-lg: 2.5rem;
	--bmk-space-xl: 4rem;
	--bmk-space-2xl: 6rem;

	/* Radius */
	--bmk-radius-sm: 4px;
	--bmk-radius-md: 8px;
	--bmk-radius-lg: 16px;
	--bmk-radius-pill: 999px;

	/* Shadow */
	--bmk-shadow-sm: 0 1px 2px rgba(23, 25, 15, 0.08);
	--bmk-shadow-md: 0 4px 16px rgba(23, 25, 15, 0.10);
	--bmk-shadow-lg: 0 12px 32px rgba(23, 25, 15, 0.14);

	/* Container widths */
	--bmk-container-width: 1200px;
	--bmk-container-width-narrow: 800px;
	--bmk-container-width-wide: 1440px;
	--bmk-container-gutter: var(--bmk-space-md);

	/* Transitions */
	--bmk-transition-fast: 150ms ease;
	--bmk-transition-base: 250ms ease;
}

/* -------------------------------------------------------------------- */
/* Base typography                                                      */
/* -------------------------------------------------------------------- */

body {
	font-family: var(--bmk-font-body);
	font-size: var(--bmk-font-size-base);
	line-height: var(--bmk-line-height-base);
	color: var(--bmk-color-text);
}

h1, h2, h3, h4, h5, h6,
.bmk-heading {
	font-family: var(--bmk-font-heading);
	line-height: var(--bmk-line-height-tight);
	color: var(--bmk-color-heading);
	font-weight: var(--bmk-font-weight-bold);
}

h1 { font-size: var(--bmk-font-size-4xl); }
h2 { font-size: var(--bmk-font-size-3xl); }
h3 { font-size: var(--bmk-font-size-2xl); }
h4 { font-size: var(--bmk-font-size-xl); }
h5, h6 { font-size: var(--bmk-font-size-lg); }

a {
	color: var(--bmk-color-primary);
	transition: color var(--bmk-transition-fast);
}

a:hover,
a:focus {
	color: var(--bmk-color-primary-dark);
}

/* -------------------------------------------------------------------- */
/* Buttons                                                              */
/* -------------------------------------------------------------------- */

.bmk-button,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: var(--bmk-space-2xs);
	font-family: var(--bmk-font-body);
	font-weight: var(--bmk-font-weight-medium);
	font-size: var(--bmk-font-size-base);
	padding: var(--bmk-space-sm) var(--bmk-space-md);
	border-radius: var(--bmk-radius-md);
	background-color: var(--bmk-color-primary);
	color: #fff;
	border: 1px solid transparent;
	text-decoration: none;
	transition: background-color var(--bmk-transition-fast), transform var(--bmk-transition-fast);
}

.bmk-button:hover,
.wp-block-button__link:hover {
	background-color: var(--bmk-color-primary-dark);
	color: #fff;
	transform: translateY(-1px);
}

.bmk-button--accent {
	background-color: var(--bmk-color-accent);
}

.bmk-button--accent:hover {
	background-color: var(--bmk-color-accent-dark);
}

.bmk-button--outline {
	background-color: transparent;
	color: var(--bmk-color-primary);
	border-color: var(--bmk-color-primary);
}

.bmk-button--outline:hover {
	background-color: var(--bmk-color-primary);
	color: #fff;
}

/* -------------------------------------------------------------------- */
/* Cards                                                                */
/* -------------------------------------------------------------------- */

.bmk-card {
	background-color: var(--bmk-color-surface);
	border: 1px solid var(--bmk-color-border);
	border-radius: var(--bmk-radius-lg);
	box-shadow: var(--bmk-shadow-sm);
	overflow: hidden;
	transition: box-shadow var(--bmk-transition-base), transform var(--bmk-transition-base);
}

.bmk-card:hover {
	box-shadow: var(--bmk-shadow-md);
	transform: translateY(-2px);
}

.bmk-card__media img {
	display: block;
	width: 100%;
	height: auto;
}

.bmk-card__body {
	padding: var(--bmk-space-md);
}

.bmk-card__title {
	margin: 0 0 var(--bmk-space-xs);
}

.bmk-card__meta {
	font-size: var(--bmk-font-size-sm);
	color: var(--bmk-color-text-muted);
}

/* -------------------------------------------------------------------- */
/* Forms                                                                */
/* -------------------------------------------------------------------- */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="number"],
textarea,
select {
	font-family: var(--bmk-font-body);
	font-size: var(--bmk-font-size-base);
	padding: var(--bmk-space-xs) var(--bmk-space-sm);
	border: 1px solid var(--bmk-color-border);
	border-radius: var(--bmk-radius-sm);
	background-color: var(--bmk-color-surface);
	color: var(--bmk-color-text);
	transition: border-color var(--bmk-transition-fast);
}

input:focus,
textarea:focus,
select:focus {
	border-color: var(--bmk-color-primary);
	outline: 2px solid var(--bmk-color-primary-light);
	outline-offset: 1px;
}