/* ─── Base typography + body ─────────────────────────────── */

html {
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
}

body {
    font-family: var(--font-sans);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--color-text);
    background-color: var(--color-bg);
    transition: background-color var(--transition-base), color var(--transition-base);
    min-height: 100vh;
}

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

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; }
p + p { margin-top: var(--space-md); }

a {
    color: var(--color-primary);
    transition: color var(--transition-fast);
}
a:hover { color: var(--color-primary-hover); }

.muted       { color: var(--color-text-muted); }
.faint       { color: var(--color-text-faint); }
.lead        { font-size: var(--font-size-lg); color: var(--color-text-muted); }

code, pre { font-family: var(--font-mono); font-size: 0.92em; }
code {
    padding: 2px 6px;
    background: var(--color-surface-alt);
    border-radius: var(--radius-sm);
}

/* ─── Flash messages ─────────────────────────────────────── */
.flash {
    padding: var(--space-md);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-md);
    font-size: var(--font-size-sm);
    border: 1px solid transparent;
}
.flash--success { background: rgba(16, 185, 129, 0.08); border-color: rgba(16, 185, 129, 0.25); color: var(--color-success); }
.flash--error   { background: rgba(239, 68, 68, 0.08);  border-color: rgba(239, 68, 68, 0.25);  color: var(--color-danger);  }
.flash--info    { background: rgba(59, 130, 246, 0.08); border-color: rgba(59, 130, 246, 0.25); color: var(--color-info);    }
.flash ul { list-style: none; }
.flash li + li { margin-top: var(--space-xs); }