/*
 * BuildBarn Design System v2
 * Global tokens + component contract + page-family shells.
 */

html {
	--bb-font-sans: "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--bb-font-heading: "Manrope", "Inter", "Segoe UI", sans-serif;
	--bb-font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

	--bb-fs-xs: 0.76rem;
	--bb-fs-sm: 0.88rem;
	--bb-fs-md: 1rem;
	--bb-fs-lg: 1.12rem;
	--bb-fs-xl: 1.34rem;
	--bb-fs-2xl: clamp(1.58rem, 2.4vw, 2.2rem);
	--bb-fs-3xl: clamp(1.95rem, 3.2vw, 3.1rem);

	--bb-space-1: 0.25rem;
	--bb-space-2: 0.5rem;
	--bb-space-3: 0.75rem;
	--bb-space-4: 1rem;
	--bb-space-5: 1.25rem;
	--bb-space-6: 1.5rem;
	--bb-space-7: 1.85rem;
	--bb-space-8: 2.4rem;

	--bb-focus-ring: 0 0 0 3px rgba(69, 69, 69, 0.2);
	--bb-action-primary-bg: linear-gradient(135deg, #5f5953 0%, #454545 100%);
	--bb-action-primary-bg-hover: linear-gradient(135deg, #4f4a45 0%, #353535 100%);
	--bb-action-primary-border: rgba(69, 69, 69, 0.24);
	--bb-action-primary-text: #ffffff;
	--bb-action-secondary-bg: #ffffff;
	--bb-action-secondary-border: var(--bb-border-soft, #d9d6d2);
	--bb-action-secondary-text: var(--bb-text-primary, #241f1a);
}

html body {
	font-family: var(--bb-font-sans);
	font-size: var(--bb-fs-md);
	line-height: 1.62;
	color: var(--bb-text-primary, #241f1a);
}

html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6 {
	font-family: var(--bb-font-heading);
	letter-spacing: -0.015em;
	line-height: 1.22;
	color: var(--bb-text-primary, #241f1a);
}

html body p,
html body li,
html body .woocommerce-product-details__short-description {
	color: var(--bb-text-secondary, #625a52);
}

html body a {
	color: var(--bb-brand-primary, #454545);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

html body a:hover {
	color: var(--bb-brand-accent-strong, #564d44);
}

html body a:focus-visible,
html body button:focus-visible,
html body input:focus-visible,
html body select:focus-visible,
html body textarea:focus-visible {
	outline: none;
	box-shadow: var(--bb-focus-ring);
}

html body .button,
html body .btn,
html body button.button,
html body .woocommerce a.button,
html body .woocommerce button.button,
html body .woocommerce input.button,
html body .bb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	min-height: 44px;
	padding: 0.68rem 1.12rem;
	border: 1px solid var(--bb-action-primary-border);
	border-radius: var(--bb-radius-md, 14px);
	background: var(--bb-action-primary-bg);
	color: var(--bb-action-primary-text);
	font-weight: 700;
	font-size: var(--bb-fs-sm);
	line-height: 1.1;
	text-decoration: none;
	box-shadow: var(--bb-shadow-sm, 0 8px 22px rgba(42, 42, 42, 0.05));
	transition: transform 0.16s ease, box-shadow 0.2s ease, background 0.2s ease;
}

html body .button:hover,
html body .btn:hover,
html body button.button:hover,
html body .woocommerce a.button:hover,
html body .woocommerce button.button:hover,
html body .woocommerce input.button:hover,
html body .bb-btn:hover {
	background: var(--bb-action-primary-bg-hover);
	color: #ffffff;
	transform: translateY(-1px);
	box-shadow: var(--bb-shadow-md, 0 16px 40px rgba(42, 42, 42, 0.08));
}

html body .button.alt,
html body .btn-outline,
html body .bb-btn--secondary {
	background: var(--bb-action-secondary-bg) !important;
	color: var(--bb-action-secondary-text) !important;
	border-color: var(--bb-action-secondary-border) !important;
	box-shadow: none !important;
}

html body input[type="text"],
html body input[type="email"],
html body input[type="tel"],
html body input[type="number"],
html body input[type="password"],
html body select,
html body textarea {
	border: 1px solid var(--bb-border-soft, #d9d6d2);
	border-radius: var(--bb-radius-sm, 10px);
	background: var(--bb-bg-card, #ffffff);
	color: var(--bb-text-primary, #241f1a);
}

html body .shop_table,
html body table.shop_table,
html body .woocommerce table.shop_table {
	border: 1px solid var(--bb-border-soft, #d9d6d2);
	border-radius: var(--bb-radius-lg, 18px);
	overflow: hidden;
	background: var(--bb-bg-card, #ffffff);
	box-shadow: var(--bb-shadow-sm, 0 8px 22px rgba(42, 42, 42, 0.05));
}

html body .page-top {
	background: var(--bb-bg-card, #ffffff);
	border-bottom: 1px solid var(--bb-border-soft, #d9d6d2);
}

html body .breadcrumbs-wrap,
html body .breadcrumb,
html body .woocommerce-breadcrumb {
	color: var(--bb-text-muted, #7a7169);
}

html body .pagination .page-numbers,
html body .woocommerce-pagination .page-numbers li a,
html body .woocommerce-pagination .page-numbers li span {
	border: 1px solid var(--bb-border-soft, #d9d6d2);
	border-radius: 999px;
	background: var(--bb-bg-card, #ffffff);
	color: var(--bb-text-primary, #241f1a);
}

html body .pagination .page-numbers.current,
html body .woocommerce-pagination .page-numbers li span.current {
	background: var(--bb-brand-primary, #454545);
	border-color: var(--bb-brand-primary, #454545);
	color: #ffffff;
}

html body.woocommerce #main,
html body.blog #main,
html body.single-post #main,
html body.page:not(.home) #main {
	background: var(--bb-bg-page, #f5f5f3);
}

/* Shop/category family: strengthen scanning rhythm and card consistency. */
html body.post-type-archive-product ul.products li.product,
html body.tax-product_cat ul.products li.product,
html body.tax-product_tag ul.products li.product {
	border: 1px solid var(--bb-border-soft, #d9d6d2);
	border-radius: var(--bb-radius-lg, 18px);
	background: var(--bb-bg-card, #ffffff);
	box-shadow: var(--bb-shadow-sm, 0 8px 22px rgba(42, 42, 42, 0.05));
	padding: 0.8rem 0.8rem 1rem;
}

html body.post-type-archive-product ul.products li.product .price,
html body.tax-product_cat ul.products li.product .price {
	color: var(--bb-brand-accent-strong, #564d44);
	font-weight: 700;
}

/* PDP family: two-column premium shell on desktop. */
@media (min-width: 992px) {
	html body.single-product div.product {
		padding: 1.1rem;
		border: 1px solid var(--bb-border-soft, #d9d6d2);
		border-radius: var(--bb-radius-xl, 22px);
		background: var(--bb-bg-card, #ffffff);
		box-shadow: var(--bb-shadow-md, 0 16px 40px rgba(42, 42, 42, 0.08));
	}
}

/* Conversion family: narrow cognitive width for forms and totals. */
html body.woocommerce-cart .woocommerce,
html body.woocommerce-checkout .woocommerce,
html body.woocommerce-account .woocommerce {
	max-width: 1220px;
	margin: 0 auto;
}

/* Generic landing/content pages. */
html body.page:not(.home):not(.woocommerce-page):not(.single-post):not(.blog) article,
html body.page:not(.home):not(.woocommerce-page):not(.single-post):not(.blog) .entry-content {
	border: 1px solid var(--bb-border-soft, #d9d6d2);
	border-radius: var(--bb-radius-xl, 22px);
	background: var(--bb-bg-card, #ffffff);
	box-shadow: var(--bb-shadow-sm, 0 8px 22px rgba(42, 42, 42, 0.05));
}

html body.page:not(.home):not(.woocommerce-page):not(.single-post):not(.blog) .entry-content {
	padding: clamp(1rem, 2vw, 1.7rem);
}

/* Marketing/landing families: elevated hero + compact CTA rhythm. */
html body.page-template-default .vc_row:first-child,
html body.page-template .vc_row:first-child,
html body.page.page-template .vc_row:first-child {
	border-radius: var(--bb-radius-hero, 28px);
	border: 1px solid rgba(69, 69, 69, 0.12);
	background: linear-gradient(140deg, rgba(255, 255, 255, 0.96) 0%, rgba(245, 245, 243, 0.9) 100%);
	box-shadow: var(--bb-shadow-md, 0 16px 40px rgba(42, 42, 42, 0.08));
	padding: clamp(1rem, 2vw, 1.6rem);
}

@media (max-width: 991px) {
	html body .button,
	html body .btn,
	html body button.button,
	html body .woocommerce a.button,
	html body .woocommerce button.button,
	html body .woocommerce input.button,
	html body .bb-btn {
		width: 100%;
	}
}