/**
 * Nzele Typography Scale & Editorial Hierarchy
 * Quiet Luxury layout focusing on spacing, restraint, and legibility.
 */

/* Global body resets and base values */
body {
	font-family: var(--nzle-font-body);
	color: var(--nzle-text-secondary);
	line-height: 1.7;
	background-color: var(--nzle-bg-primary);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   1. Editorial Headings (Serif / Cormorant Garamond)
   ========================================================================== */

h1, h2, h3, h4, h5, h6,
.nzle-display {
	font-family: var(--nzle-font-headings);
	color: var(--nzle-text-primary);
	font-weight: 300;                /* Light weights signal premium visual luxury */
	line-height: 1.2;
	margin-top: 0;
	margin-bottom: var(--nzle-space-sm);
	letter-spacing: var(--nzle-letter-spacing-tight);
}

.nzle-display {
	font-size: clamp(3.2rem, 7vw, 6.5rem);
	line-height: 1.1;
	letter-spacing: -0.03em;
}

h1 {
	font-size: clamp(2.4rem, 5vw, 4rem);
	line-height: 1.15;
}

h2 {
	font-size: clamp(1.8rem, 3.5vw, 2.75rem);
	line-height: 1.2;
}

h3 {
	font-size: clamp(1.35rem, 2.5vw, 2rem);
	line-height: 1.25;
}

h4 {
	font-size: clamp(1.15rem, 2vw, 1.5rem);
	line-height: 1.3;
}

/* ==========================================================================
   2. UI Elements & Metadata (Sans-Serif / Inter)
   ========================================================================== */

p, .nzle-body {
	font-family: var(--nzle-font-body);
	font-size: 0.95rem; /* 15.2px for elegant visual weight */
	line-height: 1.75;
	color: var(--nzle-text-secondary);
	font-weight: 300;
	margin-top: 0;
	margin-bottom: var(--nzle-space-md);
}

.nzle-body-large {
	font-size: 1.125rem; /* 18px */
	line-height: 1.7;
	font-weight: 300;
	color: var(--nzle-text-primary);
}

/* Supporting captions, tags, prices, and visual meta */
.nzle-meta,
.nzle-caption,
.price,
.nzle-price {
	font-family: var(--nzle-font-body);
	font-size: 0.75rem; /* 12px */
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: var(--nzle-letter-spacing-wide);
	color: var(--nzle-text-secondary);
	line-height: 1.4;
}

/* Editorial subtitles */
.nzle-subtitle {
	font-family: var(--nzle-font-headings);
	font-size: 1.2rem;
	font-style: italic;
	font-weight: 400;
	color: var(--nzle-accent);
}

/* Links & interactive typography elements */
a {
	color: var(--nzle-text-primary);
	text-decoration: none;
	transition: var(--nzle-transition-default);
}

a:hover {
	color: var(--nzle-accent);
}

/* Blockquotes */
blockquote {
	font-family: var(--nzle-font-headings);
	font-size: 1.85rem;
	line-height: 1.4;
	font-style: italic;
	color: var(--nzle-text-primary);
	border-left: 1px solid var(--nzle-accent); /* Thin elegant rule */
	padding-left: var(--nzle-space-md);
	margin: var(--nzle-space-xl) 0;
	font-weight: 300;
}