* {
    font-family: var(--font-family-base);
}

/* Headings — sized off the font scale, generous top margin / tight
   bottom so adjacent paragraphs nest cleanly. */
h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--spacing-sm);
    color: var(--text-color-1);
    font-weight: 600;
    line-height: 1.25;
}

h1 { font-size: var(--font-size-xl); }
h2 { font-size: var(--font-size-lg); }
h3 { font-size: var(--font-size-md); font-weight: 600; }
h4 { font-size: var(--font-size-md); font-weight: 500; }
h5 { font-size: var(--font-size-sm); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-color-2); }
h6 { font-size: var(--font-size-sm); font-weight: 500; color: var(--text-color-3); }

p {
    margin: 0 0 var(--spacing-sm);
    color: var(--text-color-1);
    line-height: 1.5;
}

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

    &:hover {
        text-decoration: underline;
    }
}

ul, ol {
    margin: 0 0 var(--spacing-sm);
    padding-left: var(--spacing-lg);
    color: var(--text-color-1);
    line-height: 1.5;
}

li + li {
    margin-top: var(--spacing-xs);
}

/* Typography rule above is for prose lists. Navigation / toolbar lists
   own their own spacing and should opt out. */
nav li + li,
.row-actions li + li,
.button-row li + li {
    margin-top: 0;
}

dl {
    margin: 0 0 var(--spacing-sm);
}

dt {
    color: var(--text-color-3);
    font-size: var(--font-size-sm);
    margin-top: var(--spacing-xs);
}

dd {
    margin: 0 0 var(--spacing-xs);
    color: var(--text-color-1);
}

code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.9em;
    padding: 0 0.25em;
    border-radius: var(--radius-sm);
    background-color: var(--background-color-1);
    color: var(--text-color-1);
    border: 1px solid var(--border-color-2);
}

pre {
    margin: 0 0 var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
    background-color: var(--background-color-1);
    color: var(--text-color-1);
    border: 1px solid var(--border-color-2);
    overflow-x: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

pre code {
    padding: 0;
    background: transparent;
    border: none;
    font-size: inherit;
}

blockquote {
    margin: 0 0 var(--spacing-sm);
    padding-left: var(--spacing-md);
    border-left: 3px solid var(--border-color-3);
    color: var(--text-color-2);
}

hr {
    margin: var(--spacing-md) 0;
    border: 0;
    border-top: 1px solid var(--border-color-2);
}

/* Page header — top of an index/edit screen. */
.page-header {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.page-header__back {
    color: var(--accent-color);
    font-size: var(--font-size-sm);
    text-decoration: none;
    width: fit-content;

    &:hover {
        text-decoration: underline;
    }
}

.page-header__row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-md);
}

.page-header__title {
    margin: 0;
    font-size: var(--font-size-lg);
}

.page-header__actions {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-sm);
}

.page-header__filters {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

/* Section header — subheading above related content inside a page. */
.section-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-sm);
}

.section-header__title {
    margin: 0;
    font-size: var(--font-size-md);
}

.section-header__actions {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-sm);
}