/**
 * Utility classes using WordPress spacing presets
 * Variables: var(--wp--preset--spacing--{size})
 *
 * Size mapping:
 * - 3xs → 20 (0.5rem / 8px)
 * - 2xs → 30 (0.75rem / 12px)
 * - xs  → 40 (1rem / 16px)
 * - s   → 50 (1.25rem / 20px)
 * - m   → 60 (1.5rem / 24px)
 * - l   → 70 (2rem / 32px)
 * - xl  → 80 (2.5rem / 40px)
 */

 /* Colors */
.text-light {
    color: var(--theme-palette-color-7);
}

/* Padding - All sides */
.padding-3xs { padding: var(--wp--preset--spacing--20); }
.padding-2xs { padding: var(--wp--preset--spacing--30); }
.padding-xs { padding: var(--wp--preset--spacing--40); }
.padding-s { padding: var(--wp--preset--spacing--50); }
.padding-m { padding: var(--wp--preset--spacing--60); }
.padding-l { padding: var(--wp--preset--spacing--70); }
.padding-xl { padding: var(--wp--preset--spacing--80); }

/* Padding - Vertical (top + bottom) */
.padding-vertical-3xs { padding-top: var(--wp--preset--spacing--20); padding-bottom: var(--wp--preset--spacing--20); }
.padding-vertical-2xs { padding-top: var(--wp--preset--spacing--30); padding-bottom: var(--wp--preset--spacing--30); }
.padding-vertical-xs { padding-top: var(--wp--preset--spacing--40); padding-bottom: var(--wp--preset--spacing--40); }
.padding-vertical-s { padding-top: var(--wp--preset--spacing--50); padding-bottom: var(--wp--preset--spacing--50); }
.padding-vertical-m { padding-top: var(--wp--preset--spacing--60); padding-bottom: var(--wp--preset--spacing--60); }
.padding-vertical-l { padding-top: var(--wp--preset--spacing--70); padding-bottom: var(--wp--preset--spacing--70); }
.padding-vertical-xl { padding-top: var(--wp--preset--spacing--80); padding-bottom: var(--wp--preset--spacing--80); }

/* Padding - Horizontal (left + right) */
.padding-horizontal-3xs { padding-left: var(--wp--preset--spacing--20); padding-right: var(--wp--preset--spacing--20); }
.padding-horizontal-2xs { padding-left: var(--wp--preset--spacing--30); padding-right: var(--wp--preset--spacing--30); }
.padding-horizontal-xs { padding-left: var(--wp--preset--spacing--40); padding-right: var(--wp--preset--spacing--40); }
.padding-horizontal-s { padding-left: var(--wp--preset--spacing--50); padding-right: var(--wp--preset--spacing--50); }
.padding-horizontal-m { padding-left: var(--wp--preset--spacing--60); padding-right: var(--wp--preset--spacing--60); }
.padding-horizontal-l { padding-left: var(--wp--preset--spacing--70); padding-right: var(--wp--preset--spacing--70); }
.padding-horizontal-xl { padding-left: var(--wp--preset--spacing--80); padding-right: var(--wp--preset--spacing--80); }

/* Padding - Top */
.padding-top-3xs { padding-top: var(--wp--preset--spacing--20); }
.padding-top-2xs { padding-top: var(--wp--preset--spacing--30); }
.padding-top-xs { padding-top: var(--wp--preset--spacing--40); }
.padding-top-s { padding-top: var(--wp--preset--spacing--50); }
.padding-top-m { padding-top: var(--wp--preset--spacing--60); }
.padding-top-l { padding-top: var(--wp--preset--spacing--70); }
.padding-top-xl { padding-top: var(--wp--preset--spacing--80); }

/* Padding - Bottom */
.padding-bottom-3xs { padding-bottom: var(--wp--preset--spacing--20); }
.padding-bottom-2xs { padding-bottom: var(--wp--preset--spacing--30); }
.padding-bottom-xs { padding-bottom: var(--wp--preset--spacing--40); }
.padding-bottom-s { padding-bottom: var(--wp--preset--spacing--50); }
.padding-bottom-m { padding-bottom: var(--wp--preset--spacing--60); }
.padding-bottom-l { padding-bottom: var(--wp--preset--spacing--70); }
.padding-bottom-xl { padding-bottom: var(--wp--preset--spacing--80); }

/* Padding - Left */
.padding-left-3xs { padding-left: var(--wp--preset--spacing--20); }
.padding-left-2xs { padding-left: var(--wp--preset--spacing--30); }
.padding-left-xs { padding-left: var(--wp--preset--spacing--40); }
.padding-left-s { padding-left: var(--wp--preset--spacing--50); }
.padding-left-m { padding-left: var(--wp--preset--spacing--60); }
.padding-left-l { padding-left: var(--wp--preset--spacing--70); }
.padding-left-xl { padding-left: var(--wp--preset--spacing--80); }

/* Padding - Right */
.padding-right-3xs { padding-right: var(--wp--preset--spacing--20); }
.padding-right-2xs { padding-right: var(--wp--preset--spacing--30); }
.padding-right-xs { padding-right: var(--wp--preset--spacing--40); }
.padding-right-s { padding-right: var(--wp--preset--spacing--50); }
.padding-right-m { padding-right: var(--wp--preset--spacing--60); }
.padding-right-l { padding-right: var(--wp--preset--spacing--70); }
.padding-right-xl { padding-right: var(--wp--preset--spacing--80); }

/* Margin - All sides */
.margin-3xs { margin: var(--wp--preset--spacing--20); }
.margin-2xs { margin: var(--wp--preset--spacing--30); }
.margin-xs { margin: var(--wp--preset--spacing--40); }
.margin-s { margin: var(--wp--preset--spacing--50); }
.margin-m { margin: var(--wp--preset--spacing--60); }
.margin-l { margin: var(--wp--preset--spacing--70); }
.margin-xl { margin: var(--wp--preset--spacing--80); }

/* Margin - Vertical (top + bottom) */
.margin-vertical-3xs { margin-top: var(--wp--preset--spacing--20); margin-bottom: var(--wp--preset--spacing--20); }
.margin-vertical-2xs { margin-top: var(--wp--preset--spacing--30); margin-bottom: var(--wp--preset--spacing--30); }
.margin-vertical-xs { margin-top: var(--wp--preset--spacing--40); margin-bottom: var(--wp--preset--spacing--40); }
.margin-vertical-s { margin-top: var(--wp--preset--spacing--50); margin-bottom: var(--wp--preset--spacing--50); }
.margin-vertical-m { margin-top: var(--wp--preset--spacing--60); margin-bottom: var(--wp--preset--spacing--60); }
.margin-vertical-l { margin-top: var(--wp--preset--spacing--70); margin-bottom: var(--wp--preset--spacing--70); }
.margin-vertical-xl { margin-top: var(--wp--preset--spacing--80); margin-bottom: var(--wp--preset--spacing--80); }

/* Margin - Horizontal (left + right) */
.margin-horizontal-3xs { margin-left: var(--wp--preset--spacing--20); margin-right: var(--wp--preset--spacing--20); }
.margin-horizontal-2xs { margin-left: var(--wp--preset--spacing--30); margin-right: var(--wp--preset--spacing--30); }
.margin-horizontal-xs { margin-left: var(--wp--preset--spacing--40); margin-right: var(--wp--preset--spacing--40); }
.margin-horizontal-s { margin-left: var(--wp--preset--spacing--50); margin-right: var(--wp--preset--spacing--50); }
.margin-horizontal-m { margin-left: var(--wp--preset--spacing--60); margin-right: var(--wp--preset--spacing--60); }
.margin-horizontal-l { margin-left: var(--wp--preset--spacing--70); margin-right: var(--wp--preset--spacing--70); }
.margin-horizontal-xl { margin-left: var(--wp--preset--spacing--80); margin-right: var(--wp--preset--spacing--80); }

/* Margin - Top */
.margin-top-3xs { margin-top: var(--wp--preset--spacing--20); }
.margin-top-2xs { margin-top: var(--wp--preset--spacing--30); }
.margin-top-xs { margin-top: var(--wp--preset--spacing--40); }
.margin-top-s { margin-top: var(--wp--preset--spacing--50); }
.margin-top-m { margin-top: var(--wp--preset--spacing--60); }
.margin-top-l { margin-top: var(--wp--preset--spacing--70); }
.margin-top-xl { margin-top: var(--wp--preset--spacing--80); }

/* Margin - Bottom */
.margin-bottom-3xs { margin-bottom: var(--wp--preset--spacing--20); }
.margin-bottom-2xs { margin-bottom: var(--wp--preset--spacing--30); }
.margin-bottom-xs { margin-bottom: var(--wp--preset--spacing--40); }
.margin-bottom-s { margin-bottom: var(--wp--preset--spacing--50); }
.margin-bottom-m { margin-bottom: var(--wp--preset--spacing--60); }
.margin-bottom-l { margin-bottom: var(--wp--preset--spacing--70); }
.margin-bottom-xl { margin-bottom: var(--wp--preset--spacing--80); }

/* Margin - Left */
.margin-left-3xs { margin-left: var(--wp--preset--spacing--20); }
.margin-left-2xs { margin-left: var(--wp--preset--spacing--30); }
.margin-left-xs { margin-left: var(--wp--preset--spacing--40); }
.margin-left-s { margin-left: var(--wp--preset--spacing--50); }
.margin-left-m { margin-left: var(--wp--preset--spacing--60); }
.margin-left-l { margin-left: var(--wp--preset--spacing--70); }
.margin-left-xl { margin-left: var(--wp--preset--spacing--80); }

/* Margin - Right */
.margin-right-3xs { margin-right: var(--wp--preset--spacing--20); }
.margin-right-2xs { margin-right: var(--wp--preset--spacing--30); }
.margin-right-xs { margin-right: var(--wp--preset--spacing--40); }
.margin-right-s { margin-right: var(--wp--preset--spacing--50); }
.margin-right-m { margin-right: var(--wp--preset--spacing--60); }
.margin-right-l { margin-right: var(--wp--preset--spacing--70); }
.margin-right-xl { margin-right: var(--wp--preset--spacing--80); }

/* Gap utilities for flexbox/grid */
.gap-3xs { gap: var(--wp--preset--spacing--20); }
.gap-2xs { gap: var(--wp--preset--spacing--30); }
.gap-xs { gap: var(--wp--preset--spacing--40); }
.gap-s { gap: var(--wp--preset--spacing--50); }
.gap-m { gap: var(--wp--preset--spacing--60); }
.gap-l { gap: var(--wp--preset--spacing--70); }
.gap-xl { gap: var(--wp--preset--spacing--80); }