/* ===================================
   SPACING - Mobile Only
   =================================== */

:root {
    /* Spacing scale base */
    --space-1: 0.25rem;    /* 4px */
    --space-2: 0.5rem;     /* 8px */
    --space-3: 0.75rem;    /* 12px */
    --space-4: 1rem;       /* 16px */
    --space-5: 1.25rem;    /* 20px */
    --space-6: 1.5rem;     /* 24px */
    --space-7: 1.75rem;    /* 28px */
    --space-8: 2rem;       /* 32px */

    /* Containers */
    --container-padding: var(--space-4);

    /* Buttons */
    --btn-padding-y: var(--space-3);
    --btn-padding-x: var(--space-6);
    --btn-icon-size: 2.75rem;       /* 44px — touch target standard */
    --btn-icon-size-sm: 2rem;       /* 32px — contextes compacts */
    --btn-icon-font: 1.1rem;
    --btn-icon-font-sm: 0.85rem;
    --btn-sm-padding-y: 0.35rem;
    --btn-sm-padding-x: var(--space-3);

    /* Border widths */
    --border-width: 1px;
    --border-width-thick: 3px;

    /* Borders */
    --radius-base: 0.4rem;
    --radius-1: 0.4rem;
    --radius-2: 0.5rem;
    --radius-3: 0.6rem;
    --radius-4: 0.7rem;
    --radius-pill: 1.25rem;
}