/* Base typography + body baseline - portable */
html, body {
    margin: 0;
    padding: 0;
    font-family: var(--font-sans);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

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); }

p { margin: 0; }

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

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

/* Centered page container */
.app-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--space-5);
}

/* Projekt-forsiden i fuld bredde: loeft container-cap KUN naar project-detail er indeni */
.app-container:has(.project-detail) {
    max-width: none;
}

/* Page header pattern */
.page-header { margin-bottom: var(--space-5); }
.breadcrumb {
    font-size: var(--font-size-xs);
    color: var(--color-text-faint);
    margin-bottom: var(--space-2);
}
.breadcrumb a { color: var(--color-text-muted); }
.breadcrumb a:hover { color: var(--color-accent); }
.breadcrumb .sep { margin: 0 var(--space-2); color: var(--color-border-strong); }
.page-title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    margin: 0;
}
.page-subtitle {
    font-size: var(--font-size-sm);
    color: var(--color-text-faint);
    margin: var(--space-1) 0 0 0;
}