/* T-Apuri — Typography */
/* Session 7.1 */

/* ============================================
   1. HEADINGS
   ============================================ */

h1, h2, h3, h4, h5, h6 {
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    color: var(--text-primary);
}

h1 { font-size: var(--font-size-3xl); }
h2 { font-size: var(--font-size-2xl); }
h3 { font-size: var(--font-size-xl); }
h4 { font-size: var(--font-size-lg); }
h5 { font-size: var(--font-size-base); }
h6 { font-size: var(--font-size-sm); }

/* ============================================
   2. BODY TEXT
   ============================================ */

p {
    margin-bottom: var(--space-4);
    line-height: var(--line-height-normal);
}

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

small {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

strong {
    font-weight: var(--font-weight-semibold);
}

/* ============================================
   3. MONOSPACE / CODE
   ============================================ */

code, pre {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-sm);
}

code {
    background-color: var(--color-neutral-100);
    padding: 0.125rem var(--space-1);
    border-radius: var(--border-radius-sm);
}

pre {
    background-color: var(--color-neutral-100);
    padding: var(--space-4);
    border-radius: var(--border-radius-md);
    overflow-x: auto;
    line-height: var(--line-height-relaxed);
}

pre code {
    background: none;
    padding: 0;
}

/* ============================================
   4. LEGAL TEXT (Context Panel)
   ============================================ */

.legal-text {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
}

.legal-text .section-number {
    font-weight: var(--font-weight-bold);
    color: var(--color-primary-600);
}

.legal-text .section-title {
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-2);
}

.legal-text .subsection {
    margin-left: var(--space-6);
    margin-bottom: var(--space-2);
}

/* ============================================
   5. PLACEHOLDER TEXT
   ============================================ */

.placeholder-text {
    color: var(--text-muted);
    font-style: italic;
}

/* ============================================
   6. LINKS
   ============================================ */

.text-link {
    color: var(--color-primary-600);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.text-link:hover {
    color: var(--color-primary-700);
    text-decoration: underline;
}

/* ============================================
   7. HIGHLIGHT (hakutulosten korostus)
   ============================================ */

mark, .highlight {
    background-color: var(--color-primary-100);
    color: var(--text-primary);
    padding: 0.0625rem 0.125rem;
    border-radius: 2px;
}