/* ==========================================================================
   Base typography & document defaults
   ========================================================================== */

body {
    font-feature-settings: 'cv11', 'ss01', 'ss03';
}

h1, .h1 {
    font-size: var(--fs-28);
    line-height: var(--lh-tight);
    font-weight: var(--fw-semibold);
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

h2, .h2 {
    font-size: var(--fs-22);
    line-height: var(--lh-snug);
    font-weight: var(--fw-semibold);
    letter-spacing: -0.005em;
    color: var(--text-primary);
}

h3, .h3 {
    font-size: var(--fs-18);
    line-height: var(--lh-snug);
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
}

h4, .h4 {
    font-size: var(--fs-16);
    line-height: var(--lh-snug);
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
}

h5, .h5, h6, .h6 {
    font-size: var(--fs-14);
    line-height: var(--lh-snug);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
}

p { color: var(--text-secondary); }

small, .text-small { font-size: var(--fs-13); }
.text-xs    { font-size: var(--fs-12); }
.text-sm    { font-size: var(--fs-14); }
.text-md    { font-size: var(--fs-15); }
.text-lg    { font-size: var(--fs-16); }
.text-xl    { font-size: var(--fs-18); }

.text-primary    { color: var(--text-primary); }
.text-secondary  { color: var(--text-secondary); }
.text-muted      { color: var(--text-muted); }
.text-link       { color: var(--text-link); }
.text-success    { color: var(--success); }
.text-warning    { color: var(--warning); }
.text-danger     { color: var(--danger); }
.text-info       { color: var(--info); }
.text-on-brand   { color: var(--text-on-brand); }

.fw-regular  { font-weight: var(--fw-regular); }
.fw-medium   { font-weight: var(--fw-medium); }
.fw-semibold { font-weight: var(--fw-semibold); }
.fw-bold     { font-weight: var(--fw-bold); }

.lh-tight   { line-height: var(--lh-tight); }
.lh-snug    { line-height: var(--lh-snug); }
.lh-normal  { line-height: var(--lh-normal); }
.lh-relaxed { line-height: var(--lh-relaxed); }

.uppercase { text-transform: uppercase; letter-spacing: 0.04em; }
.numeric   { font-variant-numeric: tabular-nums; }

code, kbd, samp, pre {
    font-family: var(--font-mono);
    font-size: 0.9em;
}

kbd {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--radius-xs);
    border: 1px solid var(--border-default);
    background: var(--surface-raised);
    font-size: var(--fs-12);
    color: var(--text-secondary);
    box-shadow: inset 0 -1px 0 var(--border-default);
}

/* ── Page header (used inside .app-content) ─────────────────────────── */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.page-header > div:first-child { min-width: 0; }

.page-title {
    font-size: var(--fs-22);
    line-height: var(--lh-tight);
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
    letter-spacing: -0.005em;
    margin-bottom: var(--space-1);
}

.page-subtitle {
    font-size: var(--fs-14);
    color: var(--text-muted);
    margin: 0;
}

.page-actions { display: flex; gap: var(--space-2); flex-shrink: 0; }

/* Section divider for grouping content blocks */
.section-divider {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: var(--space-6) 0 var(--space-4);
    color: var(--text-muted);
    font-size: var(--fs-12);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.section-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-subtle);
}