/**
 * Mirrihue — Global Design System
 * Version: 0.3.0
 */

/* =========================================================
   TOKENS
   ========================================================= */

:root {

	/* Colors */
	--mh-color-primary: #d71920;
	--mh-color-primary-hover: #b9151b;

	--mh-color-black: #0d0d0d;
	--mh-color-dark: #171717;

	--mh-color-text: #252525;
	--mh-color-muted: #6b6b6b;

	--mh-color-border: #e5e5e5;
	--mh-color-surface: #f6f6f6;
	--mh-color-white: #ffffff;

	/* Typography */
	--mh-font-primary: Arial, Helvetica, sans-serif;

	/*
	 * =======================================================
	 * ESCALA TIPOGRÁFICA GLOBAL
	 * =======================================================
	 *
	 * Estos son los controles principales del sitio.
	 * Home, catálogo, header, footer y futuras páginas
	 * consumen estos mismos tokens.
	 *
	 * Si quieres aumentar un tipo de texto en TODO el sitio,
	 * modifica únicamente el valor correspondiente aquí.
	 */
	--mh-text-display: clamp(3rem, 6vw, 5.3rem);
	--mh-text-page-title: clamp(2.2rem, 3.5vw, 3.4rem);
	--mh-text-section-title: clamp(2.2rem, 3.5vw, 3.4rem);
	--mh-text-cta-title: clamp(1.45rem, 2vw, 2.1rem);
	--mh-text-card-title: 1.05rem;

	--mh-text-body-lg: 1.125rem;
	--mh-text-body: 1rem;
	--mh-text-body-sm: 0.875rem;

	--mh-text-ui: 0.8125rem;
	--mh-text-label: 0.75rem;
	--mh-text-micro: 0.6875rem;

	--mh-text-metric: clamp(2rem, 2.5vw, 2.6rem);
	--mh-text-brand: 1.6rem;

	/*
	 * Alias de compatibilidad.
	 * Permiten que componentes antiguos sigan funcionando mientras
	 * el proyecto migra completamente a la nomenclatura --mh-text-*.
	 */
	--mh-type-display: var(--mh-text-display);
	--mh-type-section-title: var(--mh-text-section-title);
	--mh-type-cta-title: var(--mh-text-cta-title);
	--mh-type-card-title: var(--mh-text-card-title);
	--mh-type-body-lg: var(--mh-text-body-lg);
	--mh-type-body: var(--mh-text-body);
	--mh-type-body-sm: var(--mh-text-body-sm);
	--mh-type-label: var(--mh-text-ui);
	--mh-type-caption: var(--mh-text-label);
	--mh-type-micro: var(--mh-text-micro);
	--mh-type-metric: var(--mh-text-metric);
	--mh-type-brand: var(--mh-text-brand);

	--mh-font-size-xs: var(--mh-text-label);
	--mh-font-size-sm: var(--mh-text-body-sm);
	--mh-font-size-base: var(--mh-text-body);
	--mh-font-size-md: var(--mh-text-body-lg);
	--mh-font-size-lg: 1.5rem;
	--mh-font-size-xl: 2rem;
	--mh-font-size-2xl: 3rem;
	--mh-font-size-3xl: 4rem;

	/* Line heights */
	--mh-line-height-tight: 1.1;
	--mh-line-height-heading: 1.2;
	--mh-line-height-body: 1.6;

	/* Font weights */
	--mh-font-weight-regular: 400;
	--mh-font-weight-medium: 500;
	--mh-font-weight-semibold: 600;
	--mh-font-weight-bold: 700;

	/* Spacing */
	--mh-space-1: 0.25rem;
	--mh-space-2: 0.5rem;
	--mh-space-3: 0.75rem;
	--mh-space-4: 1rem;
	--mh-space-5: 1.5rem;
	--mh-space-6: 2rem;
	--mh-space-7: 3rem;
	--mh-space-8: 4rem;
	--mh-space-9: 5rem;
	--mh-space-10: 7.5rem;

	/* Layout */
	--mh-container-width: 1280px;
	--mh-container-padding: 24px;

	/* Radius */
	--mh-radius-sm: 4px;
	--mh-radius-md: 8px;
	--mh-radius-lg: 12px;


	/*
	 * UI / COMPONENT TOKENS
	 * Valores compartidos por Home, Tienda y futuras plantillas.
	 * Cambiar aquí modifica todos los componentes que consuman el token.
	 */
	--mh-control-height-sm: 42px;
	--mh-control-height-md: 48px;
	--mh-control-height-lg: 52px;

	--mh-control-padding-inline: 12px;
	--mh-button-padding-inline: 24px;

	--mh-card-padding: 18px;
	--mh-card-gap: 18px;

	--mh-section-space: 80px;
	--mh-section-space-mobile: 52px;

	--mh-radius-pill: 999px;

	--mh-shadow-card-hover: 0 16px 40px rgba(0, 0, 0, 0.10);
	--mh-focus-ring: 0 0 0 3px rgba(215, 25, 32, 0.18);

	/* Transitions */
	--mh-transition-fast: 160ms ease;
	--mh-transition-base: 250ms ease;

}


/* =========================================================
   BASE
   ========================================================= */

html {
	box-sizing: border-box;
	scroll-behavior: smooth;
}

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


/*
 * Normalización mínima.
 * Evita diferencias innecesarias entre navegadores sin depender
 * de una librería externa como normalize.css.
 */
button,
input,
select,
textarea {
	margin: 0;
	color: inherit;
	font: inherit;
}

button,
select {
	text-transform: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

[hidden] {
	display: none !important;
}

body {
	margin: 0;
	color: var(--mh-color-text);
	background: var(--mh-color-white);
	font-family: var(--mh-font-primary);
	font-size: var(--mh-font-size-base);
	line-height: var(--mh-line-height-body);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

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


/* =========================================================
   TYPOGRAPHY
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
	margin-top: 0;
	color: var(--mh-color-black);
	font-weight: var(--mh-font-weight-bold);
	line-height: var(--mh-line-height-heading);
}

h1 {
	font-size: var(--mh-text-page-title);
}

h2 {
	font-size: var(--mh-text-section-title);
}

h3 {
	font-size: var(--mh-text-card-title);
}

h4 {
	font-size: var(--mh-text-body-lg);
}

h5 {
	font-size: var(--mh-text-body);
}

h6 {
	font-size: var(--mh-text-body-sm);
}

p {
	margin-top: 0;
	font-size: var(--mh-text-body);
}

/*
 * Utilidades tipográficas globales.
 */
.mh-text-display {
	font-size: var(--mh-text-display);
}

.mh-text-page-title {
	font-size: var(--mh-text-page-title);
}

.mh-text-section-title {
	font-size: var(--mh-text-section-title);
}

.mh-text-cta-title {
	font-size: var(--mh-text-cta-title);
}

.mh-text-card-title {
	font-size: var(--mh-text-card-title);
}

.mh-text-body-lg {
	font-size: var(--mh-text-body-lg);
}

.mh-text-body {
	font-size: var(--mh-text-body);
}

.mh-text-body-sm {
	font-size: var(--mh-text-body-sm);
}

.mh-text-ui {
	font-size: var(--mh-text-ui);
}

.mh-text-label {
	font-size: var(--mh-text-label);
}


/* =========================================================
   LINKS
   ========================================================= */

a {
	color: inherit;
	text-decoration: none;
	transition:
		color var(--mh-transition-fast),
		background-color var(--mh-transition-fast),
		border-color var(--mh-transition-fast);
}


/* =========================================================
   LAYOUT
   ========================================================= */

.mh-container {
	width: min(
		calc(100% - (var(--mh-container-padding) * 2)),
		var(--mh-container-width)
	);
	margin-inline: auto;
}

.mh-section {
	padding-block: var(--mh-section-space);
}


/* =========================================================
   FORM CONTROLS
   ========================================================= */

.mh-form-control {
	width: 100%;
	min-height: var(--mh-control-height-sm);
	padding-inline: var(--mh-control-padding-inline);

	color: var(--mh-color-text);
	background: var(--mh-color-white);

	border: 1px solid var(--mh-color-border);
	border-radius: var(--mh-radius-sm);

	font-family: inherit;
	font-size: var(--mh-text-ui);
	line-height: 1.35;

	transition:
		border-color var(--mh-transition-fast),
		box-shadow var(--mh-transition-fast);
}

.mh-form-control:focus {
	outline: none;
	border-color: var(--mh-color-primary);
	box-shadow: var(--mh-focus-ring);
}

textarea.mh-form-control {
	min-height: 120px;
	padding-block: 12px;
	resize: vertical;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.mh-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;

	min-height: var(--mh-control-height-md);
	padding: 0.75rem var(--mh-button-padding-inline);

	border: 1px solid transparent;
	border-radius: var(--mh-radius-sm);

	font-size: var(--mh-text-ui);
	font-weight: var(--mh-font-weight-bold);
	line-height: 1;

	cursor: pointer;

	transition:
		background-color var(--mh-transition-base),
		border-color var(--mh-transition-base),
		color var(--mh-transition-base),
		transform var(--mh-transition-base);
}

.mh-button:hover {
	transform: translateY(-1px);
}

.mh-button--primary {
	color: var(--mh-color-white);
	background: var(--mh-color-primary);
}

.mh-button--primary:hover {
	color: var(--mh-color-white);
	background: var(--mh-color-primary-hover);
}

.mh-button--outline {
	color: var(--mh-color-white);
	background: transparent;
	border-color: rgba(255, 255, 255, 0.5);
}

.mh-button--outline:hover {
	color: var(--mh-color-white);
	border-color: var(--mh-color-white);
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

:focus-visible {
	outline: 3px solid var(--mh-color-primary);
	outline-offset: 3px;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 768px) {

	:root {
		--mh-container-padding: 20px;
		--mh-text-display: clamp(2.7rem, 13vw, 4.2rem);
		--mh-text-page-title: clamp(2rem, 8vw, 3rem);
		--mh-text-section-title: clamp(2rem, 8vw, 3rem);
		--mh-text-metric: 2rem;
	}

	.mh-section {
		padding-block: var(--mh-section-space-mobile);
	}

}