/* ==================== Box Utility ====================
   Universal container styling with consistent borders
   
   Design System:
   - Black background (#000000)
   - Sharp corners (border-radius: 0)
   - Pink accent border by default
   
   Usage:
   - Use .box class for basic container
   - Use <Box> component for more flexibility
   ========================================================= */

:root {
  /* Box design tokens */
  --box-bg: #000000;
  --box-border-color: var(--color-accent-pink, #ff52a1);
  --box-border-width: 2px;
  --box-padding: var(--space-6, 1.5rem);
}

/* Base box class */
.box {
  background: var(--box-bg);
  border: var(--box-border-width) solid var(--box-border-color);
  padding: var(--box-padding);
  border-radius: 0;
}

/* Border width variants */
.box-border-thin {
  --box-border-width: 1px;
}

.box-border-thick {
  --box-border-width: 2px;
}

/* Padding variants */
.box-p-none {
  --box-padding: 0;
}

.box-p-sm {
  --box-padding: var(--space-4, 1rem);
}

.box-p-md {
  --box-padding: var(--space-6, 1.5rem);
}

.box-p-lg {
  --box-padding: var(--space-8, 2rem);
}

/* Color variants */
.box-pink {
  --box-border-color: var(--color-accent-pink, #ff52a1);
}

.box-yellow {
  --box-border-color: var(--color-accent-yellow, #fbbf24);
}

.box-green {
  --box-border-color: var(--color-success, #10b981);
}

.box-red {
  --box-border-color: var(--color-error, #ef4444);
}

.box-white {
  --box-border-color: var(--color-text-primary, #ffffff);
}