/*
 * Miarto Studio – Typografie
 *
 * Überschriften, Display-Text, Fließtext, Bildunterschriften, Links, Zitate.
 * Alle Werte referenzieren Design Tokens aus variables.css.
 */

/* ---- Body ---- */

body {
    font-family: var(--ms-font-body);
    font-size:   var(--ms-font-size-md);
    line-height: var(--ms-leading-relaxed);
    color:       var(--ms-text);
    background:  var(--ms-bg);
}

/* ---- Display-Text ---- */

.ms-display {
    font-family:    var(--ms-font-heading);
    font-size:      var(--ms-font-size-display);
    font-weight:    var(--ms-font-weight-bold);
    line-height:    var(--ms-leading-tight);
    letter-spacing: -0.02em;
    color:          var(--ms-text);
}

/* ---- Überschriften ---- */

h1, h2, h3, h4, h5, h6 {
    font-family:   var(--ms-font-heading);
    font-weight:   var(--ms-font-weight-bold);
    line-height:   var(--ms-leading-tight);
    color:         var(--ms-text);
    margin-top:    0;
    margin-bottom: var(--ms-space-4);
}

h1 { font-size: var(--ms-font-size-5xl); }
h2 { font-size: var(--ms-font-size-4xl); }
h3 { font-size: var(--ms-font-size-3xl); }
h4 { font-size: var(--ms-font-size-xl); }
h5 { font-size: var(--ms-font-size-lg); }
h6 { font-size: var(--ms-font-size-md); }

/* ---- Fließtext ---- */

p {
    margin-top:    0;
    margin-bottom: var(--ms-space-5);
}

p:last-child {
    margin-bottom: 0;
}

.ms-lead {
    font-size:   var(--ms-font-size-xl);
    font-weight: var(--ms-font-weight-normal);
    line-height: var(--ms-leading-normal);
    color:       var(--ms-text-subtle);
}

/* ---- Links ---- */

a {
    color:           var(--ms-accent);
    text-decoration: underline;
    transition:      color var(--ms-transition);
}

a:hover {
    color:           var(--ms-accent-dark);
    text-decoration: none;
}

/* ---- Listen ---- */

ul, ol {
    margin-top:    0;
    margin-bottom: var(--ms-space-5);
    padding-left:  var(--ms-space-6);
}

li {
    margin-bottom: var(--ms-space-2);
}

/* ---- Zitate ---- */

blockquote {
    margin:        0 0 var(--ms-space-6);
    padding:       var(--ms-space-5) var(--ms-space-8);
    border-left:   4px solid var(--ms-accent);
    background:    var(--ms-surface);
    border-radius: 0 var(--ms-radius-md) var(--ms-radius-md) 0;
}

blockquote p {
    font-family: var(--ms-font-heading);
    font-size:   var(--ms-font-size-lg);
    font-style:  italic;
    color:       var(--ms-text);
    margin:      0;
}

blockquote cite {
    display:    block;
    margin-top: var(--ms-space-3);
    font-size:  var(--ms-font-size-sm);
    font-style: normal;
    color:      var(--ms-text-subtle);
}

/* ---- Bildunterschriften ---- */

figcaption,
.wp-element-caption,
.wp-caption-text {
    font-size:  var(--ms-font-size-sm);
    color:      var(--ms-text-subtle);
    text-align: center;
    margin-top: var(--ms-space-2);
    font-style: italic;
}

/* ---- Code ---- */

code, kbd, samp {
    font-family:   'Courier New', Courier, monospace;
    font-size:     0.875em;
    background:    var(--ms-surface);
    border:        1px solid var(--ms-border);
    border-radius: var(--ms-radius-sm);
    padding:       0.15em 0.4em;
}

pre {
    background:    var(--ms-surface);
    border:        1px solid var(--ms-border);
    border-radius: var(--ms-radius-md);
    padding:       var(--ms-space-5);
    overflow-x:    auto;
    margin-bottom: var(--ms-space-6);
}

pre code {
    background: none;
    border:     none;
    padding:    0;
    font-size:  var(--ms-font-size-sm);
}

/* ---- Trennlinie ---- */

hr {
    border:     none;
    border-top: 1px solid var(--ms-border);
    margin:     var(--ms-space-8) 0;
}

/* ---- Eyebrow-Label ---- */

.ms-eyebrow {
    display:        block;
    font-family:    var(--ms-font-body);
    font-size:      var(--ms-font-size-xs);
    font-weight:    var(--ms-font-weight-bold);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color:          var(--ms-accent);
    margin-bottom:  var(--ms-space-3);
}

/* ---- Abschnitts-Überschrift (Eyebrow + H2 kombiniert) ---- */

.ms-section-title {
    text-align:    center;
    margin-bottom: var(--ms-space-12);
}

.ms-section-title h2 {
    margin-bottom: var(--ms-space-4);
}

.ms-section-title .ms-lead {
    max-width:     640px;
    margin-inline: auto;
}