/* GT Typography — sistema tipográfico global.
 *
 * Define font stacks, escala (desktop + mobile) y helpers reutilizables.
 * NO carga fuentes externas; solo system stacks. Cuando agreguemos webfonts,
 * el cambio será reemplazar el primer nombre del stack en :root.
 */

:root {
	/* ----- Font stacks (system, sin webfonts todavía) ----- */
	--gt-font-display: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
	--gt-font-text:    system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--gt-font-mono:    ui-monospace, "SF Mono", "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace;

	/* ----- Desktop scale ----- */
	--gt-fs-display-xl: 4rem;       /* 64px */
	--gt-fs-display-lg: 3rem;       /* 48px */
	--gt-fs-display-md: 2.25rem;    /* 36px */
	--gt-fs-display-sm: 1.75rem;    /* 28px */
	--gt-fs-body-xl:    1.25rem;    /* 20px */
	--gt-fs-body-lg:    1.125rem;   /* 18px */
	--gt-fs-body-md:    1rem;       /* 16px */
	--gt-fs-body-sm:    0.875rem;   /* 14px */
	--gt-fs-caption:    0.75rem;    /* 12px */
	--gt-fs-micro:      0.6875rem;  /* 11px */

	/* ----- Line heights ----- */
	--gt-lh-tight:   1.1;
	--gt-lh-snug:    1.25;
	--gt-lh-normal:  1.5;
	--gt-lh-relaxed: 1.65;

	/* ----- Weights ----- */
	--gt-fw-regular:  400;
	--gt-fw-medium:   500;
	--gt-fw-semibold: 600;
	--gt-fw-bold:     700;

	/* ----- Tracking ----- */
	--gt-tracking-tight:  -0.02em;
	--gt-tracking-snug:   -0.01em;
	--gt-tracking-normal: 0;
	--gt-tracking-wide:   0.04em;
	--gt-tracking-wider:  0.08em;
}

/* ----- Mobile scale (reescala variables, no toca selectores) ----- */
@media (max-width: 640px) {
	:root {
		--gt-fs-display-xl: 2.75rem;
		--gt-fs-display-lg: 2.25rem;
		--gt-fs-display-md: 1.75rem;
		--gt-fs-display-sm: 1.5rem;
		--gt-fs-body-xl:    1.125rem;
		--gt-fs-body-lg:    1.0625rem;
	}
}

/* ----- Base typography ----- */
body {
	font-family: var(--gt-font-text);
	line-height: var(--gt-lh-normal);
}

/* ----- Family utility classes ----- */
.gt-display { font-family: var(--gt-font-display); letter-spacing: var(--gt-tracking-snug); }
.gt-text    { font-family: var(--gt-font-text); }
.gt-mono    { font-family: var(--gt-font-mono); }

/* ----- Numeric helpers ----- */
.gt-tnum         { font-variant-numeric: tabular-nums; }
.gt-slashed-zero { font-variant-numeric: slashed-zero; }

/* Precio: tabular + tight, base sin estilizar moneda (eso va en componente). */
.gt-price-num {
	font-family: var(--gt-font-text);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1, "lnum" 1;
	letter-spacing: var(--gt-tracking-snug);
}

/* ----- Section helpers ----- */
.gt-eyebrow {
	font-family: var(--gt-font-text);
	font-size: var(--gt-fs-caption);
	font-weight: var(--gt-fw-semibold);
	letter-spacing: var(--gt-tracking-wider);
	text-transform: uppercase;
	color: var(--gt-text-eyebrow);
}

.gt-section-index {
	font-family: var(--gt-font-mono);
	font-size: var(--gt-fs-caption);
	font-weight: var(--gt-fw-medium);
	letter-spacing: var(--gt-tracking-wide);
	color: var(--gt-text-muted);
}

.gt-section-title {
	font-family: var(--gt-font-display);
	font-size: var(--gt-fs-display-md);
	font-weight: var(--gt-fw-semibold);
	line-height: var(--gt-lh-tight);
	letter-spacing: var(--gt-tracking-tight);
	color: var(--gt-text-primary);
}