/* Box knobs are registered non-inheriting, so each box's knobs stay on that
   box and never reach a nested box (set on an ancestor they do nothing).
   syntax "*" with no initial value, so var() falls back when unset: a
   "<length>" registration would need a computationally independent
   initial-value, and every browser drops a rule whose initial-value is
   relative (1rem, 0.5em). */
@property --box-padding {
  syntax: "*";
  inherits: false;
}

/* Takes the full border shorthand: width style colour (e.g. 1px solid red). */
@property --box-border {
  syntax: "*";
  inherits: false;
}

@property --box-radius {
  syntax: "*";
  inherits: false;
}

@property --box-bg {
  syntax: "*";
  inherits: false;
}

@property --box-color {
  syntax: "*";
  inherits: false;
}

.box {
  padding: var(--box-padding, var(--space-md));
  border: var(--box-border, 0 solid); /* full shorthand: width style colour */
  border-radius: var(--box-radius, 0);
  color: var(--box-color, inherit);
  background-color: var(--box-bg, transparent);
  /* Invisible normally; keeps the box's edge visible in forced-colours
     (Windows High Contrast) mode, where backgrounds are removed. */
  outline: var(--border-thin, 1px) solid transparent;
  outline-offset: calc(var(--border-thin, 1px) * -1);
}

/* Swaps --box-bg and --box-color, so set BOTH: with only one set, the text
   colour and the background can end up the same and the text disappears. */
.box.invert {
  color: var(--box-bg, inherit);
  background-color: var(--box-color, transparent);
}