@use 'sass:math';
@use 'abstracts' as *;

// ==============================
// Base Typography
// ==============================
:root {
    // Schriftarten (Beispiel: System-Stack)
    --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', sans-serif;
    --font-family-heading: var(--font-family-base); // oder eine spezifische Schrift wie 'Inter', 'Helvetica Neue'

    // Schriftgrößen (fluid, basierend auf _tokens.scss)
    --font-size-sm: clamp(0.875rem, 0.5vw + 0.75rem, 1rem);
    --font-size-base: var(--font-size-base); // aus _tokens.scss
    --font-size-lg: var(--font-size-lg);     // aus _tokens.scss
    --font-size-xl: var(--font-size-xl);     // aus _tokens.scss

    // Schriftgewichte
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;

    // Zeilenhöhen
    --line-height-base: 1.5;
    --line-height-heading: 1.2;

    // Buchstabenabstand
    --letter-spacing-base: 0;
    --letter-spacing-heading: -0.02em;
}

// ==============================
// Typografie für Elemente
// ==============================
body {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--text-main);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-heading);
    margin: 0 0 var(--space-2);
    color: var(--text-main);
}

h1 { font-size: var(--font-size-xxl); }
h2 { font-size: var(--font-size-xl); }
h3 { font-size: var(--font-size-lg); }
h4 { font-size: var(--font-size-base); }

p {
    margin: 0 0 var(--space-3);
}

a {
    color: var(--accent);
    text-decoration: none;
    transition: color 0.2s ease;

    &:hover {
        color: var(--accent-hover);
    }
}

// ==============================
// Utility-Klassen für Typografie
// ==============================
.text-muted {
    color: var(--text-muted);
}

.text-center {
    text-align: center;
}

.font-light { font-weight: var(--font-weight-light); }
.font-medium { font-weight: var(--font-weight-medium); }
