/* =========================================================
   KUMIRU BASE CSS
   Variables, reset, typography, accessibility
   ========================================================= */
:root {
	--bg: #f8f7f4;
	--surface: #f0eee9;
	--text: #1a1a1a;
	--text-light: #6b6560;
	--primary: #1a1a1a;
	--primary-hover: #333333;
	--border: #d4d0c8;
	--accent: #b8865c;

	--danger: #c0392b;
	--danger-bg: #fdf0ed;
	--success: #3d8b4f;
	--success-bg: #edf5ef;
	--warning: #b8861e;
	--warning-bg: #fdf6ed;
	--info: #4a7ba7;
	--info-bg: #edf3f8;

	--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
	--shadow-md: 0 4px 8px rgba(0, 0, 0, 0.08);
	--shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.1);

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

	--transition: 0.2s ease;
	--container: 1280px;
	--header-height: 72px;
}

/* ========== FONT IMPORTS ========== */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Montserrat:wght@600;700;800&display=swap");

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	min-width: 0;
}

html {
	scroll-behavior: smooth;
}

body {
	font-family:
		"Inter",
		-apple-system,
		BlinkMacSystemFont,
		sans-serif;
	background: var(--bg);
	color: var(--text);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
	letter-spacing: -0.02em;
}

img,
picture,
video,
canvas,
svg {
	max-width: 100%;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
}

button,
input,
textarea,
select {
	font: inherit;
}

button,
a {
	-webkit-tap-highlight-color: transparent;
}

button {
	cursor: pointer;
}

ul,
ol {
	list-style: none;
}

main {
	min-height: 60vh;
}

:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.container {
	width: min(100% - 32px, var(--container));
	margin-inline: auto;
}

.page-shell {
	padding: 40px 0 60px;
}

.page-title {
	font-size: clamp(1.6rem, 3vw, 2rem);
	font-family: "Montserrat", sans-serif;
	font-weight: 800;
	color: var(--text);
	line-height: 1.2;
	margin-bottom: 16px;
}

.section-label,
.section-mini-label,
.hero-label {
	display: inline-block;
	margin-bottom: 8px;
	padding: 6px 12px;
	border-radius: var(--radius-full);
	background: var(--surface);
	color: var(--accent);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	font-family: "Inter", sans-serif;
}

@media (max-width: 768px) {
	:root {
		--header-height: 64px;
	}

	.container {
		width: min(100% - 20px, var(--container));
	}
}

@media (max-width: 980px) {
	.section-header,
	.detail-header,
	.commission-card-header,
	.order-card-header,
	.cart-item,
	.checkout-summary,
	.detail-actions,
	.form-actions,
	.address-header,
	.profile-header {
		flex-wrap: wrap;
		gap: 12px;
	}

	.profile-grid,
	.status-grid,
	.detail-grid,
	.checkout-grid,
	.cart-grid,
	.shop-grid,
	.gallery-grid,
	.about-grid,
	.contact-grid,
	.request-return-grid,
	.form-grid {
		grid-template-columns: 1fr !important;
	}

	.form-row,
	.form-row.three-col,
	.grid-two-col,
	.grid-three-col {
		grid-template-columns: 1fr !important;
	}
}

@media (max-width: 640px) {
	.status-grid,
	.profile-grid,
	.detail-grid,
	.checkout-grid,
	.cart-grid,
	.shop-grid,
	.gallery-grid,
	.about-grid,
	.contact-grid,
	.request-return-grid,
	.form-grid {
		grid-template-columns: 1fr !important;
	}

	.order-item,
	.commission-item,
	.cart-item,
	.product-card,
	.product-info,
	.checkout-summary,
	.profile-header {
		flex-direction: column;
		align-items: stretch;
	}

	.section-header,
	.detail-header,
	.commission-card-header,
	.order-card-header,
	.detail-actions,
	.form-actions,
	.address-header {
		flex-direction: column;
		align-items: stretch;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}