/**
 * BOX PRIMITIVE
 * Based on Every Layout's Box
 * Creates intrinsic styling containers for individual elements
 *
 * Features:
 * - Padding to create internal spacing
 * - Border for visual box shape
 * - Background color with foreground color inheritance
 * - Invert variant for flipped color scheme
 * - Transparent outline for high contrast mode support
 * - Logical properties for internationalization
 *
 * Usage:
 * .box - Basic box with default padding and border
 * .box.invert - Inverted color scheme
 * .box[data-box="invert"] - Inverted using data attribute
 *
 * Example:
 * <div class="box">
 *   <p>Content with intrinsic spacing and styling</p>
 * </div>
 */

.box {
  padding: var(--box-padding, var(--s0));
  border: var(--border-width) solid;
  --color-light: var(--bg, #fff);
  --color-dark: var(--txt, #000);
  color: var(--color-dark);
  background-color: var(--color-light);
  outline: 0.125rem solid transparent;
  outline-offset: -0.125rem;
}

/* Force color inheritance for all children */
.box * {
  color: inherit;
}

/* ========================================
   INVERT VARIANT
 * Flipped color scheme
   ======================================== */

.box.invert,
.box[data-box="invert"] {
  color: var(--color-light);
  background-color: var(--color-dark);
}

/* ========================================
   PADDING VARIANTS
   Different padding sizes
   ======================================== */

/* Tight padding */
.box[data-box="tight"] {
  --box-padding: var(--s-1);
}

/* Default padding */
.box[data-box="default"] {
  --box-padding: var(--s0);
}

/* Loose padding */
.box[data-box="loose"] {
  --box-padding: var(--s1);
}

/* ========================================
   BORDER VARIANTS
   Border visibility options
   ======================================== */

/* No border */
.box[data-box="no-border"] {
  border: none;
}

/* Thick border */
.box[data-box="thick"] {
  --border-width: 4px;
}