/**
 * RootReal Layout Primitives
 *
 * Lightweight utility classes consumed by Flex, HStack, VStack, Grid, Box,
 * Constrained, Spacer, and Center components. All spacing values reference
 * --rr-spacing-* custom properties with hardcoded fallbacks.
 */

/* ============================================================================
 * Display
 * ========================================================================== */

.rr-flex { display: flex; }
.rr-inline-flex { display: inline-flex; }
.rr-grid { display: grid; }

/* ============================================================================
 * Flex Direction
 * ========================================================================== */

.rr-flex-row { flex-direction: row; }
.rr-flex-col { flex-direction: column; }
.rr-flex-row-reverse { flex-direction: row-reverse; }
.rr-flex-col-reverse { flex-direction: column-reverse; }

/* ============================================================================
 * Flex Wrap
 * ========================================================================== */

.rr-flex-nowrap { flex-wrap: nowrap; }
.rr-flex-wrap { flex-wrap: wrap; }
.rr-flex-wrap-reverse { flex-wrap: wrap-reverse; }

/* ============================================================================
 * Gap (maps to --rr-spacing-*)
 * ========================================================================== */

.rr-gap-none { gap: 0; }
.rr-gap-xs { gap: var(--rr-spacing-1, 4px); }
.rr-gap-sm { gap: var(--rr-spacing-2, 8px); }
.rr-gap-md { gap: var(--rr-spacing-3, 12px); }
.rr-gap-lg { gap: var(--rr-spacing-4, 16px); }
.rr-gap-xl { gap: var(--rr-spacing-6, 24px); }
.rr-gap-xxl { gap: var(--rr-spacing-8, 32px); }

/* ============================================================================
 * Align Items (cross-axis)
 * ========================================================================== */

.rr-align-start { align-items: flex-start; }
.rr-align-center { align-items: center; }
.rr-align-end { align-items: flex-end; }
.rr-align-stretch { align-items: stretch; }
.rr-align-baseline { align-items: baseline; }

/* ============================================================================
 * Justify Content (main-axis)
 * ========================================================================== */

.rr-justify-start { justify-content: flex-start; }
.rr-justify-center { justify-content: center; }
.rr-justify-end { justify-content: flex-end; }
.rr-justify-between { justify-content: space-between; }
.rr-justify-around { justify-content: space-around; }
.rr-justify-evenly { justify-content: space-evenly; }

/* ============================================================================
 * Padding (maps to --rr-spacing-*)
 * ========================================================================== */

.rr-p-none { padding: 0; }
.rr-p-xs { padding: var(--rr-spacing-1, 4px); }
.rr-p-sm { padding: var(--rr-spacing-2, 8px); }
.rr-p-md { padding: var(--rr-spacing-3, 12px); }
.rr-p-lg { padding: var(--rr-spacing-4, 16px); }
.rr-p-xl { padding: var(--rr-spacing-6, 24px); }
.rr-p-xxl { padding: var(--rr-spacing-8, 32px); }

/* ============================================================================
 * Border
 * ========================================================================== */

.rr-border {
  border: 1px solid var(--rr-gray-200, #e5e7eb);
}

/* ============================================================================
 * Border Radius
 * ========================================================================== */

.rr-radius-none { border-radius: 0; }
.rr-radius-sm { border-radius: var(--rr-radius-base, 4px); }
.rr-radius-md { border-radius: var(--rr-radius-md, 8px); }
.rr-radius-lg { border-radius: var(--rr-radius-lg, 12px); }
.rr-radius-xl { border-radius: var(--rr-radius-xl, 16px); }
.rr-radius-full { border-radius: 9999px; }

/* ============================================================================
 * Section Sizing (width constraints)
 * ========================================================================== */

.rr-sizing-full { width: 100%; }
.rr-sizing-intrinsic { width: fit-content; }
.rr-sizing-match { /* max-width set via inline style from Constrained component */ }

/* ============================================================================
 * Flex Utilities
 * ========================================================================== */

.rr-flex-1 {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
}

/* ============================================================================
 * Box base
 * ========================================================================== */

.rr-box {
  /* No inherent display — purely a padding/border/radius wrapper */
}