/* ─── Layout ──────────────────────────────────────────────────────────────── */
body {
    font-family: var(--font-body);
    background-color: var(--color-bg);
    color: var(--color-text);
    font-size: var(--font-size-base);
}

.app-shell {
    min-height: 100dvh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    background:
        radial-gradient(circle at top, rgba(255, 79, 163, 0.16), transparent 28rem),
        var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
}

.app-main {
    width: 100%;
}

.page-narrow {
    width: min(100% - 2rem, 34rem);
    margin-inline: auto;
    padding-block: var(--space-6);
}

.page-wide {
    width: min(100% - 2rem, 72rem);
    margin-inline: auto;
    padding-block: var(--space-6);
}

/* ── Typography helpers ───────────────────────────────────────────────────── */
h1 { font-size: var(--font-size-2xl); font-weight: 700; line-height: 1.2; margin-bottom: var(--space-4); }
h2 { font-size: var(--font-size-xl); font-weight: 600; line-height: 1.3; margin-bottom: var(--space-3); }
h3 { font-size: var(--font-size-lg); font-weight: 600; margin-bottom: var(--space-2); }

p { margin-bottom: var(--space-3); }
p:last-child { margin-bottom: 0; }

small { font-size: var(--font-size-sm); }

.text-muted  { color: var(--color-muted); }
.text-accent { color: var(--color-accent); }
.text-danger { color: var(--color-danger); }
.text-success { color: var(--color-success); }

/* ── Flex helpers ─────────────────────────────────────────────────────────── */
.flex         { display: flex; }
.flex-center  { display: flex; align-items: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-col     { display: flex; flex-direction: column; }
.flex-gap-sm  { gap: var(--space-2); }
.flex-gap-md  { gap: var(--space-4); }
.flex-1       { flex: 1; }

/* ── Spacing helpers ─────────────────────────────────────────────────────── */
.mt-sm { margin-top: var(--space-2); }
.mt-md { margin-top: var(--space-4); }
.mt-lg { margin-top: var(--space-6); }
.mb-sm { margin-bottom: var(--space-2); }
.mb-md { margin-bottom: var(--space-4); }
.mb-lg { margin-bottom: var(--space-6); }

/* ── Error text ───────────────────────────────────────────────────────────── */
.error-text    { color: var(--color-danger); font-size: var(--font-size-sm); display: block; margin-top: var(--space-1); }
.field-error   { color: var(--color-danger); font-size: var(--font-size-sm); display: block; margin-top: var(--space-1); }

/* ── Divider ──────────────────────────────────────────────────────────────── */
hr { border: none; border-top: 1px solid var(--color-border); margin-block: var(--space-6); }