/**
 * ESPAÇAMENTO - PharmData Design System v2.0
 * Escala granular para margens, paddings e gaps.
 *
 * ATUALIZAÇÃO: Adicionados valores intermediários para
 * maior flexibilidade em layouts complexos.
 */

:root {
    /* ===================
       SPACING SCALE
       =================== */

    --space-0: 0;           /* 0px */
    --space-px: 1px;        /* 1px - borders, fine adjustments */
    --space-0.5: 0.125rem;  /* 2px */
    --space-1: 0.25rem;     /* 4px */
    --space-1.5: 0.375rem;  /* 6px */
    --space-2: 0.5rem;      /* 8px */
    --space-2.5: 0.625rem;  /* 10px */
    --space-3: 0.75rem;     /* 12px */
    --space-3.5: 0.875rem;  /* 14px */
    --space-4: 1rem;        /* 16px */
    --space-5: 1.25rem;     /* 20px */
    --space-6: 1.5rem;      /* 24px */
    --space-7: 1.75rem;     /* 28px */
    --space-8: 2rem;        /* 32px */
    --space-9: 2.25rem;     /* 36px */
    --space-10: 2.5rem;     /* 40px */
    --space-11: 2.75rem;    /* 44px */
    --space-12: 3rem;       /* 48px */
    --space-14: 3.5rem;     /* 56px */
    --space-16: 4rem;       /* 64px */
    --space-20: 5rem;       /* 80px */
    --space-24: 6rem;       /* 96px */
    --space-28: 7rem;       /* 112px */
    --space-32: 8rem;       /* 128px */

    /* ===================
       SEMANTIC ALIASES (Backward Compatible)
       =================== */

    --space-2xs: var(--space-1);    /* 4px */
    --space-xs: var(--space-2);     /* 8px */
    --space-sm: var(--space-3);     /* 12px */
    --space-md: var(--space-4);     /* 16px */
    --space-lg: var(--space-6);     /* 24px */
    --space-xl: var(--space-8);     /* 32px */
    --space-2xl: var(--space-10);   /* 40px - NEW intermediate */
    --space-3xl: var(--space-12);   /* 48px */
    --space-4xl: var(--space-16);   /* 64px */
    --space-5xl: var(--space-20);   /* 80px */

    /* ===================
       COMPONENT-SPECIFIC SPACING
       =================== */

    /* Card padding */
    --card-padding-sm: var(--space-3);
    --card-padding-md: var(--space-4);
    --card-padding-lg: var(--space-6);

    /* Section spacing */
    --section-gap-sm: var(--space-6);
    --section-gap-md: var(--space-10);
    --section-gap-lg: var(--space-16);

    /* Form field spacing */
    --field-gap: var(--space-4);
    --field-group-gap: var(--space-6);
    --form-section-gap: var(--space-8);

    /* Table cell padding */
    --cell-padding-sm: var(--space-2) var(--space-3);
    --cell-padding-md: var(--space-3) var(--space-4);
    --cell-padding-lg: var(--space-4) var(--space-6);

    /* Modal padding */
    --modal-padding: var(--space-6);
    --modal-header-padding: var(--space-4) var(--space-6);
    --modal-footer-padding: var(--space-4) var(--space-6);

    /* Inline spacing (buttons, badges) */
    --inline-gap-sm: var(--space-1);
    --inline-gap-md: var(--space-2);
    --inline-gap-lg: var(--space-3);
}

/* ===================
   STACK UTILITIES
   Vertical spacing between children
   =================== */

.stack-2xs > * + * { margin-top: var(--space-1); }
.stack-xs > * + * { margin-top: var(--space-2); }
.stack-sm > * + * { margin-top: var(--space-3); }
.stack-md > * + * { margin-top: var(--space-4); }
.stack-lg > * + * { margin-top: var(--space-6); }
.stack-xl > * + * { margin-top: var(--space-8); }
.stack-2xl > * + * { margin-top: var(--space-10); }
.stack-3xl > * + * { margin-top: var(--space-12); }

/* ===================
   GAP UTILITIES
   Flex/Grid gap
   =================== */

.gap-0 { gap: 0; }
.gap-px { gap: 1px; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }
.gap-10 { gap: var(--space-10); }
.gap-12 { gap: var(--space-12); }

/* Semantic gap aliases */
.gap-2xs { gap: var(--space-1); }
.gap-xs { gap: var(--space-2); }
.gap-sm { gap: var(--space-3); }
.gap-md { gap: var(--space-4); }
.gap-lg { gap: var(--space-6); }
.gap-xl { gap: var(--space-8); }

/* Row/Column specific gaps */
.gap-x-sm { column-gap: var(--space-3); }
.gap-x-md { column-gap: var(--space-4); }
.gap-x-lg { column-gap: var(--space-6); }
.gap-y-sm { row-gap: var(--space-3); }
.gap-y-md { row-gap: var(--space-4); }
.gap-y-lg { row-gap: var(--space-6); }

/* ===================
   PADDING UTILITIES
   =================== */

.p-0 { padding: 0; }
.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-5 { padding: var(--space-5); }
.p-6 { padding: var(--space-6); }
.p-8 { padding: var(--space-8); }

.px-2 { padding-left: var(--space-2); padding-right: var(--space-2); }
.px-3 { padding-left: var(--space-3); padding-right: var(--space-3); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }

.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }

/* ===================
   MARGIN UTILITIES
   =================== */

.m-0 { margin: 0; }
.m-auto { margin: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }

.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }

.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }