/**
 * Tokens de diseño, reset y estilos base.
 * Paleta extraída del frame "Paleta de color - HT" (Figma nodeId 295:337).
 */

:root {
	/* Paleta cruda extraída de Figma */
	--ht-green-900: #103010;
	--ht-green-700: #265626;
	--ht-green-500: #3b743b;
	--ht-terracotta: #c42d1c;
	--ht-orange: #f15f06;
	--ht-amber: #ef8e01;
	--ht-blue: #0038bd;
	--ht-blue-light: #80bfde;
	--ht-tan: #bc9b68;
	--ht-tan-light: #decaab;
	--ht-brown: #4d4137;
	--ht-brown-light: #7f766e;
	--ht-cream: #ece6da;
	--ht-cream-light: #f9f4f0;
	--ht-white: #ffffff;
	--ht-black: #000000;

	/* Roles semánticos */
	--ht-color-primary: var(--ht-green-700);
	--ht-color-primary-dark: var(--ht-green-900);
	--ht-color-primary-mid: var(--ht-green-500);
	--ht-color-accent: var(--ht-terracotta);
	--ht-color-warning: var(--ht-amber);
	--ht-color-info: var(--ht-blue);
	--ht-color-tan: var(--ht-tan);
	--ht-color-tan-light: var(--ht-tan-light);
	--ht-color-bg: var(--ht-cream-light);
	--ht-color-bg-alt: var(--ht-cream);
	--ht-color-text: var(--ht-brown);
	--ht-color-text-muted: var(--ht-brown-light);
	--ht-color-surface: var(--ht-white);
	--ht-color-border: #e3dccb;

	/* Tipografía. SK Seren requiere licencia, ver assets/fonts/sk-seren/LEEME.txt */
	--ht-font-heading: 'SK Seren', 'Fraunces Fallback', Georgia, serif;
	--ht-font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
	--ht-font-ui: 'Figtree', -apple-system, BlinkMacSystemFont, sans-serif;

	/* Radios */
	--ht-radius-sm: 8px;
	--ht-radius-md: 16px;
	--ht-radius-lg: 24px;
	--ht-radius-xl: 32px;
	--ht-radius-pill: 130px;

	/* Sombras extraídas de variables de Figma */
	--ht-shadow-can: 0 17px 8px rgba(174, 164, 149, 0.54);
	--ht-shadow-soft: 0 4px 4px rgba(170, 164, 159, 0.16);
	--ht-shadow-inner-category: inset 0 7px 2.5px rgba(0, 0, 0, 0.16);
	--ht-shadow-inner-soft: inset 0 4px 4px rgba(204, 196, 185, 0.45);
	--ht-stroke-button: rgba(255, 255, 255, 0.22);

	/* Layout */
	--ht-container-max: 1440px;
	--ht-container-inner: 1328px;
	--ht-gutter: 56px;
	--ht-gutter-tablet: 32px;
	--ht-gutter-mobile: 20px;
	--ht-header-height: 90px;
	--ht-category-bar-height: 37px;

	/* Transiciones */
	--ht-transition-fast: 150ms ease;
	--ht-transition-base: 220ms ease;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--ht-transition-fast: 0ms;
		--ht-transition-base: 0ms;
	}
}

/* ---------- Reset ---------- */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	overflow-x: clip;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	margin: 0;
	background: var(--ht-color-bg);
	color: var(--ht-color-text);
	font-family: var(--ht-font-body);
	font-size: 16px;
	line-height: 1.5;
	overflow-x: hidden;
}

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

img {
	height: auto;
}

button {
	font-family: inherit;
}

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

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 0.5em;
	font-family: var(--ht-font-heading);
	font-weight: 700;
	line-height: 1.15;
	color: var(--ht-color-primary-dark);
}

p {
	margin: 0 0 1em;
}

button,
input,
select,
textarea {
	font-size: 1rem;
}

/* ---------- Accesibilidad ---------- */

.ht-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 10000;
	padding: 12px 20px;
	background: var(--ht-color-primary-dark);
	color: var(--ht-white);
	border-radius: 0 0 var(--ht-radius-sm) 0;
}

.ht-skip-link:focus {
	left: 0;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

:focus-visible {
	outline: 3px solid var(--ht-orange);
	outline-offset: 2px;
}

/* ---------- Layout utilitario ---------- */

.ht-container {
	width: 100%;
	max-width: var(--ht-container-inner);
	margin-inline: auto;
	padding-inline: var(--ht-gutter);
}

.ht-container--wide {
	max-width: var(--ht-container-max);
}

@media (max-width: 1024px) {
	.ht-container {
		padding-inline: var(--ht-gutter-tablet);
	}
}

@media (max-width: 599px) {
	.ht-container {
		padding-inline: var(--ht-gutter-mobile);
	}
}

.ht-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
}

/* ---------- Tipografía ---------- */

.ht-eyebrow {
	font-family: var(--ht-font-ui);
	font-weight: 600;
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ht-color-primary-mid);
}

.ht-section-title {
	font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
	letter-spacing: -0.02em;
}

.ht-lede {
	font-size: 1.125rem;
	color: var(--ht-color-text-muted);
}

/* ---------- Botones ---------- */

.ht-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 48px;
	padding: 0 24px;
	border: 1px solid transparent;
	border-radius: var(--ht-radius-pill);
	font-family: var(--ht-font-body);
	font-weight: 600;
	font-size: 0.9375rem;
	letter-spacing: -0.02em;
	cursor: pointer;
	text-align: center;
	transition: transform var(--ht-transition-fast), background-color var(--ht-transition-fast), box-shadow var(--ht-transition-fast);
	white-space: nowrap;
}

.ht-btn:active {
	transform: scale(0.98);
}

.ht-btn--primary {
	background: var(--ht-color-primary-mid);
	border-color: var(--ht-stroke-button);
	color: var(--ht-white);
}

.ht-btn--primary:hover {
	background: var(--ht-color-primary);
}

.ht-btn--dark {
	background: var(--ht-color-primary-dark);
	border-color: var(--ht-stroke-button);
	color: var(--ht-white);
}

.ht-btn--dark:hover {
	background: #0a220a;
}

.ht-btn--outline {
	background: transparent;
	border-color: var(--ht-color-primary-mid);
	color: var(--ht-color-primary-mid);
}

.ht-btn--outline:hover {
	background: var(--ht-color-primary-mid);
	color: var(--ht-white);
}

.ht-btn--light {
	background: var(--ht-color-bg-alt);
	color: var(--ht-color-primary-dark);
}

.ht-btn--light:hover {
	background: var(--ht-white);
}

.ht-btn--outline-light {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.6);
	color: var(--ht-white);
}

.ht-btn--outline-light:hover {
	background: rgba(255, 255, 255, 0.15);
}

.ht-btn--accent {
	background: var(--ht-color-accent);
	color: var(--ht-white);
}

.ht-btn--accent:hover {
	background: #a3230f;
}

.ht-btn--sm {
	height: 40px;
	padding: 0 18px;
	font-size: 0.875rem;
}

.ht-btn--block {
	width: 100%;
}

.ht-btn:disabled,
.ht-btn.is-disabled {
	background: var(--ht-color-border);
	color: var(--ht-color-text-muted);
	border-color: transparent;
	cursor: not-allowed;
	transform: none;
}

.ht-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: transparent;
	border: none;
	cursor: pointer;
	color: currentColor;
	transition: background-color var(--ht-transition-fast);
}

.ht-icon-btn:hover {
	background: rgba(255, 255, 255, 0.12);
}

.ht-icon-btn svg {
	width: 22px;
	height: 22px;
}

/* ---------- Migas de pan ---------- */

.ht-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	font-family: var(--ht-font-ui);
	font-size: 0.875rem;
	color: var(--ht-color-text-muted);
}

.ht-breadcrumbs__item {
	display: flex;
	align-items: center;
	gap: 8px;
}

.ht-breadcrumbs__item a {
	color: var(--ht-color-primary-mid);
}

.ht-breadcrumbs__item a:hover {
	text-decoration: underline;
}

/* ---------- Etiquetas / badges ---------- */

.ht-badge {
	display: inline-flex;
	align-items: center;
	height: 26px;
	padding: 0 12px;
	border-radius: var(--ht-radius-pill);
	font-family: var(--ht-font-ui);
	font-weight: 600;
	font-size: 0.75rem;
	letter-spacing: 0.01em;
	color: var(--ht-white);
}

.ht-badge--new {
	background: var(--ht-color-primary-mid);
}

.ht-badge--sale {
	background: var(--ht-color-accent);
}

.ht-badge--out {
	background: var(--ht-green-900);
}

.ht-badge--featured {
	background: var(--ht-amber);
}

/* ---------- Estados vacíos ---------- */

.ht-empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 16px;
	padding: 80px var(--ht-gutter-mobile);
	max-width: 480px;
	margin-inline: auto;
}

.ht-empty-state img,
.ht-empty-state svg {
	width: 120px;
	height: 120px;
	opacity: 0.8;
}

/* ---------- Lista genérica (index.php / search.php sin productos) ---------- */

.ht-generic-list {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin-top: 24px;
}

.ht-generic-list__item {
	padding-bottom: 24px;
	border-bottom: 1px solid var(--ht-color-border);
}

.ht-generic-list__item h2 {
	margin-bottom: 8px;
	font-size: 1.25rem;
}

/* ---------- Formularios ---------- */

.ht-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 16px;
}

.ht-field label {
	font-family: var(--ht-font-ui);
	font-weight: 600;
	font-size: 0.875rem;
}

.ht-field input,
.ht-field select,
.ht-field textarea {
	border: 1px solid var(--ht-color-border);
	border-radius: var(--ht-radius-sm);
	padding: 12px 16px;
	background: var(--ht-white);
	color: var(--ht-color-text);
}

.ht-field input:focus,
.ht-field select:focus,
.ht-field textarea:focus {
	border-color: var(--ht-color-primary-mid);
}