/* layout.css — container + basic helpers (mobile-first) */

:root {
    --home-gap: 18px;
    --container-max: 1200px;
    --container-padding: 16px;
    --card-radius: 12px;
    --card-bg: var(--color-surface-muted, #ffffff);
    --card-border: rgba(16, 20, 50, 0.04);
}

/* section spacing helper */
.section {
    padding-top: 28px;
    padding-bottom: 28px;
}

/* simple card baseline (safe to share) */
.card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    padding: 14px;
    box-sizing: border-box;
}

/* small form-hint / helper */
.form-hint {
    font-size: 0.95rem;
    color: rgba(74, 74, 74, 0.78);
    line-height: 1.3;
}

/* responsive helpers */
@media (min-width: 768px) {
    :root {
        --home-gap: 22px;
    }
}