/* ==========================================================================
   TOKENS · IV Anti Age Center
   Fuente única de paleta, tipografía y espaciado.
   ========================================================================== */

/* Fuentes self-hosted (OFL).
   Fraunces = fallback de Quincy CF (Fenotype, licencia comercial).
   Para cambiar a Quincy CF: reemplazar 'Fraunces' en --font-heading únicamente. */
@font-face {
	font-family: 'Fraunces';
	src: url('../fonts/fraunces/Fraunces-Variable.woff2') format('woff2');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Fraunces';
	src: url('../fonts/fraunces/Fraunces-Italic-Variable.woff2') format('woff2');
	font-weight: 100 900;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: 'Montserrat';
	src: url('../fonts/montserrat/Montserrat-Variable.woff2') format('woff2');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Montserrat';
	src: url('../fonts/montserrat/Montserrat-Italic-Variable.woff2') format('woff2');
	font-weight: 100 900;
	font-style: italic;
	font-display: swap;
}

:root {
	/* --- Paleta de marca --- */
	--cream:      #FAF7F1;   /* fondo principal */
	--sand:       #EFE6D9;   /* nude / arena */
	--blush:      #ECDDD3;   /* rosa palo */
	--sage:       #B7AD90;   /* clínico / natural, uso sutil */
	--tan:        #CDA672;
	--clay:       #CE8B5F;
	--terracotta: #BC5E4B;   /* acento fuerte en titulares */
	--rosegold:   #B07E66;   /* CTA / premium / detalles de marca */
	--rosegold-2: #C9A189;   /* champagne / degradados */
	--ink:        #3B2C20;   /* texto títulos */
	--body-clr:   #5C4A3B;   /* texto cuerpo (café suave) */
	--muted:      #9A8978;   /* texto secundario */
	--white:      #FFFFFF;
	--wa:         #25D366;   /* WhatsApp */

	/* --- Alias semánticos --- */
	--color-bg:      var(--cream);
	--color-surface: var(--sand);
	--color-accent:  var(--rosegold);
	--color-cta:     var(--terracotta);
	--color-text:    var(--body-clr);
	--color-heading: var(--ink);
	--color-subtle:  var(--muted);

	/* --- Tipografía --- */
	--font-heading: 'Fraunces', 'Georgia', serif;
	--font-body:    'Montserrat', 'Arial', sans-serif;

	/* Escala Minor Third ×1.2, base 16 px */
	--fs-xs:   0.694rem;   /* ~11 px */
	--fs-sm:   0.833rem;   /* ~13 px */
	--fs-base: 1rem;       /*  16 px */
	--fs-md:   1.2rem;     /* ~19 px */
	--fs-lg:   1.44rem;    /* ~23 px */
	--fs-xl:   1.728rem;   /* ~28 px */
	--fs-2xl:  2.074rem;   /* ~33 px */
	--fs-3xl:  2.488rem;   /* ~40 px */
	--fs-4xl:  2.986rem;   /* ~48 px */
	--fs-5xl:  3.583rem;   /* ~57 px */
	--fs-6xl:  4.3rem;     /* ~69 px */

	/* Pesos */
	--fw-light:   300;
	--fw-regular: 400;
	--fw-medium:  500;
	--fw-semi:    600;
	--fw-bold:    700;

	/* Interlineado */
	--lh-tight:  1.15;
	--lh-snug:   1.35;
	--lh-normal: 1.6;
	--lh-loose:  1.8;

	/* --- Espaciado (base 4 px) --- */
	--space-1:  0.25rem;
	--space-2:  0.5rem;
	--space-3:  0.75rem;
	--space-4:  1rem;
	--space-5:  1.25rem;
	--space-6:  1.5rem;
	--space-8:  2rem;
	--space-10: 2.5rem;
	--space-12: 3rem;
	--space-16: 4rem;
	--space-20: 5rem;
	--space-24: 6rem;
	--space-32: 8rem;

	/* --- Layout --- */
	--container-max: 1200px;
	--container-pad: var(--space-6);

	/* --- Radios --- */
	--radius-sm:   4px;
	--radius-md:   8px;
	--radius-lg:  16px;
	--radius-xl:  24px;
	--radius-pill: 999px;

	/* --- Sombras --- */
	--shadow-sm: 0 1px 3px rgba(59, 44, 32, .08);
	--shadow-md: 0 4px 16px rgba(59, 44, 32, .10);
	--shadow-lg: 0 8px 32px rgba(59, 44, 32, .12);

	/* --- Transiciones --- */
	--transition-fast: 150ms ease;
	--transition-base: 250ms ease;
	--transition-slow: 400ms ease;

	/* --- Z-index --- */
	--z-nav:   100;
	--z-fab:    90;
	--z-modal: 300;
}