/* assets/css/utilities.css */
/* ==========================================================================
   Utilities (lite) – spacing / layout / display / radius / text
   - Prefiks: .u-
   - Jednostki: rem (skala na tokenach)
   - Własności logiczne: *-block-*, *-inline-* (RTL-ready)
   - Minimalny, niekolidujący z WP/Woo
   ========================================================================== */

/* Fallback tokenów (jeśli nie nadpisze ich app.css) */
:root{
  --space-0: 0rem;
  --space-1: .5rem;   /* 8px  */
  --space-2: 1rem;    /* 16px */
  --space-3: 1.5rem;  /* 24px */
  --space-4: 2rem;    /* 32px */

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
}

/* === Spacing: margin (block) =========================================== */
.u-mt-0{ margin-block-start: var(--space-0) !important; }
.u-mt-1{ margin-block-start: var(--space-1) !important; }
.u-mt-2{ margin-block-start: var(--space-2) !important; }
.u-mt-3{ margin-block-start: var(--space-3) !important; }
.u-mt-4{ margin-block-start: var(--space-4) !important; }

.u-mb-0{ margin-block-end: var(--space-0) !important; }
.u-mb-1{ margin-block-end: var(--space-1) !important; }
.u-mb-2{ margin-block-end: var(--space-2) !important; }
.u-mb-3{ margin-block-end: var(--space-3) !important; }
.u-mb-4{ margin-block-end: var(--space-4) !important; }

/* (opcjonalnie) inline margins – gdy potrzebne w komponencie */
.u-ms-0{ margin-inline-start: var(--space-0) !important; }
.u-ms-1{ margin-inline-start: var(--space-1) !important; }
.u-ms-2{ margin-inline-start: var(--space-2) !important; }
.u-ms-3{ margin-inline-start: var(--space-3) !important; }
.u-ms-4{ margin-inline-start: var(--space-4) !important; }

.u-me-0{ margin-inline-end: var(--space-0) !important; }
.u-me-1{ margin-inline-end: var(--space-1) !important; }
.u-me-2{ margin-inline-end: var(--space-2) !important; }
.u-me-3{ margin-inline-end: var(--space-3) !important; }
.u-me-4{ margin-inline-end: var(--space-4) !important; }

/* === Spacing: padding (block) ========================================== */
.u-pt-0{ padding-block-start: var(--space-0) !important; }
.u-pt-1{ padding-block-start: var(--space-1) !important; }
.u-pt-2{ padding-block-start: var(--space-2) !important; }
.u-pt-3{ padding-block-start: var(--space-3) !important; }
.u-pt-4{ padding-block-start: var(--space-4) !important; }

.u-pb-0{ padding-block-end: var(--space-0) !important; }
.u-pb-1{ padding-block-end: var(--space-1) !important; }
.u-pb-2{ padding-block-end: var(--space-2) !important; }
.u-pb-3{ padding-block-end: var(--space-3) !important; }
.u-pb-4{ padding-block-end: var(--space-4) !important; }

/* === Layout / Display =================================================== */
.u-w-full{ width: 100% !important; }

.u-hidden{ display: none !important; } /* UWAGA: ukrywa także dla SR – do „tylko wizualnie” użyj .sr-only z app.css */

.u-flex{ display: flex !important; }
.u-inline-flex{ display: inline-flex !important; }
.u-items-center{ align-items: center !important; }
.u-justify-between{ justify-content: space-between !important; }

/* Gap – logiczna przerwa w flex/grid */
.u-gap-0{ gap: var(--space-0) !important; }
.u-gap-1{ gap: var(--space-1) !important; }
.u-gap-2{ gap: var(--space-2) !important; }
.u-gap-3{ gap: var(--space-3) !important; }
.u-gap-4{ gap: var(--space-4) !important; }

/* === Text =============================================================== */
.u-text-center{ text-align: center !important; }

/* === Radius ============================================================= */
.u-rounded{ border-radius: var(--radius, 16px) !important; }
.u-rounded-sm{ border-radius: var(--radius-sm) !important; }
.u-rounded-md{ border-radius: var(--radius-md) !important; }
.u-rounded-lg{ border-radius: var(--radius-lg) !important; }
.u-rounded-xl{ border-radius: var(--radius-xl) !important; }