/*
 * Escala de espaçamento do design system.
 * Fonte: docs/knowledge-base/design-system/spec.md, seção 3.
 *
 * Escala base 4px: 4 / 8 / 12 / 16 / 24 / 32 / 48.
 * Padding padrão de container: 16px mobile, 24px desktop (breakpoint desktop em breakpoints.css).
 */

:root {
    --space-4: 4px;
    --space-8: 8px;
    --space-12: 12px;
    --space-16: 16px;
    --space-24: 24px;
    --space-32: 32px;
    --space-48: 48px;

    --container-padding: var(--space-16);
}

/* desktop >= 1024px (mesmo limite de breakpoints.css) */
@media (min-width: 1024px) {
    :root {
        --container-padding: var(--space-24);
    }
}

/* Container padrão de página/seção, com o padding responsivo acima. */
.container {
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}

/* Utilitários de espaçamento reaproveitáveis pelas telas (padding / margin / gap). */
.p-4  { padding: var(--space-4); }
.p-8  { padding: var(--space-8); }
.p-12 { padding: var(--space-12); }
.p-16 { padding: var(--space-16); }
.p-24 { padding: var(--space-24); }
.p-32 { padding: var(--space-32); }
.p-48 { padding: var(--space-48); }

.m-4  { margin: var(--space-4); }
.m-8  { margin: var(--space-8); }
.m-12 { margin: var(--space-12); }
.m-16 { margin: var(--space-16); }
.m-24 { margin: var(--space-24); }
.m-32 { margin: var(--space-32); }
.m-48 { margin: var(--space-48); }

.gap-4  { gap: var(--space-4); }
.gap-8  { gap: var(--space-8); }
.gap-12 { gap: var(--space-12); }
.gap-16 { gap: var(--space-16); }
.gap-24 { gap: var(--space-24); }
.gap-32 { gap: var(--space-32); }
.gap-48 { gap: var(--space-48); }