/**
 * Elucio Theme – Schriftsystem
 *
 * Schriften:
 *   --font-display   → Silk Serif        (Hero-Überschriften h1, Trenner)
 *   --font-headline  → Silk Serif Text   (h2, h3, h4 usw.)
 *   --font-body      → Manrope           (Fließtext, Navigation, Toplines)
 *
 * Silk-Font-Lizenzdateien nach Kauf ablegen:
 *   assets/fonts/silk-serif/SilkSerif-Regular.woff2
 *   assets/fonts/silk-serif-text/SilkSerifText-Regular.woff2
 *
 * Manrope wird über Google Fonts API geladen (functions.php).
 */

/* -------------------------------------------------------------------------
   Silk Serif — Display-Schnitt
   Einsatz: Hero-Bereich (h1), Trenner-Bereiche
   Merkmale: feinere Serifen, optisch für große Schriftgrade optimiert
------------------------------------------------------------------------- */
@font-face {
	font-family: 'Silk Serif';
	src: url('../fonts/silk-serif/SilkSerif-Regular.woff2') format('woff2'),
	     url('../fonts/silk-serif/SilkSerif-Regular.woff')  format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* -------------------------------------------------------------------------
   Silk Serif Text — Text-Schnitt
   Einsatz: h2, h3, h4 und Fließtext-Überschriften
   Merkmale: robustere Serifen, für kleinere Schriftgrade lesbar
------------------------------------------------------------------------- */
@font-face {
	font-family: 'Silk Serif Text';
	src: url('../fonts/silk-serif-text/SilkSerifText-Regular.woff2') format('woff2'),
	     url('../fonts/silk-serif-text/SilkSerifText-Regular.woff')  format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* -------------------------------------------------------------------------
   CSS Custom Properties — Schriftsystem
------------------------------------------------------------------------- */
:root {
	/* Schriftfamilien */
	--font-display:  'Silk Serif', Georgia, 'Times New Roman', serif;
	--font-headline: 'Silk Serif Text', Georgia, 'Times New Roman', serif;
	--font-body:     'Manrope', system-ui, -apple-system, sans-serif;

	/* Schriftgrößen (fluid, clamp-basiert) */
	--fs-hero:  clamp(3rem,   6vw, 6rem);    /* h1 / Hero */
	--fs-h2:    clamp(2rem,   3.5vw, 3rem);  /* h2 */
	--fs-h3:    clamp(1.5rem, 2.5vw, 2rem);  /* h3 */
	--fs-h4:    clamp(1.25rem, 2vw, 1.5rem); /* h4 */
	--fs-base:  1rem;                         /* Fließtext */
	--fs-small: 0.875rem;                     /* Meta, Labels */
	--fs-xs:    0.75rem;                      /* Captions */

	/* Zeilenhöhen */
	--lh-heading: 1.15;
	--lh-body:    1.7;

	/* Buchstabenabstand */
	--ls-topline: 0.12em;  /* Toplines / Labels in Kapitälchen */
	--ls-nav:     0.04em;  /* Navigation */
}

/* -------------------------------------------------------------------------
   Basis-Zuweisung
------------------------------------------------------------------------- */
body {
	font-family: var(--font-body);
	font-size:   var(--fs-base);
	line-height: var(--lh-body);
}

h1 {
	font-family: var(--font-display);
	font-size:   var(--fs-hero);
	line-height: var(--lh-heading);
	font-weight: 400; /* Silk Serif nur in Regular */
}

h2 {
	font-family: var(--font-headline);
	font-size:   var(--fs-h2);
	line-height: var(--lh-heading);
	font-weight: 400;
}

h3 {
	font-family: var(--font-headline);
	font-size:   var(--fs-h3);
	line-height: var(--lh-heading);
	font-weight: 400;
}

h4,
h5,
h6 {
	font-family: var(--font-headline);
	font-size:   var(--fs-h4);
	line-height: var(--lh-heading);
	font-weight: 400;
}

/* Navigation – Manrope mit eigenem Letter-Spacing */
.site-nav,
.site-footer__nav {
	font-family:     var(--font-body);
	letter-spacing:  var(--ls-nav);
}

/* Topline-Utility-Klasse (z. B. Label über Überschriften) */
.topline {
	font-family:    var(--font-body);
	font-size:      var(--fs-small);
	letter-spacing: var(--ls-topline);
	text-transform: uppercase;
}