:root {
    --font-family-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    
    /* Schriftgrößen */
    --font-size-base: 16px;
    --font-size-small: 14px;
    --font-size-large: 18px;
    --font-size-h1: 2.5rem;
    --font-size-h2: 2rem;
    --font-size-h3: 1.5rem;
    --font-size-h4: 1.25rem;
    --font-size-h5: 1.1rem;
    --font-size-h6: 1rem;
    --font-size-tile-number: 2.5rem;
    --font-size-hero-title: 3.5rem;
    --font-size-hero-description: 1.35rem;
    --font-size-blogposts-title: 2.75rem;
    --font-size-blogpost-title: 3rem;
    --font-size-blogpost-content: 1.1rem;
    --font-size-blogpost-content-h2: 2rem;
    --font-size-blogpost-content-h3: 1.5rem;
    --font-size-blogpost-hero-title: 2.5rem;
    --font-size-blogpost-hero-excerpt: 1.2rem;
    --font-size-blogpost-card-title: 1.4rem;
    --font-size-blogpost-card-excerpt: 0.95rem;
    --font-size-placeholder: 1.2rem;
    --font-size-author: 1rem;
    --font-size-date: 0.9rem;
    --font-size-date-small: 0.8rem;
    --font-size-meta: 0.85rem;
    --font-size-avatar: 16px;
    
    /* Zeilenhöhen */
    --line-height-base: 1.6;
    --line-height-tight: 1.4;
    --line-height-relaxed: 1.8;
    --line-height-hero-title: 1.15;
    --line-height-hero-description: 1.7;
    --line-height-blogpost-content: 1.8;
    --line-height-blogpost-hero-excerpt: 1.7;
    --line-height-blogpost-card-excerpt: 1.7;
    --line-height-feature-text: 1.5;
    
    /* Schriftgewichte */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: var(--font-family-primary);
}

body {
    background-color: var(--color-background);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--color-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1 {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
}

h2 {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
}

h3 {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-tight);
}

h4 {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-tight);
}

h5 {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-h5);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-tight);
}

h6 {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-h6);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-tight);
}

p {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
}

a {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
}

div {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
}