/**
 * base.css
 * --------
 * Design tokens, reset, containers, typography, and base button/form styles.
 * Skin swaps should primarily change --wrb-* variables (via theme.json / this file).
 */

/* ==========================================================================
   1. Design tokens
   ========================================================================== */

:root {
	/* Layout */
	--wrb-container-width: var(--wp--custom--layout--container-width, 1280px);
	--wrb-wide-width: var(--wp--custom--layout--wide-width, 1440px);
	--wrb-header-height: var(--wp--custom--layout--header-height, 4rem);
	--wrb-announcement-height: var(--wp--custom--layout--announcement-height, 2.5rem);

	/* Colors */
	--wrb-color-background: var(--wp--preset--color--background, #ffffff);
	--wrb-color-foreground: var(--wp--preset--color--foreground, #111111);
	--wrb-color-muted: var(--wp--preset--color--muted, #6b6b6b);
	--wrb-color-border: var(--wp--preset--color--border, #e2e2e2);
	--wrb-color-primary: var(--wp--preset--color--primary, #1a1a1a);
	--wrb-color-secondary: var(--wp--preset--color--secondary, #4a4a4a);
	--wrb-color-accent: var(--wp--preset--color--accent, #2563eb);
	--wrb-color-success: var(--wp--preset--color--success, #1f7a3f);
	--wrb-color-warning: var(--wp--preset--color--warning, #b7791f);
	--wrb-color-error: var(--wp--preset--color--error, #b42318);
	--wrb-color-surface: var(--wp--custom--color--surface, #f5f5f5);
	--wrb-color-overlay: var(--wp--custom--color--overlay, rgba(0, 0, 0, 0.45));

	/* Spacing */
	--wrb-spacing-xs: var(--wp--preset--spacing--xs, 0.5rem);
	--wrb-spacing-sm: var(--wp--preset--spacing--sm, 0.75rem);
	--wrb-spacing-md: var(--wp--preset--spacing--md, 1.25rem);
	--wrb-spacing-lg: var(--wp--preset--spacing--lg, 2rem);
	--wrb-spacing-xl: var(--wp--preset--spacing--xl, 3rem);
	--wrb-spacing-2xl: var(--wp--preset--spacing--2-xl, var(--wp--preset--spacing--2xl, 4.5rem));

	/* Radius */
	--wrb-radius-sm: var(--wp--custom--radius--sm, 4px);
	--wrb-radius-md: var(--wp--custom--radius--md, 8px);
	--wrb-radius-lg: var(--wp--custom--radius--lg, 16px);
	--wrb-radius-full: var(--wp--custom--radius--full, 999px);

	/* Motion */
	--wrb-transition: var(--wp--custom--transition, 200ms ease);

	/* Product media */
	--wrb-product-image-ratio: var(--wp--custom--product--image-ratio, 1 / 1);

	/* Header style tokens (overridden by /styles/*.json) */
	--wrb-header-announcement-transform: var(--wp--custom--header--announcement-transform, none);
	--wrb-header-announcement-letter-spacing: var(--wp--custom--header--announcement-letter-spacing, 0);
	--wrb-header-announcement-weight: var(--wp--custom--header--announcement-weight, 500);
	--wrb-header-nav-letter-spacing: var(--wp--custom--header--nav-letter-spacing, 0);
	--wrb-header-nav-transform: var(--wp--custom--header--nav-transform, none);
	--wrb-header-border-width: var(--wp--custom--header--border-width, 1px);

	/* Product card style tokens */
	--wrb-product-card-border-width: var(--wp--custom--product-card--border-width, 1px);
	--wrb-product-card-hover-lift: var(--wp--custom--product-card--hover-lift, 0 6px 20px rgba(0, 0, 0, 0.06));

	/* Catalog grid (overridden in responsive.css) */
	--wrb-grid-columns: 4;
}

/* ==========================================================================
   2. Reset / box model
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	color: var(--wrb-color-foreground);
	background-color: var(--wrb-color-background);
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* Do not fight the HTML `hidden` attribute (Mini Cart uses it). */
img[hidden],
a[hidden] {
	display: none;
}

/* ==========================================================================
   3. Global containers
   ========================================================================== */

.wrb-container {
	width: min(100%, var(--wrb-container-width));
	margin-inline: auto;
	padding-inline: var(--wrb-spacing-md);
}

.wrb-container--wide {
	width: min(100%, var(--wrb-wide-width));
}

.wrb-page,
.wrb-product-archive,
.wrb-single-product,
.wrb-front-page {
	width: 100%;
	padding-block: var(--wrb-spacing-lg) var(--wrb-spacing-xl);
	padding-inline: var(--wrb-spacing-md);
}

.wrb-footer {
	margin-top: var(--wrb-spacing-xl);
	padding-block: var(--wrb-spacing-xl) var(--wrb-spacing-lg);
	padding-inline: var(--wrb-spacing-md);
	background-color: var(--wrb-color-surface);
	color: var(--wrb-color-foreground);
}

/* ==========================================================================
   4. Typography
   ========================================================================== */

.wrb-page,
.wrb-product-archive,
.wrb-single-product,
.wrb-header,
.wrb-footer {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.6;
}

.wrb-page h1,
.wrb-page h2,
.wrb-page h3,
.wrb-product-archive h1,
.wrb-product-archive h2,
.wrb-product-archive h3,
.wrb-single-product h1,
.wrb-single-product h2,
.wrb-single-product h3 {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	line-height: 1.25;
	color: var(--wrb-color-foreground);
}

.wrb-text-muted {
	color: var(--wrb-color-muted);
}

/* ==========================================================================
   5. Links
   ========================================================================== */

.wrb-page a,
.wrb-product-archive a,
.wrb-single-product a {
	color: var(--wrb-color-primary);
	transition: color var(--wrb-transition);
}

.wrb-page a:hover,
.wrb-product-archive a:hover,
.wrb-single-product a:hover {
	color: var(--wrb-color-accent);
}

/* ==========================================================================
   6. Buttons (base)
   ========================================================================== */

.wrb-button,
.wrb-page .wp-element-button,
.wrb-product-archive .wp-element-button,
.wrb-single-product .wp-element-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.75rem 1.25rem;
	border: 1px solid transparent;
	border-radius: var(--wrb-radius-md);
	background-color: var(--wrb-color-primary);
	color: var(--wrb-color-background);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	line-height: 1.25;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color var(--wrb-transition),
		color var(--wrb-transition),
		border-color var(--wrb-transition);
}

.wrb-button:hover,
.wrb-page .wp-element-button:hover,
.wrb-product-archive .wp-element-button:hover,
.wrb-single-product .wp-element-button:hover {
	background-color: var(--wrb-color-secondary);
	color: var(--wrb-color-background);
}

.wrb-button--outline,
.wrb-page .is-style-outline .wp-element-button,
.wrb-header .is-style-outline .wp-element-button {
	background-color: transparent;
	border-color: var(--wrb-color-border);
	color: var(--wrb-color-foreground);
}

.wrb-button--outline:hover,
.wrb-page .is-style-outline .wp-element-button:hover,
.wrb-header .is-style-outline .wp-element-button:hover {
	border-color: var(--wrb-color-foreground);
	background-color: transparent;
	color: var(--wrb-color-foreground);
}

/* ==========================================================================
   7. Forms (scoped — avoid global Woo overrides)
   ========================================================================== */

.wrb-header input,
.wrb-header select,
.wrb-header textarea,
.wrb-mobile-menu input,
.wrb-mobile-menu select,
.wrb-product-archive input,
.wrb-product-archive select,
.wrb-single-buy input,
.wrb-single-buy select {
	width: 100%;
	max-width: 100%;
	padding: 0.6rem 0.75rem;
	color: var(--wrb-color-foreground);
	background-color: var(--wrb-color-background);
	border: 1px solid var(--wrb-color-border);
	border-radius: var(--wrb-radius-sm);
	font: inherit;
	transition: border-color var(--wrb-transition);
}

.wrb-header input:focus,
.wrb-header select:focus,
.wrb-header textarea:focus,
.wrb-mobile-menu input:focus,
.wrb-product-archive input:focus,
.wrb-single-buy input:focus,
.wrb-single-buy select:focus {
	outline: 2px solid var(--wrb-color-accent);
	outline-offset: 1px;
	border-color: var(--wrb-color-accent);
}

/* ==========================================================================
   8. Utility
   ========================================================================== */

.wp-block-button.is-style-wrb-full-width .wp-element-button,
.wp-block-button.is-style-wrb-full-width {
	width: 100%;
}

.wp-block-group.is-style-wrb-surface {
	background-color: var(--wrb-color-surface);
	border-radius: var(--wrb-radius-md);
	padding: var(--wrb-spacing-md);
}